Data Journalism Lab 3

Lab 3 instructions

Lab 3 (due March 23, 2018 at 11:59 p.m.)

In this lab you will use plotly.js, a set of geographic data of your own devising and CodePen to assemble a set of related visualizations. You can base it directly on Lab #2 or start fresh.

You will follow the following steps:

  1. Identify your data (at least 99 records; includes lat/lon, state, county or zipcode). It must have a numeric as well as a geographic field for analysis.

  2. Fix your headers to be web-friendly

  3. Start a fresh codepen to get started this copdepen.io pen. If you’re continuing from your last map, copy and paste your JavaScript over.

For fresh visualizations

  1. Upload your data to Github as a gist if needed (described in class).

  2. Create the boilerplate Plotly configuration objects and maps

Point map


var dataUrl = 'https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv';

Plotly.d3.csv(dataUrl, function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key]; });
    }

    // scattergeo reference at https://plot.ly/javascript/reference/#scattergeo
    var data = [{
        type:'scattergeo',
        locationmode: 'USA-states',  // options: "ISO-3", "USA-states", "country names"
        lon: unpack(rows, 'long'),                                /* edit the field name (long) */
        lat: unpack(rows, 'lat'),                                  /* edit the field name (lat) */
        text:  unpack(rows, 'airport'),                        /* edit the field name (airport) */
        mode: 'markers', // try 'text' or 'markers+text'
        marker: {
            size: unpack(rows, 'cnt'),                             /* edit the field name (cnt) */
            sizemode: 'area',
            sizemin: 1,
            sizeref: 30, // scaling variable                      /* edit this to fit your data */
            showscale: true, // color scale
            opacity: 0.8,
            reversescale: false,
            // try autocolorscale: true,
            colorscale: [[0,'#cccccc'],[1,'#0c0caf']],            /* edit this to fit your data  */
            symbol: 'dot',
            line: {
                width: 1,
                color: 'rgb(102,102,102)'
            },
            color: unpack(rows, 'cnt'),                             /* edit the field name (cnt) */
            colorbar: {
                title: 'Incoming Flights February 2011'       /* edit the title of your color bar */
            }
        }
    }];


   var layout = {
      title: 'Most Trafficked US airports',
      geo: {
            scope: 'usa', // also can be world, asia, africa, europe, etc. 
            projection: {
                type: 'albers usa' // for non-U.S. use 'mercator', 
                                   // 'robinson', 'equirectangular' 
                                   // or 'natural earth'
            },
          showlakes: true,
          lakecolor: 'rgb(255,255,255)'
       }
    };


    var config = {}; // not used in lab #3 


    var targetDiv = document.getElementById("map")
    Plotly.plot(targetDiv, data, layout, config);

});

Choropleth map


var dataUrl = 'https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv';

Plotly.d3.csv(dataUrl, function(err, rows){
    function unpack(rows, key) {
      return rows.map(function(row) { return row[key]; });
    }

    var data = [{
      type: 'choropleth',
      locationmode: 'USA-states', // options: "ISO-3", "USA-states", "country names"
      locations: unpack(rows, 'code'),                             /* edit the field name (code) */
      z: unpack(rows, 'total exports'),                   /* edit the field name (total_exports) */
      text: unpack(rows, 'state'),                                /* edit the field name (state) */
      colorscale: [                                       /* edit the values of colorscale to    */
          [0, 'rgb(242,240,247)'],                        /* your colors and where they change.  */
          [0.2, 'rgb(218,218,235)'],                        
          [0.4, 'rgb(188,189,220)'], 
          [0.6, 'rgb(158,154,200)'],
          [0.8, 'rgb(117,107,177)'], 
          [1, 'rgb(84,39,143)']
      ],
      colorbar: {
          title: 'Millions USD',                             /* edit the title of the color bar  */
          thickness: 20
      },
      marker: {
          line:{
              color: 'rgb(255,255,255)',
              width: 2
          }
      }
    }];


    var layout = {
      title: '2011 US Agriculture Exports by State',     /* edit this to change the chart title  */
      geo: {
            scope: 'usa', // also can be world, asia, africa, europe, etc. 
            projection: {
                type: 'albers usa' // for non-U.S. use 'mercator', 
                                   // 'robinson', 'equirectangular' 
                                   // or 'natural earth'
            },
          showlakes: true,
          lakecolor: 'rgb(255,255,255)'
      }
    };
    
    var config = {}; /* not used in lab #3 */

    var targetDiv = document.getElementById("map")
    Plotly.plot(targetDiv, data, layout, config);
});

For all projects

  1. Configure your map center and zoom

a. add the following inside layout.geo with a lat/lon pair relevant to your data (this is for Iowa):

   center: {
      lat: 42.0,
       lon: -93.7
    },

b. add the following inside layout.geo.projection and experiment with the value (this is for Iowa):

   scale: 8,
  1. Set you colors by hand using HTML hex number codes

  2. If you want to use a categorical variable instead of a quantitative variable do this:

a. Create a categorical color scheme for your data near the top of your script e.g.:

                           
    colorScale = [['IA', '#ccaa00'],                        /* edit the values and color codes.  */
                  ['MA', '#00aacc'],                        /* add as rows as needed.            */
                  ['default', '#eeeeee']];

b. Remove colorscale, showscale, reversescale, autocolorscale and showscale from data[0].marker

  1. Set a size variable inside the data[0].marker if you haven’t already
   size: unpack(rows, 'cnt'),                                       /* edit the field name (cnt) */
   sizemode: 'area',
   sizemin: 1, // smallest in pixels
   sizeref: 10, // scaling variable                                                 /* customize */
  1. Take a deep breath.
  1. Configure your hover info to look nice using data[0].hoverinfo and data[0].hoverlabel

     hoverinfo: "text",
     hoverlabel: {
       bgcolor: "white",
       font: {color: "black"}
     },
  1. Begin working on a bar chart.

Bar chart

  1. Analyze your data by a field using datalib along the lines of the following example

  // make sure your numeric variables are numeric
  rows = rows.map(function (row) {
    row.cnt = +row.cnt;                                             /* edit the field name (cnt) */
    return row;
  });

  // run a summary with datalib
  var barRows = dl.groupby('state', )
   .summarize({"cnt": ["sum"], "iata": ["count"]})        /* edit the field names (sum and iata) */
   .execute(rows)
  .sort(dl.comparator("-sum_cnt"));                             /* edit the field name (sum_cnt) */
   
  1. Create a bar chart object
 // reusing the variable name "data"
  var data =[{
    x: unpack(barRows, "state"),                                  /* edit the field name (state) */
    y: unpack(barRows, "sum_cnt"),                              /* edit the field name (sum_cnt) */
    type: "bar"}];

   Plotly.newPlot("chart", data);   

  1. Try varying the values you use in creating barRows and in creating x and y

  2. Change the bar color to something harmonious to your map data.

  var data = [{
    x: unpack(barRows, "state"),                                  /* edit the field name (state) */
    y: unpack(barRows, "sum_cnt"),                              /* edit the field name (sum_cnt) */
    type: 'bar',
    marker: {
      color: 'lightsteelblue' /* edit this color */
    }
  }]
  1. Limit your bars to a useful number by setting barRows = barRows.slice(0,5) where 5 makes sense with your data.

  2. Configure your hover info to look nice using data[0].hoverinfo and data[0].hoverlabel


     hoverinfo: "x+y",
     hoverlabel: {
       bgcolor: "white",
       font: {color: "black"}
     },

  1. Add a title to your barchart with var layout = {title: 'Top states by flights'}; and Plotly.newPlot("chart", data, layout, config);.

  2. Write a hed, subhed (a.k.a. dek), caption, source line and byline

  3. Export your codepen as a ZIP and upload it to ICON

  4. Grading is as follows:

    • Runs and generates map + barchart: 3 points
    • Code is correct w/ good variable names: 3 points
    • Appropriate hed, subhed, caption, etc.: 2 points
    • At least 10 meaningful comments: 1 point
    • Good color choices: 1 point