Description
In programming assignment 2, you work with an existing visualization created with D3. The main task in the assignment is to modify the D3 library to make the visualization look different.
The goal of the assignment is to open the “black box” that is D3 and to learn that peeking into the library itself
might be beneficial to understand how it works, to be able to better use D3, potentially modify it, and to think
critically about what belongs in a library more broadly.
MODIFYING D3
D3 has a wealth of functionality, but how is this provided? Typically, we just use D3 without thinking about how it
works internally. In this assignment, you are asked to work with D3’s scale and axis functions. D3-scale offers a
convenient abstraction for a fundamental task in visualization: mapping a dimension of abstract data to a visual
representation. D3-axis renders human-readable reference marks for scales.
Your task is to modify how D3 creates axes to produce a visually distinct axis compared to D3’s implementation.
Run-time performance is not important for this assignment. The task consists of the following steps.
1 Take the provided code and make sure that it works. Easiest thing (which also helps in the next steps) is to
create a new WebStorm project and add all three files to the project root. This should produce the following result in your browser:
2 Using WebStorm, explore the code in index.html. Do not change anything in this file!
3 Using WebStorm, control-click for example on the scaleLinear call on line 73. This should take you to the
scaleLinear function in D3.
4 Looking at the D3 code for a linear scale and the corresponding axis call (d3.axisBottom() and d3.axisLeft()),
try and make sense of what is going on. Making sure that you can easily revert to the original version, try to alter
the behavior and observe the effects on the produced visualization when doing a browser refresh.
5 Consider which meaningful visually distinct change you would like to see happen in the produced output.
Decide on one thing and write it down (you will put this in your hand-in).
6 Now, attempt to create the meaningful visually distinct change that you decided on by only changing code in
the D3 library. If you do not succeed in creating the planned change but did something else that created a visually distinct change, that is ok.
NOW IT IS TIME FOR REFLECTION
The next steps are reflective and should be included in your hand-in.
7 Did you produce what you aimed for? Did you get something else that worked? Are you happy with the produced output? Write down your thoughts.
8 You were asked to do your changes in the D3 library. Could you have done it without changing the library?
Would that have been better and why? Since you changed the behavior of the scale and/or axis functions, the
original behavior is removed. Could the library offer both, and if so, then how? Write down your thoughts.
SUBMISSION
You submit two files:
• A report hand-in as a pdf file. This should be at most two pages of content. The resulting visualization
should be included as a figure1
. You are welcome to add an appendix, but we might not read this.
• Your modified D3 library file. Use the filename “d3.js”.
DEADLINE
Sunday March 14, 11:59pm Calgary time.
NEXT STEPS
You will receive marking on your assignment in D2L from Zahra or Emma.
1 SVG Crowbar (https://nytimes.github.io/svg-crowbar/) is a nice browser tool for saving svg files rendered in the
browser. Even Word can use these natively!
