Skip to content

Instantly share code, notes, and snippets.

@jamemcc

jamemcc/index.html

Last active February 29, 2016 00:00
Show Gist options
  • Save jamemcc/43fd3548b1ee8e03b40c to your computer and use it in GitHub Desktop.
Save jamemcc/43fd3548b1ee8e03b40c to your computer and use it in GitHub Desktop.
Download ZIP
Jamey McCabe - Udacity Nanodegree Data Visualization Problem Set 2 - Improve a Data Visualization
Raw
readme.md

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:

  1. Use of colors of different hues (light green and dark red) to assist audience with color blindness.
  2. 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.
  1. 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.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
Raw
youth.tsv
Age Type Count
16-18 Disconnected 618
19-21 Disconnected 944
22-24 Disconnected 1049
16-18 Connected 5564
19-21 Connected 4022
22-24 Connected 3948
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment