A stacked bar chart

Introduction

Hello again!! In today's session, we will finish last session's project of building a bar chart. Then, we'll manipulate our data another way to create a stacked bar chart of all grad rates.

Here are some great resources that are related to what we're going to cover:
1. Phoebe Bright's d3.nest() examples
2. Shan Carter's Mister Nester
3. d3.layout.stack() in the d3 API documentation
4. Justin Palmer's d3.tip()
5. Scott Murray's book Interactive Data Visualization for the Web, particularly chapters 10 and 11: Interactivity and d3.stack.layout()

Before we begin...

Does anyone have any questions?

… Continuing from last session

Let's walk through the code for a simple bar chart.

1. array.filter()

2. setting up the x scale

3. labels

Stacked Bar Chart

Let's talk about a few more key concepts that we will then apply to our bar chart.

1. d3.nest() first with some nest examples and then with Mister Nester

   "Nesting allows elements in an array to be grouped into a hierarchical tree structure; think of it like the GROUP BY operator in SQL, except you can have multiple levels of grouping, and the resulting output is a tree rather than a flat table. The levels in the tree are specified by key functions. The leaf nodes of the tree can be sorted by value, while the internal nodes can be sorted by key. An optional rollup function will collapse the elements in each leaf node using a summary function." - d3.nest() as introduced in the d3 API documentation

2. d3.layout.stack()

   "Contrary to what the name implies, D3 layouts do not, in fact, lay anything out for you on the screen. The layout methods have no direct visual output. Rather, D3 layouts take data that you provide and remap or otherwise transform it, thereby generating new data that is more convenient for a specific visual task. It’s still up to you to take that new data and generate visuals from it." - Scott Murray in Chapter 11 of Interactive Data Visualization for the Web

   The stack layout takes an array of layer objects with x and y coordinates and outputs the same layers but adds a baseline y0 so that the layers can easily be stacked. Let's play around with this lil data set to see what the stack layout really does.

3. d3.tip()

   The sky's the limit for how you can incorporate tooltips into a d3 visualization. Scott Murray covers svg and html tooltips in Chapter 10 of his book; today we are going to incorporate Justin Palmer's d3.tip() into our mix: D3.tip download page and a d3.tip() example.

Now let’s do this ...

1. Again, go to Cal Answers and copy the query behind the dashboard and save it locally in your own folder in CalAnswers. (Catalog... Shared Folders ... Student Demographics & Outcomes" ... Graduation & Retention and edit the query called UGCohort Grad Data.)

2. We are going to work with a subset of the results, so modify this query as follows: restrict the applicant type to Freshmen and the term to Fall and only retrieve data for 2003 or later.

3. Modify the query to allow for null values: On the results tab, click on the Edit Analysis Properties button and choose the Data tab in the dialog. Check the box that says Include Null Values.

4. Now download the data from the query to your machine as a csv and save it under d3-training in a new folder called something like "stacked-bar"

5. Inspect the data file on your machine and change the column headers so that they do not contain spaces, for example change Semester Year Letter Cd Concat to semesterYearLetter.

6. Next you can either copy the contents of the HTML file called index.html that we created under d3-training a few sessions ago, or you can create a new one called index.html and save it in a new folder under our project folder.

7. Now let's add some javascript to our HTML file that will build our chart. If you want to just follow along, you can see what our final chart will end up looking like here.