Skip to content

Instantly share code, notes, and snippets.

@JenHLab

JenHLab/cities_commuters.csv

Created March 28, 2016 18:51
Show Gist options
  • Save JenHLab/8e88328f71cbd5c3153e to your computer and use it in GitHub Desktop.
Save JenHLab/8e88328f71cbd5c3153e to your computer and use it in GitHub Desktop.
Download ZIP
Small Multiples
Raw
cities_commuters.csv
City Year Drove_Alone Carpooled Public_Transportation Walked Bicycle Taxi_Motorcycle Work_at_Home
Los Angeles Year 2014 1194792 173981 193510 63911 19528 28405 102193
Los Angeles Year 2013 1169968 176105 191798 64513 19179 26154 97642
Los Angeles Year 2012 1169698 179819 193785 64595 17458 24410 96019
Los Angeles Year 2011 1170628 182910 188130 64454 15678 24388 92326
Los Angeles Year 2010 1176375 188779 192275 61178 13983 24471 90893
San Francisco Year 2014 165314 34250 150244 47037 17353 10503 32423
San Francisco Year 2013 165479 33543 145801 44724 15653 9839 31307
San Francisco Year 2012 165776 35178 142471 43532 14950 9234 30780
San Francisco Year 2011 164460 34026 142649 42751 13523 9160 29664
San Francisco Year 2010 165229 34260 141377 42500 13010 8673 28622
New York City Year 2014 822821 177907 2113347 379800 37604 63926 150416
New York City Year 2013 828864 181314 2068460 377429 33302 62904 148011
New York City Year 2012 836673 184289 2049297 379635 29486 62658 143745
New York City Year 2011 834144 190243 2026823 376828 25609 62194 142682
New York City Year 2010 837523 196635 2010055 371423 25489 65545 138373
Boston Year 2014 126543 20968 109104 48163 6225 2948 12122
Boston Year 2013 123546 22580 107418 49031 5806 2903 11935
Boston Year 2012 122403 23220 104916 48007 5404 2861 11445
Boston Year 2011 121554 21761 102901 46321 4663 2797 10880
Boston Year 2010 119404 23448 101509 45972 4319 3085 10181
Seattle Year 2014 185236 30509 71188 33778 13438 4721 24335
Seattle Year 2013 183058 31279 68247 31990 12440 4620 23104
Seattle Year 2012 180640 32936 63835 29540 9507 4074 19354
Seattle Year 2011 181839 32999 63592 30593 10312 4124 20280
Seattle Year 2010 180640 32936 63835 29540 9507 4074 19354
Chicago Year 2014 609654 108735 332316 81857 17104 18326 53757
Chicago Year 2013 608528 112511 323016 79846 15727 18146 52021
Chicago Year 2012 610592 116534 324111 77689 15780 18208 50983
Chicago Year 2011 611945 118989 326613 74064 14570 18212 49781
Chicago Year 2010 620629 121931 324336 70720 13412 18289 48772
Houston Year 2014 775255 124612 43920 20428 5107 19406 32685
Houston Year 2013 765510 122920 42972 20986 4996 17988 32978
Houston Year 2012 765510 122920 42972 20986 4996 17988 32978
Houston Year 2011 735481 127483 45109 20593 3922 16670 30399
Houston Year 2010 718507 130725 46480 21303 3873 17430 30018
Detroit Year 2014 141216 25064 18135 6724 815 4075 6724
Detroit Year 2013 141740 25072 17591 6874 808 3841 6268
Detroit Year 2012 148606 24942 18444 6497 628 3982 6497
Detroit Year 2011 156920 24845 18743 6538 653 3923 6320
Detroit Year 2010 165994 26221 18013 6840 684 3648 6484
Miami Year 2014 126948 17244 20913 8255 1651 2201 6053
Miami Year 2013 121693 18094 20045 7628 1596 1951 6208
Miami Year 2012 121279 18253 20008 6845 1228 2106 5791
Miami Year 2011 212396 18716 19066 6647 1049 2623 5422
Miami Year 2010 120901 17147 20265 6235 866 2771 5196
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- CSS style for table filters based on Nathan Yau's in his tutorial for How American's Spend Their Days -->
<style>
body{
font:10px Helvectica,Arial,sans-serif;
}
a{
color:#821122;
}
#header{
border-bottom:1px solid #ccc;
margin:20px 26px 20px 20px;
}
#header h1{
font-size:2.4em;
font-family:Georgia,Palatino,serif;
font-weight:normal;
}
#header p{
font-family:Georgia,Palatino,serif;
font-size:1.3em;
line-height:1.4em;}
#explain {
margin: 0 0 0 20px;
}
#explain h3{
font-size:1.5em;
margin:0 0 0.5em 0;
padding:0;
}
#explain p{
font-size:1.2em;
line-height:1.4em;
color:#717171;
margin-top:0;
}
#filters{
margin:0 24px 10px 16px;
float:right;
}
.area{
fill:#e5e5ff;
stroke: #888;
stroke-width: 0.5px;
}
.line {
fill:none;
stroke:#00007f;
stroke-width:1.5px;
}
.endpoint {
fill: #00007f;
}
#filters table{
border-collapse:collapse;
border-top:1px solid #e5e5ff;
}
#filters table td{
padding:0;margin:0;
}
#filters a{
display:block;
padding:2px 4px;
font-size:1.1em;
color:black;
background:#e5e5ff;
cursor:pointer;
border-left:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
overflow:hidden;
}
#filters a:hover{
text-decoration:underline;
}
#filters a.current{
background:#fff;color:#000;
font-weight:bold;
}
#filters a.current:hover{
text-decoration:none;
}
.left{
float:left;
}
.clr{
clear:both;
}
.label {
fill: black;
font-size: 1.1em;
}
.y.axis text, .axislabel {
font-size: .85em;
fill: black;
}
</style>
<body>
<div id="header">
<h2>Commuters in Top Congested American Cities, 2000-2014</h2>
<p>Source: <a href="factfinder.census.gov"> FactFinder</a>. US Census Bureau. 2016.</p>
</div>
<div id="explain" class="left">
<h3></h3>
<p></p>
</div>
<div id="filters">
<table class="left">
<tr>
<td><a id="Drove_Alone">Drove Alone</a></td>
</tr>
<tr>
<td><a id="Carpooled">Carpooled</a></td>
</tr>
<tr>
<td><a id="Public_Transportation">Public Transportation</a></td>
</tr>
<tr>
<td><a id="Walked">Walked</a></td>
</tr>
</table>
<table class="left">
<tr>
<td><a id="Bicycle">Bicycle</a></td>
</tr>
<tr>
<td><a id="Taxi_Motorcycle">Taxi/Motorcycle</a></td>
</tr>
<tr>
<td><a id="Work_at_Home">Work at Home</a></td>
</tr>
</table>
</div>
<div class="clr"></div>
<div id="vis"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var explain = {
"Drove_Alone": "Since 2010, there has been a steady growth of commuters driving alone to work.",
"Carpooled":"Los Angeles and New York City show the largest decline in commuters carpooling to work in the past 4 years.",
"Public_Transportation": "The number of commuters using public transportation in top congested cities has not changed much in the past years.",
"Walked" : "There were more commuters in Chicago walking to work in 2014 than in 2010.",
"Bicycle": "Commuters in New York are choosing to bicycle more to work.",
"Taxi_Motorcycle": "The number of commuters taking taxis or driving motocycles to work has remained constant over the past few years.",
"Work_at_Home": "There is a steady increase of people working at home in Los Angeles, New York City and Seattle.",
};
var cities = [];
var fullwidth = 250,
fullheight = 100;
var margin = {top: 30, right: 15, bottom: 20, left: 45},
width = fullwidth - margin.left - margin.right,
height = fullheight - margin.top - margin.bottom;
var parseDate = d3.time.format("Year %Y").parse;
var outputDate = d3.time.format("%Y");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var yAxis = d3.svg.axis()
.orient("left")
.ticks(2)
.outerTickSize(0)
.innerTickSize(0)
.tickFormat(d3.format("s")); // thousands
var current = "Drove_Alone";
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d[current]); });
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d[current]); });
d3.select("#explain h3").text(current);
d3.select("#explain p").html(explain[current]);
d3.csv("cities_commuters.csv", typeFix, function(error, data) {
//typeFix is a function that parses the dates and sets the strings to numeric. See below!
console.log("data after load", data);
// Nest data by symbol.
cities = d3.nest()
.key(function(d) { return d.City; })
.sortValues(function(a,b) {return a.date - b.date;}) // date is already parsed years
.entries(data);
// Compute the minimum and maximum date across symbols.
// We assume values are sorted by date.
x.domain([
d3.min(cities, function(s) { return s.values[0].date; }),
d3.max(cities, function(s) { return s.values[s.values.length - 1].date; })
]);
y.domain([0, d3.max(cities, function(c) {
return d3.max(c.values, function(v) { return +v[current];}); // current
})
]);
yAxis.scale(y);
// Add an SVG element for each city, with the desired dimensions and margin.
var svg = d3.select("#vis").selectAll("svg")
.data(cities)
.enter().append("svg")
.attr("width", fullwidth)
.attr("height", fullheight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.each(multiple); // uses each to call the multiple code for each city
function multiple(city) {
// set up each individual chart, with city as data
var localsvg = d3.select(this); //svg is a single chart, with city data.
// Add the area path elements. Note: the y-domain is set per element.
localsvg.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); });
// Add the line path elements. Note: the y-domain is set per element.
localsvg.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); });
localsvg.append("text")
.attr("class", "axislabel")
.attr("x", 0)
.attr("y", height + margin.bottom/2)
.style("text-anchor", "start")
.text(function(d) { return outputDate(d.values[0].date); });
// Add a small label for the symbol name.
localsvg.append("text")
.attr("class", "label")
.attr("x", width/2)
.attr("y", -8)
.style("text-anchor", "middle")
.text(function(d) { return d.key; });
localsvg.append("text")
.attr("class", "axislabel")
.attr("x", width)
.attr("y", height + margin.bottom/2)
.style("text-anchor", "end")
.text(function(d) { return outputDate(d.values[d.values.length - 1].date);});
// put a dot on last point
localsvg.append("circle")
.attr("class", "endpoint")
.attr("cx", function(d) {return x(d.values[d.values.length - 1].date);})
.attr("cy", function(d) {return y(d.values[d.values.length - 1][current]);})
.attr("r", 2);
// label the value on the last point
localsvg.append("text")
.attr("class", "endpoint")
.attr("x", width)
.attr("y", function(d) {return y(d.values[d.values.length - 1][current]);})
.attr("dy", -5)
.style("text-anchor", "end")
.text(function(d) { return d.values[d.values.length - 1][current]; });
localsvg.append("g").attr("class", "y axis").call(yAxis);
} // end multiple
d3.selectAll("#filters a").on("click", function() {
d3.selectAll("#filters a").classed("current", false);
d3.select(this).classed("current", true);
var label = d3.select(this).attr("text");
var selection = d3.select(this).attr("id");
current = selection;
d3.select("#explain h3").text(current);
d3.select("#explain p").html(explain[current]);
transition(current);
});
function transition(current) {
y.domain([0, d3.max(cities, function(c) {
return d3.max(c.values, function(v) { return +v[current];});
})
]);
yAxis.scale(y);
console.log("in trans", y.domain());
// existing svg that created each chart - now we transition each one
svg.each(function(city) {
var chartTrans = d3.select(this).transition();
chartTrans.select(".y.axis").call(yAxis);
chartTrans.select("path.area")
.attr("d", function(d) { return area(d.values); });
chartTrans.select("path.line")
.attr("d", function(d) { return line(d.values); });
chartTrans.select("circle.endpoint")
.attr("cy", function(d) {return y(d.values[d.values.length - 1][current]);});
// label the value on the last point
chartTrans.select("text.endpoint")
.attr("y", function(d) {return y(d.values[d.values.length - 1][current]);})
.text(function(d) { return d.values[d.values.length - 1][current]; });
}); // end each
}
});
// this function is applied to all the data values on load!
function typeFix(d) {
d.Drove_Alone = +d.Drove_Alone;
d.Carpooled = +d.Carpooled;
d.Public_Transportation = +d.Public_Transportation;
d.Walked = +d.Walked;
d.Bicycle = +d.Bicycle;
d.Taxi_Motorcycle = +d.Taxi_Motorcycle;
d.Work_at_Home = +d.Work_at_Home;
d.date = parseDate(d.Year);
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment