Try D3 Now - D3 Visualization Tutorial(christopheviau.com)
christopheviau.com
Try D3 Now - D3 Visualization Tutorial
http://christopheviau.com/d3_tutorial/
12 comments
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/
I released a visualization I completed yesterday which is written in D3 (source on Github) - 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.ht....
We use d3 extensively here at TwoSides and love it.
Here's some examples: http://www.twosides.co/issues/185-should-euthanasia-or-physi... http://www.twosides.co/jono (the venn diagram/bar graph wouldn't be transparent if you had an account)
Here's some examples: http://www.twosides.co/issues/185-should-euthanasia-or-physi... http://www.twosides.co/jono (the venn diagram/bar graph wouldn't be transparent if you had an account)
This is the best web UI I've seen in a long time, both in terms of functionality and beauty. Good luck.
Thank you!
Just curious, but do you support IE below 9? If so, how? svgweb?
The website's examples are much more eye catching: http://mbostock.github.com/d3/ex/voronoi.html
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);
sampleSVG.append("svg:circle")
.style({
"stroke": "gray",
"fill": "white"})
.attr({
"r": 40,
"cx": 50,
"cy": 50,
"width": 100,
"height": 100});
Checkout this branch of d3:
https://github.com/mbostock/d3/commits/map 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:
https://github.com/mbostock/d3/commits/map 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"})
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"
};
});
I have eyed d3 eagerly for a while and now we enjoy using it for our node knockout entry (http://rapminder.com/).
This tutorial comes in handy - thanks!
This tutorial comes in handy - thanks!
This is great and quite amusing. I just wish I could compare the # of references to Cristal vs. Dom P over time :)
Thanks asanwal - you will! We have quite a few things we want to finish today before the competition ends, and even more afterwards.
Check it out: http://rapminder.com/words/cristal,perignon
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
[deleted]
So it's like an incredibly verbose Raphaël?
http://raphaeljs.com
http://raphaeljs.com
Unlike Raphaël or its predecessor library 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.
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.
Raphaël uses SVG (and VML for IE browsers). Says so on the main page.
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.
To draw a circle in D3? svg:circle.
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.
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.
You're missing the point.
Raphaël is a simple, unified interface to SVG and VML. You ask for a circle, and it will make one, whether in SVG or VML.
But if you have an array of data and want to visualize it, you have to write the code that creates the circle (and its position, size, color, etc) for each point. And if that data changes, you have to write the code which adds circles, removes circles, or animates the update of existing circles with the new corresponding data.
D3 is a general library to help you write that code, but it assumes you are working with DOM objects. It will create/remove/update HTML, SVG, or VML elements -- whatever you want. D3 is not a renderer abstraction library like Raphaël; it is a data to DOM mapper.
You could make something like D3 for Raphaël, but it makes sense to just assume you have SVG support now. You get to use its groups, CSS, and standard DOM events, without reinventing those wheels.
Raphaël is a simple, unified interface to SVG and VML. You ask for a circle, and it will make one, whether in SVG or VML.
But if you have an array of data and want to visualize it, you have to write the code that creates the circle (and its position, size, color, etc) for each point. And if that data changes, you have to write the code which adds circles, removes circles, or animates the update of existing circles with the new corresponding data.
D3 is a general library to help you write that code, but it assumes you are working with DOM objects. It will create/remove/update HTML, SVG, or VML elements -- whatever you want. D3 is not a renderer abstraction library like Raphaël; it is a data to DOM mapper.
You could make something like D3 for Raphaël, but it makes sense to just assume you have SVG support now. You get to use its groups, CSS, and standard DOM events, without reinventing those wheels.
For making a circle, I thought the same thing.
I fucking love D3.