5 ms·

Data driven documents with d3.js

44 points by chmike 15y ago

SkyMarshal 15y ago
Fyi, this is just a link to the D3 main page on github, not some new d3-related project.
espeed 15y ago
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.html http://blog.neo4j.org/2012/03/heroku-challengers-vote-now.ht...).
shaydoc 15y ago
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/ 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.
swah 15y ago
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?
- mbostock 15y ago
  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.
  - dkarl 15y ago
    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.
jamesgeck0 15y ago
The Voronoi Diagram example is quite mesmerizing. http://mbostock.github.com/d3/ex/voronoi.html http://mbostock.github.com/d3/ex/voronoi.html

44 points by chmike 15y ago

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

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.html http://blog.neo4j.org/2012/03/heroku-challengers-vote-now.ht...).

shaydoc 15y ago

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/ 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.

swah 15y ago

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?

mbostock 15y ago
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.
- dkarl 15y ago
  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.

jamesgeck0 15y ago

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