limmlingg / data Goto Github PK

Data visualisation with D3.js

Done for CS3240 Interaction Design

i. This was done with a multiline chart to show the trends for all age groups over the years 2007 to 2014. The age groups are colour-coded with colours from blue to purple to grays.

The y-axis goes from 0 to 100 to give the most accurate representation of trends. The legend was put in the empty space between 80 to 100.

ii. This was done with a heatmap. The columns represent the day of the week (the data was ambiguous about which day was which), and the rows represent the weeks. A darker colour meant a high number of commits. The number of commits that day has also been recorded in the corresponding cell.

This layout was chosen to give the user a quick idea of the commit pattern in any given day of the week or given week. The colour scheme is monochromatic to help distinguish the differences in colour more easily. In order to not mislead the user, the days with 0 commits are in white instead of a light shade of red.