Settings

Theme

How D3 Selections Work

bost.ocks.org

162 points by jfirebaugh 13 years ago · 8 comments

Reader

mbostock 13 years ago

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.

  • pstuart 13 years ago

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

  • jmandzik 13 years ago

    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.

shanselman 13 years ago

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

  • k3n 13 years ago

    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.

doobius 13 years ago

I have never met him, but I love Michael Bostock

RobinL 13 years ago

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.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection