How D3 Selections Work

#1

Post by jfirebaugh » Fri, Apr 26, 2013, 6:03 PM UTC

Re: How D3 Selections Work

#2

Post by mbostock » Fri, Apr 26, 2013, 6:13 PM UTC

There’s an easter egg of sorts in that you can run the shown code snippets in the JavaScript console, and the results in the console will match the shown diagrams. This is thanks to careful inclusion of off-screen elements.

It would be fun to make an interactive tool that generates the diagram directly from the given selection and data (and probably wouldn’t be too hard to repurpose the existing code). But the JavaScript console and element inspector are so useful on their own for learning D3 + DOM, it’s likely more fruitful to encourage people to use the console directly.

Re: How D3 Selections Work

#3

Post by doobius » Fri, Apr 26, 2013, 6:42 PM UTC

I have never met him, but I love Michael Bostock

Re: How D3 Selections Work

#4

Post by shanselman » Fri, Apr 26, 2013, 6:56 PM UTC

This man is a god. I love that his "Videos" are demos of his tech. Inspect element, my friends.

Re: How D3 Selections Work

#5

Post by pstuart » Fri, Apr 26, 2013, 6:57 PM UTC

mbostock wrote: post #2

There’s an easter egg of sorts in that you can run the shown code snippets in the JavaScript console, and the results in the console will match the shown diagrams. This is thanks to careful inclusion of off-screen elements. It would be fun to make an interactive tool that generates the diagram directly from the given selection and data (and probably wouldn’t be too hard to repurpose the existing code). But the JavaSc…

When I show friends why I'm excited about web technology today one of the examples I use is your work.

Re: How D3 Selections Work

#6

Post by k3n » Fri, Apr 26, 2013, 7:00 PM UTC

shanselman wrote: post #4

This man is a god. I love that his "Videos" are demos of his tech. Inspect element, my friends.

Wow, I didn't even notice that. That is very slick! I played some of the "videos" and thought the implementation was nice, responsive, and smooth; I had no idea it wasn't pre-rendered video.

Re: How D3 Selections Work

#7

Post by shanselman » Fri, Apr 26, 2013, 7:07 PM UTC

k3n wrote: post #6

shanselman wrote: post #4

This man is a god. I love that his "Videos" are demos of his tech. Inspect element, my friends.

Wow, I didn't even notice that. That is very slick! I played some of the "videos" and thought the implementation was nice, responsive, and smooth; I had no idea it wasn't pre-rendered video.

Ya, I'm still digging into the code trying to figure out how he wrote it...

Re: How D3 Selections Work

#8

Post by jmandzik » Fri, Apr 26, 2013, 7:08 PM UTC

mbostock wrote: post #2

There’s an easter egg of sorts in that you can run the shown code snippets in the JavaScript console, and the results in the console will match the shown diagrams. This is thanks to careful inclusion of off-screen elements. It would be fun to make an interactive tool that generates the diagram directly from the given selection and data (and probably wouldn’t be too hard to repurpose the existing code). But the JavaSc…

This article is fantastic, juicy stuff to wrap my head around.

Anytime I whip up a new visualization in d3, I look like a wizard at the office. Thanks Mike! Owe you a beer if you're ever in DC.

Re: How D3 Selections Work

#9

Post by RobinL » Sat, Apr 27, 2013, 10:28 AM UTC

Thanks for this Mike. My work is more efficient, more enjoyable, and better because of d3. A lot of this relies on your quality, clear tutorials and documentation.