Assigned: Wednesday, Feb 15, 2017
Due: Wednesday, Feb 22, 2017 at noon
Collaboration: You should work with your assigned partner for this lab.
We will complete this lab in two pieces. First, we will work as a class to build a basic, no-frills bar chart using D3 and the diamonds dataset from R’s ggplot package. On day two of the lab, you will pick up where we left off to add support for stacked bars, a legend, and value labels. We will prepare the starter code for this lab in class, so it won’t be available until the second day of the lab.
Starting with the diamonds dataset from ggplot2, we will build a simple bar to show how many diamonds we have at each carat weight. The carat weight value is a continuous quantity in this dataset, so we will discretize it into smaller intervals in preparation for plotting. This process of transforming our dataset to prepare for visualization is a common task, so we’ll use this as a chance to practice pre-processing data.
By the end of the day we should have a simple bar chart with some minimal labeling (at least on the x-axis).
The starter code from this lab is available on GitHub at grinnell-cs/datavis-bar-chart. Please add the following features to your bar chart.
We have a total count of diamonds in each weight category, but it would be interesting to see how many diamonds in each weight category belong to each of the cut quality ratings. A stacked bar chart is useful for showing this information. In each carat weight category we will have five colored bars stacked on top of each other. Each color of bar corresponds to a cut quality and should be sized to correspond to the number of diamonds of that cut quality in the given carat weight class. By stacking the bars within each weight category we can still show the total number in each category.
Along with your bar chart, you should append a legend to the page that shows which color corresponds to which cut quality. You do not have to worry about positioning the legend carefully, and you certainly do not need to draw the legend within your bar chart SVG.
We haven’t learned how to draw axes with D3 yet, so we’ll use a workaround and just add counts to each bar in the chart. Use the SVG text element to add a label that shows the total number of diamonds above each set of stacked bars. Then, within each stacked bar, add a count of the total number of diamonds with that cut quality.