A collection of tweet-sized D3 creations – to add yours, just tweet the code

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.

“The enemy of art is the absence of limitations.” - Orson Welles

The benefits of limitation is an old theme in discussion of creativity. But in this case, the arbitrary constraint also provides the inspiration. I mean, 140 characters is an enticing challenge, an excuse to shield yourself from self-criticism, and a less intimidating scope when you're deciding to start a project.

The bar is low for art these days.

+1

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... [2] http://bost.ocks.org/mike/join/

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.

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

Just like my mix tapes

Yea I only spotted that this morning, must fix that one.

Works OK in my browser

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 10x. 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.

I never trust any page ever when linking out of a domain to another, I always _always_ open things like that in a new tab. "Defensive Browsing"