Skip to content

Experiences using d3 to create a visualization – Geert

by on October 21, 2012


I never worked with JavaScript before, but doing the d3 tutorials helped to start writing it easily. Some of my experiences and thoughts while writing using d3 are listed below.

  • The chaining of methods is very useful to write a lot of functionality by only writing some lines of code.
  • It is strange to dedicate a function as a “var”, this is something I have not encountered before. For example:
    var heightScale = d3.scale.linear()
    .domain([220, 150])
    .range([0, h-padding]);
    is a function that can be used by calling
    heightScale(d.height) in a function.
    This is just another syntax for defining functions, but it feels strange to define functions in the same way as defining constant variables. Although this makes it easier for the programmer because he does not have to think about the type of the var he is writing, but it can lead to type errors if the programmer does not know what he is doing.
  • Transitions can be added very easily by just defining a transition on a dataset and setting the duration and the delay which is even optional.


My visualization is a scatter plot with axes to show the ranges. I tried to add as much data to it as I could to test the possibilities of d3.

  • The x-axis contains the weight of the person. A scale is used to plot them in the correct range.
  • The y-axis contains the height of the person. A scale is used to plot them in the correct range.
  • The size of the circle depends on the shoe size of the person. A scale is used to make the difference more clear.
  • The color of the circle depends on the BMI of the person (bmi = weight/(height*height). Blue means the person is underweight, green means that the person has a “good” weight, orange means overweight and red means obese.
  • The text contains the name of the person and his/hers shoesize between brackets.
  • An animation is also added at the start of the visualization. The text and circles move towards their positions.


From → Uncategorized

  1. erikduval permalink

    Might be useful to also work on an interactive version of the visualisation, so that you are well prepared for the marathon this weekend?

  2. vancampenhoutg permalink

    I have added a simple interaction to the visualization. A button is added which allows the user to reset the data to the origin and then activate the transition again. This is a very basic interaction but I assume programming this allows me to learn how to write more complex interactive visualizations very easily. The improved visualization can be found here:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: