Creating a bar chart

Introduction

Hello again!! In today's session, we will a) finish talking about a few things that we didn't get to last session, and b) create a simple bar chart for the 4.5 year grad rate using Cal Answers data.

Here are some resources that are related to what we're going to cover:
1. Mike Freeman's d3 intro lecture from his Summer 2015 web dev course at the University of Washington
2. Jerome Cukier's d3 cheat sheet
3. The d3 API Reference.
4. Zan Armstrong's formatting numbers examples.
5. How Selections Work by Mike Bostock.
6. SVG element reference as documented by the Mozilla Developer Network (MDN).
7. Every ColorBrewer Scale Mike Bostock's gist that is a quick visual reference to every ColorBrewer scale; colors by Cynthia Brewer.
8. Scott Murray's book Interactive Data Visualization for the Web, particularly chapters 6, 7 and 8: Data, Scales and Axes.

Before we begin...

Does anyone have any questions?

… Continuing from last session

Let's briefly return to Mike Freeman's d3 intro lecture from his Summer 2015 web dev course at the University of Washington to take a look at:

1. Binding Data : enter() and exit() selections

2. Binding Data : using .call()

3. Scales : brief scale intro

A few more key concepts

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

1. Again, "Scales are functions that map from an input domain to an output range.”
   - Mike Bostock

   Quantitative Scales - for continuous input domains, such as numbers.

   Ordinal Scales - for discrete input domains, such as names or categories.

   Time Scales - for time domains.

2. Axes

   D3 has an axis component, for which you define the parameters (orientation, tick values, tick format) and d3 takes care of the tedious task of drawing axes and labeled ticks. Then you can use CSS to clean up your scales.

3. Loading data

   D3 has convenience methods for loading data in the following formats: text, html, json, csv, tsv, xml (and others.) We are going to focus on loading csv data today.

   
           <script type="text/javascript">
   
               d3.csv("myData.csv", function(csv) { 
                   console.log(data);
               });
   
           </script>     
       

4. Manipulating data

   array.filter() - Create a new array with only the elements for which a predicate is true. (reference)

   array.map() - Create a new array with the result of calling a function on every element in the array. (reference)

5. Formatting data

   Numbers : d3.format(specifier)

   Time : d3.time.format(specifier)

6. Google Chrome developer tools : In Chrome 44, you can get there via View ... Developer ... Javascvript Console.

Now let’s do this ...

1. First go to the Cal Answers UG Grad Rate dashboard and have a look at what we are going to be working with.

2. Scroll to the bottom of the dashboard page and click the Export link. Choose Data ... CSV Format.

3. Inspect the data 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".

4. Next you can either use the HTML file called index.html that we created under d3-training last time, or you can create a new one called index.html and save it in a new folder under our project folder.

5. Okay, now let's open a modern browser and bring up localhost:8888/d3-training to see if we can see our HTML page

6. 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.