Data driven documents with d3.js | Hacker News Reader

Data driven documents with d3.js

mbostock.github.com

44 pointschmike7 comments

Fyi, this is just a link to the D3 main page on github, not some new d3-related project.

Good to see d3.js on the Hacker News first page, I have recently been looking at this, just because it looks so cool.

One of the triggers for me investigating this library, is that I have been looking at some ideas for creating nice visualizations of the world bank data, http://data.worldbank.org/developers/ , mainly for personal interest and learning.

Alot of stuff to get the old noggin' around, but ya gotta start somewhere.

Max de Marzi created some beautiful visualizations using d3.js for the Neo4j Heroku Challenge (http://blog.neo4j.org/2012/03/heroku-challengers-vote-now.ht...).

I always imagine that if it is data-driven I won't be able to control the looks exactly, and then maybe writing my own graph with Raphael is easier. Anyone can comment on how you control how you display stuff?

Quite the opposite. With D3 you control the structure of the DOM (hence data-driven documents) directly. Data-driven refers to the declarative method in which you generate or update the document from data, not the end result. Unlike Raphaël and other graphics libraries that introduce new forms of visual representation, with D3 you use SVG, CSS and HTML.

This by itself is a great selling point of d3, in my opinion. You can inspect everything about your visualization using the browser debugger, and it's easy to figure out how the objects in the DOM correspond to your code, which is a blessing. The first thing anyone should do when checking out d3 is go through a simple example and then open up the debugger and see how transparent the connection is.

Also, I think a non-programming designer could understand and tweak the CSS without much guidance from a developer, using only an understanding of SVG.

The Voronoi Diagram example is quite mesmerizing. http://mbostock.github.com/d3/ex/voronoi.html

Reply on news.ycombinator.com