10 ms·

Try D3 Now - D3 Visualization Tutorial

137 points by LiveTheDream 15y ago

swah 15y ago
The website's examples are much more eye catching: http://mbostock.github.com/d3/ex/voronoi.html http://mbostock.github.com/d3/ex/voronoi.html
polymath21 15y ago
We use d3 extensively here at TwoSides and love it. Here's some examples: http://www.twosides.co/issues/185-should-euthanasia-or-physician-assisted-suicide-be-legal/ http://www.twosides.co/issues/185-should-euthanasia-or-physi... http://www.twosides.co/jono http://www.twosides.co/jono (the venn diagram/bar graph wouldn't be transparent if you had an account)
- icandoitbetter 15y ago
  This is the best web UI I've seen in a long time, both in terms of functionality and beauty. Good luck.
  - polymath21 15y ago
    Thank you!
- jabr 15y ago
  Just curious, but do you support IE below 9? If so, how? svgweb?
Vadoff 15y ago
Aww, thought this was for Diablo 3...
- d0m 15y ago
  Don't be sad for the downvotes; they just don't get it.
- eulo 15y ago
  Same here bro, same here :(
yesbabyyes 15y ago
I have eyed d3 eagerly for a while and now we enjoy using it for our node knockout entry (http://rapminder.com/ http://rapminder.com/). This tutorial comes in handy - thanks!
- asanwal 15y ago
  This is great and quite amusing. I just wish I could compare the # of references to Cristal vs. Dom P over time :)
  - yesbabyyes 15y ago
    Thanks asanwal - you will! We have quite a few things we want to finish today before the competition ends, and even more afterwards.
  - yesbabyyes 15y ago
    Check it out: http://rapminder.com/words/cristal,perignon http://rapminder.com/words/cristal,perignon
100k 15y ago
D3 is getting a lot of love lately! I like this tutorial as it nicely explains how to use events and animation. If you missed it, I wrote a D3 tutorial two weeks ago that shows how to do basic charting: http://www.recursion.org/d3-for-mere-mortals/ http://www.recursion.org/d3-for-mere-mortals/
- jrmoran 15y ago
  Thanks for writing it. I decided to start learning D3 last night and your tutorial was really helpful.
- altrego99 15y ago
  Very nicely written and had the right level of details to get me started. Awesome, thanks!
itcmcgrath 15y ago
My first thought upon seeing this was "Why is the D3 database on the top of hacker news???" http://en.wikipedia.org/wiki/Pick_database http://en.wikipedia.org/wiki/Pick_database
Caged 15y ago
I released a visualization I completed yesterday which is written in D3 (source on Github) - http://dealloc.me/demos/crime/2011.html http://dealloc.me/demos/crime/2011.html. Also, I've written an introduction to D3, focusing on what makes it different than your average charting library - http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.html http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.ht....
jmatt 15y ago
D3 and ClojureScript: http://keminglabs.com/cljs-d3/ http://keminglabs.com/cljs-d3/ http://groups.google.com/group/clojure/browse_thread/thread/0ec135ec63457e79 http://groups.google.com/group/clojure/browse_thread/thread/...
ryanmarsh 15y ago
I fucking love D3.
deleted 15y ago
[deleted]
jrmoran 15y ago
I might be missing something, since I just started learning it. But instead of drawing a circle like this sampleSVG.append("svg:circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .attr("width", 100) .attr("height", 100); I'd prefer to express it like this sampleSVG.append("svg:circle") .style({ "stroke": "gray", "fill": "white"}) .attr({ "r": 40, "cx": 50, "cy": 50, "width": 100, "height": 100}); That way, I can just pass object literals as arguments to functions such as attr.
- oscilloscope 15y ago
  Checkout this branch of d3: https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/pull/179 https://github.com/mbostock/d3/pull/179 We're working on this syntax for: style, classed, property, on, attr, attrTween, style, styleTween. It's a more concise syntax, especially when the attrs are functions. An example from the tutorial: d3.select(this).selectAll("rect") .data(function(d){return d;}) .enter().append("svg:rect") .attr("fill", "aliceblue") .attr("stroke", "steelblue") .attr("stroke-width", "1px") .attr("width", function(d, i){return (histoW/dataset[0].length)+"px"}) .attr("height", function(d, i){return (d/dataMax[rectIdx]*histoH)+"px"}) .attr("x", function(d, i){return i*(histoW/dataset[0].length)+"px"}) Becomes: d3.select(this).selectAll("rect") .data(function(d){return d;}) .enter().append("svg:rect") .attr(function(d,i ) { return { "fill": "aliceblue", "stroke": "steelblue", "stroke-width": "1px", "width": (histoW/dataset[0].length)+"px", "height": (d/dataMax[rectIdx]*histoH)+"px", "x": i*(histoW/dataset[0].length)+"px" }; }); Three anonymous functions become a single function which returns an object.
rorrr 15y ago
So it's like an incredibly verbose Raphaël? http://raphaeljs.com http://raphaeljs.com
- swah 15y ago
  For making a circle, I thought the same thing.
- 100k 15y ago
  Unlike Raphaël or its predecessor library Protovis (http://mbostock.github.com/protovis/ http://mbostock.github.com/protovis/), D3 uses SVG as the graphical representation. This is more verbose, but is actually really powerful, because there's no translation between what your code is doing and what the browser is using to display your graphics. You can do anything SVG can do in your visualizations, and it is much easier to debug.
  - rorrr 15y ago
    Raphaël uses SVG (and VML for IE browsers). Says so on the main page.
    - 100k 15y ago
      Yes, and so does Protovis. But you don't interface with SVG directly. To draw a circle in Raphaël, you use Raphaël.circle. In Protovis, you use pv.Dot. To draw a circle in D3? svg:circle.
      - rorrr 15y ago
        So both use SVG, you just use the SVG syntax. How is that an advantage? The whole point of libraries like that is not to abstract the presentation layer. Raphaël can be switched to WebGL, for instance, and you won't even need to rewrite any code using that library, while you're stuck with the verbose low level calls to a particular implementation of SVG.
        15y ago

137 points by LiveTheDream 15y ago

swah 15y ago

The website's examples are much more eye catching: http://mbostock.github.com/d3/ex/voronoi.html http://mbostock.github.com/d3/ex/voronoi.html

polymath21 15y ago

We use d3 extensively here at TwoSides and love it. Here's some examples: http://www.twosides.co/issues/185-should-euthanasia-or-physician-assisted-suicide-be-legal/ http://www.twosides.co/issues/185-should-euthanasia-or-physi... http://www.twosides.co/jono http://www.twosides.co/jono (the venn diagram/bar graph wouldn't be transparent if you had an account)

icandoitbetter 15y ago
This is the best web UI I've seen in a long time, both in terms of functionality and beauty. Good luck.
- polymath21 15y ago
  Thank you!
jabr 15y ago
Just curious, but do you support IE below 9? If so, how? svgweb?

Vadoff 15y ago

Aww, thought this was for Diablo 3...

d0m 15y ago
Don't be sad for the downvotes; they just don't get it.
eulo 15y ago
Same here bro, same here :(

yesbabyyes 15y ago

I have eyed d3 eagerly for a while and now we enjoy using it for our node knockout entry (http://rapminder.com/ http://rapminder.com/). This tutorial comes in handy - thanks!

asanwal 15y ago
This is great and quite amusing. I just wish I could compare the # of references to Cristal vs. Dom P over time :)
- yesbabyyes 15y ago
  Thanks asanwal - you will! We have quite a few things we want to finish today before the competition ends, and even more afterwards.
- yesbabyyes 15y ago
  Check it out: http://rapminder.com/words/cristal,perignon http://rapminder.com/words/cristal,perignon

100k 15y ago

D3 is getting a lot of love lately! I like this tutorial as it nicely explains how to use events and animation. If you missed it, I wrote a D3 tutorial two weeks ago that shows how to do basic charting: http://www.recursion.org/d3-for-mere-mortals/ http://www.recursion.org/d3-for-mere-mortals/

jrmoran 15y ago
Thanks for writing it. I decided to start learning D3 last night and your tutorial was really helpful.
altrego99 15y ago
Very nicely written and had the right level of details to get me started. Awesome, thanks!

itcmcgrath 15y ago

My first thought upon seeing this was "Why is the D3 database on the top of hacker news???" http://en.wikipedia.org/wiki/Pick_database http://en.wikipedia.org/wiki/Pick_database

Caged 15y ago

I released a visualization I completed yesterday which is written in D3 (source on Github) - http://dealloc.me/demos/crime/2011.html http://dealloc.me/demos/crime/2011.html. Also, I've written an introduction to D3, focusing on what makes it different than your average charting library - http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.html http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.ht....

jmatt 15y ago

D3 and ClojureScript: http://keminglabs.com/cljs-d3/ http://keminglabs.com/cljs-d3/ http://groups.google.com/group/clojure/browse_thread/thread/0ec135ec63457e79 http://groups.google.com/group/clojure/browse_thread/thread/...

ryanmarsh 15y ago

I fucking love D3.

deleted 15y ago

[deleted]

jrmoran 15y ago

I might be missing something, since I just started learning it. But instead of drawing a circle like this sampleSVG.append("svg:circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .attr("width", 100) .attr("height", 100); I'd prefer to express it like this sampleSVG.append("svg:circle") .style({ "stroke": "gray", "fill": "white"}) .attr({ "r": 40, "cx": 50, "cy": 50, "width": 100, "height": 100}); That way, I can just pass object literals as arguments to functions such as attr.

oscilloscope 15y ago
Checkout this branch of d3: https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/pull/179 https://github.com/mbostock/d3/pull/179 We're working on this syntax for: style, classed, property, on, attr, attrTween, style, styleTween. It's a more concise syntax, especially when the attrs are functions. An example from the tutorial: d3.select(this).selectAll("rect") .data(function(d){return d;}) .enter().append("svg:rect") .attr("fill", "aliceblue") .attr("stroke", "steelblue") .attr("stroke-width", "1px") .attr("width", function(d, i){return (histoW/dataset[0].length)+"px"}) .attr("height", function(d, i){return (d/dataMax[rectIdx]*histoH)+"px"}) .attr("x", function(d, i){return i*(histoW/dataset[0].length)+"px"}) Becomes: d3.select(this).selectAll("rect") .data(function(d){return d;}) .enter().append("svg:rect") .attr(function(d,i ) { return { "fill": "aliceblue", "stroke": "steelblue", "stroke-width": "1px", "width": (histoW/dataset[0].length)+"px", "height": (d/dataMax[rectIdx]*histoH)+"px", "x": i*(histoW/dataset[0].length)+"px" }; }); Three anonymous functions become a single function which returns an object.

rorrr 15y ago

So it's like an incredibly verbose Raphaël? http://raphaeljs.com http://raphaeljs.com

swah 15y ago
For making a circle, I thought the same thing.
100k 15y ago
Unlike Raphaël or its predecessor library Protovis (http://mbostock.github.com/protovis/ http://mbostock.github.com/protovis/), D3 uses SVG as the graphical representation. This is more verbose, but is actually really powerful, because there's no translation between what your code is doing and what the browser is using to display your graphics. You can do anything SVG can do in your visualizations, and it is much easier to debug.
- rorrr 15y ago
  Raphaël uses SVG (and VML for IE browsers). Says so on the main page.
  - 100k 15y ago
    Yes, and so does Protovis. But you don't interface with SVG directly. To draw a circle in Raphaël, you use Raphaël.circle. In Protovis, you use pv.Dot. To draw a circle in D3? svg:circle.
    - rorrr 15y ago
      So both use SVG, you just use the SVG syntax. How is that an advantage? The whole point of libraries like that is not to abstract the presentation layer. Raphaël can be switched to WebGL, for instance, and you won't even need to rewrite any code using that library, while you're stuck with the verbose low level calls to a particular implementation of SVG.
      - 15y ago