Data Journalism Lab 2

Lab 2 instructions

Lab 2 (due March 2, 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 your first interactive visualization, a simple map.

You will follow the following steps:

  1. Identify your data (at least 99 records; includes lat/lon, state, county or zipcode)

  2. Fix your headers to be web-friendly

  3. Use a node script (on your PC) to read in the data and run a summary

  4. Clone this copdepen.io pen

  5. Upload your data to Github as a gist (described in class). Does not work with extremely large files.

    If your file is more than 1MB see Professor Lathrop. If you’re using counties, ZIP codes, etc., you’re going to geocode them to get the centroids before you do this.

  6. 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'),
        lat: unpack(rows, 'lat'),
        // locations: unpack(rows, 'state'),
        // hoverinfo:  unpack(rows, 'airport'),
        // hoverlabel: {}, // hover config object
        text:  unpack(rows, 'airport'), // try 'iata'
        // textfont: {}, // configures label formatting
        mode: 'markers', // try 'text' or 'markers+text'
        marker: {
            size: 8,
            // try this
            // size: unpack(rows, 'cnt'),
            // sizemode: 'area',
            // sizemin: 1,
            // sizeref: 30, // scaling variable
            showscale: true, // color scale
            opacity: 0.8,
            reversescale: false,
            // try autocolorscale: true,
            colorscale: [[0,'#cccccc'],[1,'#0c0caf']],
            symbol: 'dot',
            line: {
                width: 1,
                color: 'rgb(102,102,102)'
            },
            cmin: 0,
            color: unpack(rows, 'cnt'),
            colorbar: {
                title: 'Incoming Flights February 2011'
            }
        }
    }];


    var layout = {
        title: 'Most Trafficked US airports',
        geo: {
            scope: 'usa',
            projection: {
                type: 'albers usa'
            },
            
            showland: true,
            showlakes: false,
            showrivers: false,
            landcolor: '#fafafa',
            // border attributes
            subunitcolor: '#d9d9d9',
            countrycolor: '#d9d9d9',
            countrywidth: 0.5,
            subunitwidth: 0.5
        }
    };
  
    var config = {
      editable: false,
      scrollZoom: false,
      
      // display as a non-interactive image
      staticPlot: false,
      
      // configure the tool bar
      displayModeBar: true,
      displaylogo: false,
      modeBarButtonsToRemove: [], 
      
      // these only matters on the Plot.ly service
      showLink: false,
      linkText: "Edit chart", 
      
      "":""
      
    }
    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',
          locations: unpack(rows, 'code'),
          z: unpack(rows, 'total exports'),
          text: unpack(rows, 'state'),
          zmin: 0,
          zmax: 17000,
          colorscale: [
              [0, 'rgb(242,240,247)'], 
              [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',
              thickness: 20
          },
          marker: {
              line:{
                  color: 'rgb(255,255,255)',
                  width: 2
              }
          }
      }];


      var layout = {
          title: '2011 US Agriculture Exports by State',
          geo:{
              scope: 'usa',
              showlakes: true,
              lakecolor: 'rgb(255,255,255)'
          }
      };
    var config = {
      editable: false,
      scrollZoom: false,
      
      // display as a non-interactive image
      staticPlot: false,
      
      // configure the tool bar
      displayModeBar: true,
      displaylogo: false,
      modeBarButtonsToRemove: [], 
      
      // these only matters on the Plot.ly service
      showLink: false,
      linkText: "Edit chart", 
      
      "":""
      
    }
    
    var targetDiv = document.getElementById("map")
    Plotly.plot(targetDiv, data, layout, config);
});
  1. Customize them to fit your personality. Remember to disable the mode bar and choose appropriate sizes and colors.

  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: 3 points
  • Code is correct: 3 points
  • Good variable names: 1 point
  • At least 10 meaningful comments: 1 point
  • Good color choice: 1 point
  • Appropriate hed, subhed, caption, etc.: 2 points