6 ms·
A collection of tweet-sized D3 creations – to add yours, just tweet the code
- Flimm 11y agoYet another site that breaks your back button. Cool idea, but that bug left a nasty taste in my mouth.
- chrisprice 11y agoYea I only spotted that this morning, must fix that one.
- InInteraction 11y agoWorks OK in my browser
- chrisprice 11y agoThe iframes load progressively as you scroll (vvo/lazyload). Every time one loads it requires you to click the back button an extra time (in Chrome at least).
- InInteraction 11y ago"in Chrome" says it all )
- breckinloggins 11y agoSafari as well.
- dang 11y agoIt'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 11y agoSorry, 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 11y agoI 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.
- 91bananas 11y agoI 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"
- gerbal 11y agoI like how all it takes to get some cool art is to impose an arbitrary constraint on technically skilled people.
- Fiahil 11y agoExactly. 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 11y agoTechnical 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-selfies-as-their-radical-weapons_us_55e7393ae4b0c818f61a303b http://www.huffingtonpost.com/entry/10-artists-who-use-selfi...
- cbd1984 11y agoCertainly not: https://en.wikipedia.org/wiki/File:Raffaello_Sanzio.jpg https://en.wikipedia.org/wiki/File:Raffaello_Sanzio.jpg No selfies in the canon here: https://en.wikipedia.org/wiki/File:Kirchner_1919_portrait.jpg https://en.wikipedia.org/wiki/File:Kirchner_1919_portrait.jp... Utterly unimaginable: https://en.wikipedia.org/wiki/File:Muybridge_disk_step_walk.jpg https://en.wikipedia.org/wiki/File:Muybridge_disk_step_walk....
- lawpoop 11y agoYeah not like we haven't seen "Portrait of the Artist as a Young Man" or anything a billion times.
- stephenboyd 11y ago“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.
- brad0 11y agoDemo scene 2.0?
- satyajeet23 11y agowow, this made my fans go crazy!
- smrtinsert 11y agoWhenever I need my office a little warmer I go to Mike's gallery page. (please dont bother with relevant xkcd)
- skeletonjelly 11y agoJust like my mix tapes
- vdnkh 11y agoThese 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.
- InInteraction 11y ago+1
- chrisprice 11y agoWhat 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.js https://github.com/chrisprice/t-d3fc/blob/master/public/base... [2] http://bost.ocks.org/mike/join/ http://bost.ocks.org/mike/join/
- vdnkh 11y agoVery 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.
- nickpeterson 11y agoif you constrain languages enough, they all eventually become verbose k.
- rodionos 11y agoSuper. 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.
- rtkwe 11y agoAh 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 11y agoI 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 11y agoWithout 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.
- eigenbom 11y agoSo 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
- kimonos 11y agoTotally cool! :)
- deleted 11y ago[deleted]