Experiences using d3 to create a visualization – Geert
- 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()
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.