This chart is based on the 'Congress rev 01' dataset availible at https://bl.ocks.org/adamfknapp/f246652b85d4ffaf784839d89f174020
This shart shows the relative variation, compared to the average, in the rate of incumbents in Congress over time.
forked from llad's block: Reusable D3 column chart that supports negative values
xxxxxxxxxx
<meta charset="utf-8">
<html>
<head>
<script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
<script type="text/javascript" src="../d3.v2.js" charset="utf-8" ></script>
<script type="text/javascript" src="column-chart.js"></script>
<style>
.chart rect {
stroke: white;
fill-opacity: .6;
fill: steelblue;
}
.bar.positive {
fill: green;
}
.bar.negative {
fill: brown;
}
.axis text {
font: 12px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="example"></div>
<script>
// Input the data
var data = [["1979", -3.16]
, ["1981", -2.76]
, ["1983", -2.57]
, ["1985", 5.30]
, ["1987", 2.76]
, ["1989", 5.18]
, ["1991", 4.10]
, ["1993", -9.02]
, ["1995", -3.49]
, ["1997", -2.02]
, ["1999", 5.06]
, ["2001", 2.98]
, ["2003", 2.65]
, ["2005", 4.91]
, ["2007", 0.70]
, ["2009", -0.44]
, ["2011", -6.69]
, ["2013", -3.49]];
// Get the data and pull it to the graph
d3.select("#example")
.datum(data)
.call(columnChart()
.width(960)
.height(500)
.x(function(d, i) { return d[0]; }) // Get the x value
.y(function(d, i) { return d[1]; })); // Get the Y value
</script>
</body>
</html>
Modified http://d3js.org/d3.v2.min.js?2.10.0 to a secure url
https://d3js.org/d3.v2.min.js?2.10.0