d3 tutorial at visWeek 2012

Jeff Heer, Scott Murray and myself have done a d3 tutorial at visWeek 2012. You probably gathered that from the title of the post.

Here is a link to all the slides and code examples that we have presented:

d3 tutorial

For the purpose of the tutorial I have compiled a d3 cheat sheet, on 4 pages it groups some of the most common d3 functions. When I was learning d3 my number one problem was figuring out which property should be set using .attr, and which required .style. And also: which svg element support which property? All of this is addressed in the cheat sheet. It’s part of the link above, but if you want it directly without downloading a 13Mb file, here it is:

d3 cheat sheet




3 thoughts on “d3 tutorial at visWeek 2012

  1. Hi, J:
    Nice tutorial. I have a question about tutorial 8 transition_color in d3 tutorial at visWeek 2012.
    I wonder why all rects turn together into black or some other color rather into varied colors when I remove transition() and duration(500)? Why can not I just directly add attr(‘fill’ function(){……return random color value here…..}) after rect appending?


    1. Hi,
      i didn’t write this one and there are a few things I find odd about this code, for instance the fill which is an attribute and which takes an rgb string as an argument.
      if instead the fill is set as a style, and if the returned value is an RGB color object (ie d3.rgb(r,g,b)) this works just as expected with or without the transition.
      function recolor() {

      .style(“fill”, function(d) {
      var r = Math.random() * 255; //Choose random red, green, blue values
      var g = Math.random() * 255;
      var b = Math.random() * 255;
      return d3.rgb(r,g,b); //Set fill to rgb value

      this works

Leave a Reply

Your email address will not be published. Required fields are marked *