Activity 6: Winning Streaks in Illini Football
Due: On git by Tuesday, Feb. 14, 2017 at 9:30am
Team: This is a solo assignment.
Grading: This assignment is worth 30 points.

Overview

In lecture, you saw many examples of using d3.js to create simple visualizations. Using these techniques, you will create your own visualization using the Illini Football games since 1890!

Initial Files

A new directory has been created on the release git repository, which you should complete this assignment in. To merge this into your repository, navigate to your workbook directory using a command line and run the following commands:

git fetch release
git merge release/exp_activity6 master -m "merge"

Assignment

You have been provided a dataset containing data about Illini football gaves from over 120 years. You will create a simple visualization of this dataset.

Inside of exp_activity6/res/, you will find illiniFootballScores_streak.csv. This CSV file has already been formatted for you to use. The first row in your CSV file will be loaded into d3.js as an object of dictionaries in the same way as you worked with data in lecture. Specficially, here's an example showing some of the first row:

[
  {
    "Season": "2015",
    "Date": "5-Sept",
    "Location": "vs.",
    "Opponent": "2015",
    "Result", "W",
    /* ... */
    "WinStreak": 0
  },
  /* ... */
]

Visualization Overview

The goal for this visualization is to create a visualization showing our win-streaks aganist our opponents. My final visualization is below, yours will almost certainly look slightly differently as there are a lot of open/creative decisions you will make in this activity:

Youngstown StateWestern KentuckyWashingtonTexas StateNebraskaPurdueWisconsinMinnesotaOhio StateIowaPenn StateNorthwesternLouisiana TechSouthern IllinoisCincinnatiMiamiMichigan StateIndianaWestern MichiganArizona StateCharleston SouthernMichiganArkansas StateSouth Dakota StateUCLAMissouriNorthern IllinoisFresno StateBaylorIllinois StateEastern IllinoisLouisiana-LafayetteWestern IllinoisSyracuseBall StateSouthern CaliforniaRutgersOhioSan Jose StateCaliforniaFlorida A&MSouthern MississippiLouisvilleLouisiana StateMiddle Tennessee StateSan Diego StateVirginiaWashington StateArizonaAkronOregonEast CarolinaHoustonHawaiiColoradoClemsonUtah StateUtahFloridaNorth CarolinaArmyStanfordPittsburghAlabamaAir ForceMississippi StateNavyTexas A&MWest VirginiaTulaneIowa StateKansasNotre DameSouthern MethodistOregon StateDukeColgateKansas StateGreat Lakes NavyCamp GrantIowa Pre-FlightSouth DakotaButlerDrakeBradleyChicagoDePaulCoeSt. LouisPennsylvaniaWabashDePauwChanute FieldChicago Naval ReserveOklahomaCamp FunstonHaskellMissouri-RollaChristian BrothersKentuckyIllinois WesleyanJames MillikinMonmouthMarquetteKnoxNorth CentralPhysicians & SurgeonsEnglewood HighLombardAmerican OsteopathRush MedicalChicago DentalNorth Division HighMarion SimsRose-HulmanIllinois AlumniCarlisleEurekaLake ForestOberlinChicago A.C.Illinois CollegeIndianapolis ArtilleryPastime A.C.DoaneBakerKansas City A.C.20142000198019601940192019001892

Step 1: Scales

To create your visualization that will be similar to above, you will need to define two scales: one scale for the year (x-axis) and one scale for the opponent (y-axis).

In creating the scales, you may need a list of every year and a list of every opponent. Looking back to Tuesday's lecture handout, you can find you can get the list of every year and every opponent with the following code:

var opponents = _.map(data, "Opponent");
opponents = _.uniq(opponents);
// opponents can now be used as the domain in your scale

var years = _.map(data, "Season");
years = _.uniq(years);
// years can now be used as the domain in your scale

Step 2: Axis

Create an axis for each scale.

At this point, you should start testing your visualization. After adding the code to show the axes, loading your visualization should show two axes and no data points.

Step 3: Visual Encodings

Create a circle for each data point. The position of the circle (cx, cy) will require the use of the scales you created. Use a different fill color for a win vs. a loss, and increase the size of the circle (r) as the win streak gets bigger.

Step 4: Add to it!

Feel free to add more, make it awesome. We'll show some of them off in lecture!

Submission

This activity is submitted digitally via git. View detailed submission instructions here.