D3 Examples - Jamey McCabe - Udacity Nanodegree Data Visualization Problem Set 2

Jamey McCabe - Udacity Nanodegree Data Visualization Problem Set 2 - Improve a Data Visualization

The website at http://www.santafedatahub.org is a community service for Santa Fe NM and takes data about the youth of Santa Fe and turns them in trending and information for the betterment of society. An example of such a graph is Disconnected Youth 16-24 in Santa Fe.

Suggested Improvements to this graph are laid out in this dimple chart who's code can be found below. The suggested improvements include:

Use of colors of different hues (light green and dark red) to assist audience with color blindness.

Use of an area chart instead of multiple pie charts.

The population being examined is all the same and the area chart can show the relative size of the entire population by age and allow comparison of relative size of each age group.

area chart provides a sense of the boundaries of the population via the white space around the colored part. Shows that analysis is not depicting ages less than 16 or over 24.

Elimination of a separate legend puting the labels for the Diconnected versus connected popluations right on the material. Avoids eye travelling back and forth to the legend and possible confusion by the reader.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    
    <style>
      #Connected {
        fill: #99FF99;
      }
      #Disconnected {
        fill: #CC3300;
      }
      .dimple-legend-text {
        font-size:15px!important;
      }
      .dimple-legend-key {
        fill:none!important;
        stroke-opacity:0.0
      }
​
      h3 {
        font-size:25px;
      }
    </style>
​
    <script type="text/javascript">
      function draw(data) {
      
      /*
        D3.js setup code
      */
​
          "use strict";
          var margin = 75,
              width = 600 - margin,
              height = 400 - margin;
​
          d3.select("body")
            .append("h3")
            .text("Santa Fe, NM - Disconnected Youth")
​
          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');
          d3.select("body")
            .append("h4")
            .text("Approximately 2,600 youth in ages 16-24 in Santa Fe are estimated to be disconnected from school and work.") 
          d3.select("body")
            .append("h5")
            .text("Estimate Using Census Microdata from ACS (2009-2013)")
      /*
        Dimple.js Chart construction code
      */
​
          var myChart = new dimple.chart(svg, data);
          myChart.setBounds(60, 30, 505, 305);
          var plotSize = {x:60, y:30, width:445, height:275};
          var x = myChart.addCategoryAxis("x", "Age"); 
          x.addOrderRule("Age");
          var y = myChart.addMeasureAxis("y", "Count");
​
          var s = myChart.addSeries("Type", dimple.plot.area);
​
          var myLegend = myChart.addLegend(400, 110, 60, 300, "Right");
          // first, store a copy of the original _getEntries method.
          myLegend._getEntries_old = myLegend._getEntries;
​
          // now override the method
          myLegend._getEntries = function()
            {
            // but call the original version,
            // then sort the returned array before returning it.
            return myLegend._getEntries_old.apply(this, arguments).reverse();
            }
          myChart.draw();
​
​
​
​
        };
​
    </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("youth.tsv", draw);
  </script>
</body>
</html>
    