
A collection of tweet-sized D3 creations – to add yours, just tweet the code - InInteraction
https://t.d3fc.io/
======
gerbal
I like how all it takes to get some cool art is to impose an arbitrary
constraint on technically skilled people.

~~~
Fiahil
Exactly. Isn't technical mastery what art is supposed to be about? I'm pretty
sure we won't see a "selfie artist" anytime soon.

~~~
keville
Technical Mastery is not Art, it's Technical Mastery. There's nothing
inherently creative in having mastered a craft. Technical Mastery is a
comparative metric when a given output has been determined to be artistic.

Producing a "selfie" is, by definition, working within an artistic constraint,
and when I read your post I had to assume that we had _already seen_ many
"selfie artists", which seems to be the case:

[http://www.huffingtonpost.com/entry/10-artists-who-use-
selfi...](http://www.huffingtonpost.com/entry/10-artists-who-use-selfies-as-
their-radical-weapons_us_55e7393ae4b0c818f61a303b)

------
vdnkh
These are awesome! I've been learning d3 and have been struggling a bit with
animations. Does anyone mind breaking down one of these tweets and explaining
how it works? I understand it's minifed but learning how to loop animations
would be great.

~~~
chrisprice
What you see in the tweet is the code which runs in the animation loop. The
animation loop is provided, along with all of the abbreviated function
aliases, by this base file [1].

I've reproduced the guts of it below -

    
    
      d3.timer(function(t) {
        g.d([t]);
        if (window.tweet) {
          tweet(t);
        }
      });
    

The important bit is the t argument which is provided to the code you see in
the tweet. Most of the animations are driven by this value, normally passed
through a trigonometric function to provide some easing.

In the case of my Hello World example, the tweet code is as follows -

    
    
      // Perform a data-join [2] with the parent set to the root node provided 
      // by the base file, the data defaulting to [t] as above and with a 
      // built-in behavior of appending an SVG text element in the enter selection.
      T()
      // Set the following attributes on the text element -
      .a({
        // Affine transform the element using a sc-ale transform.
        // The scaling value is a function of the data item bound to the element (t).
        // s is an alias for Math.sin and 1e3 is just shorthand for 1000 (saves 1 character!)
        transform:d=>sc(4+s(d/1e3)),
        // Make use of another alias to offset the text based on the normalised mouse position.
        x:d=>mo[0]*10,
        y:d=>mo[1]*10
      })
      // Set the text content of the text element
      .t('Hello World')
    

This is by no means an exciting example but it should provide some clues as to
how the more complex animations work.

[1]
[https://github.com/chrisprice/t-d3fc/blob/master/public/base...](https://github.com/chrisprice/t-d3fc/blob/master/public/base.js)
[2] [http://bost.ocks.org/mike/join/](http://bost.ocks.org/mike/join/)

~~~
vdnkh
Very nice explanation, the selectAll bit is clever. So the key is that timer.
I tried googling around for animations before but I guess I missed it.

------
rtkwe
Ah there's the inevitable alert("test") messages. Thank god for the 'prevent
this window from generating additional popups' option in browsers these days.

Makes me want to learn d3 finally.

~~~
taneq
I got a "You've been XSSd" popup. Not sure if humorous alert("test") or if
demo JS exploit...

Edit: Some Ctrl+F resulted in "console.log("halp"); alert("you've been
XSSd");" from "Harrison Shoebridge". Naff.

~~~
borkabrak
Without looking into the source, I'd bet someone tweeted the "exploit", just
to make the point that going to that page basically runs arbitrary javascript
in your browser.

------
nickpeterson
if you constrain languages enough, they all eventually become verbose k.

------
eigenbom
So awesome! I added a flanging dancing circle thing.

I ran a 'write a game in a tweet' challenge last year, was super fun and had
heaps of creative entries (mostly javascript).
[https://twitter.com/eigenbom/status/614783132391247872](https://twitter.com/eigenbom/status/614783132391247872)

------
rodionos
Super. My firefox 43.0.4 gobbled up all the CPU it could but it was a rare
case where I would gladly trade CPU cycles for the pleasure of scrolling
through examples.

------
brad0
Demo scene 2.0?

------
satyajeet23
wow, this made my fans go crazy!

~~~
smrtinsert
Whenever I need my office a little warmer I go to Mike's gallery page. (please
dont bother with relevant xkcd)

------
Flimm
Yet another site that breaks your back button. Cool idea, but that bug left a
nasty taste in my mouth.

~~~
dang
It's fine to report such a problem, but "left a nasty taste in my mouth"? Come
on. You make it sound like they shouldn't have even bothered, when this is one
of the coolest things to have appeared on HN in a while.

All: Before responding to new work with swipes, dismissals, or nitpicks, try
mentally multiplying their effect by 1000x. That seems to be about the
magnitude by which we underestimate how such stuff comes across. Adjust
accordingly, and then you can offer criticisms and corrections without adding
air pollution.

~~~
Flimm
Sorry, man. This is a pet peeve of mine, as you can see from my comment
history. And I'm not the only one, those comments often get quite a few
upvotes. I can see how it must be frustrating to launch something only to have
a comment like this, but it is my honest not-trying-to-be-mean reaction to a
site that breaks the back button, I feel very frustrated and it's off-putting.
The website _is_ a cool idea as I said, so to be clear, I do _not_ think that
they shouldn't have bothered.

~~~
dang
I believe you, and didn't think that you meant to communicate that. The
trouble is that individual signals that aren't objectionable compound into
global problems at scale. It's a community problem more than an individual
one, which is why it's so hard to correct.

One thing we've learned is that you can't judge this phenomenon accurately by
upvotes. Indignation of any kind reliably gets more upvotes than anything
else, by a large margin.

