Case study 3: data visualization
Tasks
Download the data vis project template from the link below of this page and
look over the code, starting with [Link] to get an overview of how the
program works. Try running the code.
All visualizations are stored in the gallery global variable. This variable can
be used for debugging in the console to access properties and methods
defined within each visualization.
Are the lines you need to complete in this case study marked?
Tech diversity: gender
Complete the visualization defined in [Link] to create a
stacked bar chart by adding the proportion of men employed at each
company.
1. Look up the documentation for Table.
2. Look at the raw data: ./data/tech-diversity/[Link]. Use a
spreadsheet program or text editor, and make sure you understand the
data format (this first line is special). This data will be automatically
loaded and stored in the data property (see the preload() method).
3. In the for loop in the draw() method extract the relevant data from
each table row and store it in the company object. Hint: Look up the
getString() and getNum() table methods, and use the appropriate
method to ensure the data is parsed correctly.
4. Check that the bars representing the proportion of female employees is
correctly drawn on the plot.
5. Look at how the rectangle representing the proportion of female
employees is defined. Draw a rectangle representing the male
proportion using the parameters and methods defined in this object.
The ratio of female: male staff at Indiegogo is 50:50. Make sure that
this is correctly visualized on the plot.
Complete the visualisation defined in [Link] to create a line
graph representing the pay gap between female and male employees over
time.
1. Look at the raw data: ./data/pay-gap/all-employees-hourly-pay-by-
[Link].
2. In the for loop in the draw() method, extract the relevant data from
each table row and store it in the current object.
3. Complete the mapPayGapToHeight() method. Look at how
mapYearToWidth() works. Check that the y-axis tick labels are drawn
correctly.
4. Complete the line() function in the draw() method to plot the pay gap
over time. You will need to use both mapYearToWidth() and
mapPayGapToHeight() methods.
Climate change
Complete the visualization defined in [Link] to create a line graph
with gradient fill background representing the change in the Earth’s surface
temperature.
1. Using the mapTemperatureToColour() method, set the fill() in
the draw() method. You need to pass the current temperature to this
method to get the correct color.
2. Complete the rect() function below the fill() to create a gradient effect
background (rectangles spaced evenly across the x-axis – one
rectangle per year). All of the values you need are already accessible
within this visualization object – you need to find them! Hint: Look at
the mapYearToWidth() method, the layout object, and the
segmentWidth variable.
3. Tech diversity: Race
Complete the visualization defined in [Link] to create a pie
chart to represent the racial diversity of prominent tech companies.
1. Look at the raw data: ./data/tech-diversity/[Link].
2. Create a select DOM element using [Link] (see createSelect) and
populate the options programmatically using the company names
obtained from the columns of [Link]. Hint: you need to write a for
loop.
3. Change the hard-coded company name to instead get the value from
the select.
4. Test that when selecting a company name from the list the correct data
is visualized on the canvas and the correct title is generated.
Pay gap by job 2017
Complete the visualization defined in [Link] to create a
scatter plot representing the difference in pay for men and women across
different jobs. In the draw() method complete the for loop that draws all of
the data points on the canvas as ellipses with the following properties.
Hint: You will need to use map().
