d3 tutorial at visWeek 2012

15 October, 2012 (21:11) | conferences, d3, data visualization, presentation, tips | By: jerome

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


Comment from Kuan
Time December 7, 2012 at 9:59 pm

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?


Comment from jerome
Time December 13, 2012 at 6:38 pm

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

Comment from Alexandre Rousseau
Time January 11, 2013 at 12:50 pm

Thanks a lot for your cheat sheet. Very useful.

Write a comment