Skip to content

Instantly share code, notes, and snippets.

@bsmithgall

bsmithgall/README.md

Created October 17, 2013 23:13
Show Gist options
  • Save bsmithgall/7033944 to your computer and use it in GitHub Desktop.
Save bsmithgall/7033944 to your computer and use it in GitHub Desktop.
Download ZIP
Congress
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
font-size: 10px;
width: 960px;
}
.bar {
stroke:white;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 1.5px;
}
</style>
<body>
<label><input type="checkbox">Order by Bills Passed</label>
<script>
var data = [{'dem_houses': -1, 'total_bills': 1876, 'congress': '83rd', 'congress_number': 83}, {'dem_houses': -1, 'total_bills': 2012, 'congress': '84th', 'congress_number': 84}, {'dem_houses': -1, 'total_bills': 1825, 'congress': '85th', 'congress_number': 85}, {'dem_houses': -1, 'total_bills': 1379, 'congress': '86th', 'congress_number': 86}, {'dem_houses': -1, 'total_bills': 1658, 'congress': '87th', 'congress_number': 87}, {'dem_houses': -1, 'total_bills': 1119, 'congress': '88th', 'congress_number': 88}, {'dem_houses': -1, 'total_bills': 1386, 'congress': '89th', 'congress_number': 89}, {'dem_houses': -1, 'total_bills': 1064, 'congress': '90th', 'congress_number': 90}, {'dem_houses': -1, 'total_bills': 1037, 'congress': '91st', 'congress_number': 91}, {'dem_houses': -1, 'total_bills': 851, 'congress': '92nd', 'congress_number': 92}, {'dem_houses': -1, 'total_bills': 1598, 'congress': '93rd', 'congress_number': 93}, {'dem_houses': -1, 'total_bills': 1669, 'congress': '94th', 'congress_number': 94}, {'dem_houses': -1, 'total_bills': 1719, 'congress': '95th', 'congress_number': 95}, {'dem_houses': -1, 'total_bills': 1563, 'congress': '96th', 'congress_number': 96}, {'dem_houses': -1, 'total_bills': 898, 'congress': '97th', 'congress_number': 97}, {'dem_houses': -1, 'total_bills': 1012, 'congress': '98th', 'congress_number': 98}, {'dem_houses': -1, 'total_bills': 1020, 'congress': '99th', 'congress_number': 99}, {'dem_houses': -1, 'total_bills': 1112, 'congress': '100th', 'congress_number': 100}, {'dem_houses': -1, 'total_bills': 1279, 'congress': '101st', 'congress_number': 101}, {'dem_houses': 2, 'total_bills': 1212, 'congress': '102nd', 'congress_number': 102}, {'dem_houses': 2, 'total_bills': 996, 'congress': '103rd', 'congress_number': 103}, {'dem_houses': 0, 'total_bills': 939, 'congress': '104th', 'congress_number': 104}, {'dem_houses': 0, 'total_bills': 1028, 'congress': '105th', 'congress_number': 105}, {'dem_houses': 0, 'total_bills': 1380, 'congress': '106th', 'congress_number': 106}, {'dem_houses': 0, 'total_bills': 1069, 'congress': '107th', 'congress_number': 107}, {'dem_houses': 0, 'total_bills': 1374, 'congress': '108th', 'congress_number': 108}, {'dem_houses': 0, 'total_bills': 1512, 'congress': '109th', 'congress_number': 109}, {'dem_houses': 1, 'total_bills': 1897, 'congress': '110th', 'congress_number': 110}, {'dem_houses': 2, 'total_bills': 1851, 'congress': '111st', 'congress_number': 111}, {'dem_houses': 1, 'total_bills': 1007, 'congress': '112nd', 'congress_number': 112}, {'dem_houses': 1, 'total_bills': 313, 'congress': '113rd', 'congress_number': 113}, {'dem_houses': -2, 'total_bills': 801, 'congress': '113rd (proj)', 'congress_number': 114}]
var margin = {left: 60, right: 20, top: 20, bottom: 50},
width = 900 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var xBar = d3.scale.ordinal()
.domain(data.map(function(d) { return d.congress; }))
.rangeRoundBands([0, width], .1);
var yBar = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.total_bills; }) + 100])
.range([height, 0]);
var color = d3.scale.ordinal()
.domain([0,2])
.range(['B2182B','4575B4','8073AC'])
var xAxis = d3.svg.axis()
.scale(xBar)
.orient('bottom')
var yAxisBar = d3.svg.axis()
.scale(yBar)
.orient('left');
var svgBar = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
svgBar.append('g')
.attr('class', 'x axis')
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.selectAll('text')
.attr('transform', function(d) {
return 'rotate(-30)';
})
svgBar.append('g')
.attr('class', 'y axis')
.call(yAxisBar)
svgBar.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class','bar')
.attr('x', function(d) { return xBar(d.congress); })
.attr('width', xBar.rangeBand())
.attr('y', function(d) { return yBar(d.total_bills); })
.attr('height', function(d) { return height - yBar(d.total_bills) })
.style('fill', function(d) {
if(d.dem_houses === -1) return "grey"
else if (d.dem_houses === -2) return "bcbddc"
else return color(d.dem_houses); })
d3.select("input").on("change", change);
var sortTimeout = setTimeout(function() {
d3.select("input").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(sortTimeout);
var x0 = xBar.domain(data.sort(this.checked
? function(a, b) { return b.total_bills - a.total_bills; }
: function(a, b) { return d3.ascending(a.congress_number, b.congress_number); })
.map(function(d) { return d.congress; }))
.copy();
var transition = svgBar.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) { return x0(d.congress); });
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment