Skip to content

Instantly share code, notes, and snippets.

@JenHLab

JenHLab/comGender.csv

Created March 14, 2016 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JenHLab/7dccd8f9e80b8659f2d3 to your computer and use it in GitHub Desktop.
Save JenHLab/7dccd8f9e80b8659f2d3 to your computer and use it in GitHub Desktop.
Download ZIP
An Updating Plot With 2+ Datasets
Raw
comGender.csv
Gender Total Drove Alone Carpooled Public Transportation Walked Bicycle Taxi Home at Home
Male 606123 468533 52126 26669 14546 5455 9697 28887
Female 543929 415017 55480 34811 11966 1631 4895 20125
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Object Constancy</title>
<style>
body {
background: #fcfcfa;
color: #333;
margin: 1em auto 4em auto;
position: relative;
width: 960px;
}
svg {
font: 10px sans-serif;
}
.bar rect {
fill: #329932;
}
.bar rect:hover {
fill: #004000;
}
.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
stroke: none;
}
.x.axis path {
fill: none;
stroke: white;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
</style>
</head>
<body>
<h2>Commuter Characteristics by Gender in Miami-Dade County</h2>
<p>Miami-Dade county is one of the busiest counties in the U.S. with over 1.5 million commuters. The City of Miami has been ranked among the top most congested cities in the nation. Part of the reason is the lack of public transportation infrastructure for everyday commuters.
<br><br>A closer look at statistics by the U.S. Census, shows that Miami commuters prefer to drive alone. Statistics specific to gender also reveal interesting information such as women carpool more than men to work and use more public transportation. Men, on the other hand, walk more than women, ride bicycle and use taxis to work.</p>
<p><a href="http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?src=CF">American FactFinder.</a> U.S. Census Bureau. 2014.</p>
<p id="menu"><b>Commuter Characteristics by Gender, 2014</b><br>Commuting Type: <select></select>
<p id="chart"></p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var fullwidth = 960,
fullheight = 280;
var margin = {top: 20, right: 40, bottom: 10, left: 40},
width = fullwidth - margin.right - margin.left;
height = fullheight - margin.top - margin.bottom;
var percentFormat = d3.format(".1%"),
gnder,
prevMode;
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.ordinal()
.rangeRoundBands([0, height], .1);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("top")
.tickFormat(percentFormat);
var svg = d3.select("#chart").append("svg")
.attr("width", fullwidth)
.attr("height", fullheight)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis");
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("class", "domain")
.attr("y2", height);
var menu = d3.select("#menu select")
.on("change", redraw);
d3.csv("comGender.csv", function(data) {
gnder = data;
// remember d3.keys gets us the column names from these objects, using first row:
var modes = d3.keys(gnder[0]).filter(function(key) {
return key != "Gender" && key != "Total"; // this will return columns NOT MATCHING those
});
console.log(modes);
// do some calculations for each percentmode
gnder.forEach(function(gender) {
modes.forEach(function(mode) {
gender[mode] = gender[mode] / gender.Total;
});
});
// build menu from the data; could have been done by hand.
menu.selectAll("option")
.data(modes)
.enter().append("option")
.text(function(d) { return d; });
menu.property("value", "Drove Alone");
// redraw in this case draws the UI - it uses a variable to determine data column.
redraw();
}); // end load csv
function redraw() {
// get the mode for the data access off the menu:
var currentMode = menu.property("value");
// sort by it and then take the top 10 using slice!
var top10 = gnder.sort(function(a, b) {
return b[currentMode] - a[currentMode];
})
.slice(0, 10);
yScale.domain(top10.map(function(d) { return d.Gender; })); // the y scale is ordinal, all the state names
var bar = svg.selectAll(".bar")
.data(top10, function(d) { return d.Gender; }); // key function!
var barCreate = bar.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + (yScale(d.Gender) + height) + ")"; })
.style("fill-opacity", 0);
console.log("mode", prevMode); // this is undefined the first time thru.
barCreate.append("rect")
//.attr("width", mode && function(d) { return x(d[mode]); })
.attr("width", function(d) {
if (prevMode) {
return xScale(d[prevMode]);
}
})
.attr("height", yScale.rangeBand());
barCreate.append("text")
.attr("class", "label")
.attr("x", -3)
.attr("y", yScale.rangeBand() / 2)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return d.Gender; });
barCreate.append("text")
.attr("class", "value")
//.attr("x", mode && function(d) { return x(d[mode]) - 3; })
.attr("x", function(d) {
if (prevMode) {
return xScale(d[prevMode]) - 3;
}
})
.attr("y", yScale.rangeBand() / 2)
.attr("dy", ".35em")
.attr("text-anchor", "end");
prevMode = currentMode;
// they are sorted, so take the top value for the max on the domain here:
xScale.domain([0, top10[0][currentMode]]);
// sets the d.yLocation for the bar that's used in the exit transition.
var barUpdate = bar.transition()
.attr("transform", function(d) {
// set the value of the current y location for the exit move when it goes.
d.yLocation = yScale(d.Gender);
return "translate(0," + yScale(d.Gender) + ")"; })
.style("fill-opacity", 1);
barUpdate.select("rect")
.attr("width", function(d) { return xScale(d[currentMode]); });
barUpdate.select(".value")
.attr("x", function(d) { return xScale(d[currentMode]) - 3; })
.text(function(d) { return percentFormat(d[currentMode]); });
var barExit = bar.exit().transition()
.attr("transform", function(d) { return "translate(0," + (d.yLocation + height) + ")"; })
.style("fill-opacity", 0)
.remove();
barExit.select("rect")
.attr("width", function(d) { return xScale(d[currentMode]); });
barExit.select(".value")
.attr("x", function(d) { return xScale(d[currentMode]) - 3; })
.text(function(d) { return percentFormat(d[currentMode]); });
// transition the axis, so easy if you fixed the domain!
svg.transition().select(".x.axis")
.call(xAxis);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment