Try D3 Now - D3 Visualization Tutorial

http://christopheviau.com/d3_tutorial/

by LiveTheDream • 15 years ago

137 28 15 years ago

christopheviau.com

swah2• 15 years ago

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

polymath212• 15 years ago

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)

icandoitbetter• 15 years ago

This is the best web UI I've seen in a long time, both in terms of functionality and beauty. Good luck.

polymath212• 15 years ago

Thank you!

jabr2• 15 years ago

Just curious, but do you support IE below 9? If so, how? svgweb?

whiskyant• 15 years ago

Aww, thought this was for Diablo 3...

d0m• 15 years ago

Don't be sad for the downvotes; they just don't get it.

eulo• 15 years ago

Same here bro, same here :(

yesbabyyes3• 15 years ago

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!

asanwal• 15 years ago

This is great and quite amusing. I just wish I could compare the # of references to Cristal vs. Dom P over time :)

yesbabyyes3• 15 years ago

Thanks asanwal - you will! We have quite a few things we want to finish today before the competition ends, and even more afterwards.

yesbabyyes3• 15 years ago

Check it out: http://rapminder.com/words/cristal,perignon

100k3• 15 years 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/

jrmoran2• 15 years ago

Thanks for writing it. I decided to start learning D3 last night and your tutorial was really helpful.

altrego99• 15 years ago

Very nicely written and had the right level of details to get me started. Awesome, thanks!

itcmcgrath• 15 years 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

Caged• 15 years ago

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

jmatt• 15 years ago

D3 and ClojureScript:

http://keminglabs.com/cljs-d3/

http://groups.google.com/group/clojure/browse_thread/thread/...

ryanmarsh• 15 years ago

I fucking love D3.

jrmoran2• 15 years 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• 15 years ago

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:

  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.

rorrr3• 15 years ago

So it's like an incredibly verbose Raphaël?

http://raphaeljs.com

swah2• 15 years ago

For making a circle, I thought the same thing.

100k3• 15 years ago

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.

rorrr3• 15 years ago

Raphaël uses SVG (and VML for IE browsers). Says so on the main page.

Try D3 Now - D3 Visualization Tutorial

Related Stories