| license: mit |
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
| function columnChart() { | |
| var margin = {top: 30, right: 10, bottom: 50, left: 50}, | |
| width = 420, | |
| height = 420, | |
| xRoundBands = 0.2, | |
| xValue = function(d) { return d[0]; }, | |
| yValue = function(d) { return d[1]; }, | |
| xScale = d3.scale.ordinal(), | |
| yScale = d3.scale.linear(), | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"), | |
| xAxis = d3.svg.axis().scale(xScale); | |
| function chart(selection) { | |
| selection.each(function(data) { | |
| // Convert data to standard representation greedily; | |
| // this is needed for nondeterministic accessors. | |
| data = data.map(function(d, i) { | |
| return [xValue.call(data, d, i), yValue.call(data, d, i)]; | |
| }); | |
| // Update the x-scale. | |
| xScale | |
| .domain(data.map(function(d) { return d[0];} )) | |
| .rangeRoundBands([0, width - margin.left - margin.right], xRoundBands); | |
| // Update the y-scale. | |
| yScale | |
| .domain(d3.extent(data.map(function(d) { return d[1];} ))) | |
| .range([height - margin.top - margin.bottom, 0]) | |
| .nice(); | |
| // Select the svg element, if it exists. | |
| var svg = d3.select(this).selectAll("svg").data([data]); | |
| // Otherwise, create the skeletal chart. | |
| var gEnter = svg.enter().append("svg").append("g"); | |
| gEnter.append("g").attr("class", "bars"); | |
| gEnter.append("g").attr("class", "y axis"); | |
| gEnter.append("g").attr("class", "x axis"); | |
| gEnter.append("g").attr("class", "x axis zero"); | |
| // Update the outer dimensions. | |
| svg .attr("width", width) | |
| .attr("height", height); | |
| // Update the inner dimensions. | |
| var g = svg.select("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // Update the bars. | |
| var bar = svg.select(".bars").selectAll(".bar").data(data); | |
| bar.enter().append("rect"); | |
| bar.exit().remove(); | |
| bar .attr("class", function(d, i) { return d[1] < 0 ? "bar negative" : "bar positive"; }) | |
| .attr("x", function(d) { return X(d); }) | |
| .attr("y", function(d, i) { return d[1] < 0 ? Y0() : Y(d); }) | |
| .attr("width", xScale.rangeBand()) | |
| .attr("height", function(d, i) { return Math.abs( Y(d) - Y0() ); }); | |
| // x axis at the bottom of the chart | |
| g.select(".x.axis") | |
| .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")") | |
| .call(xAxis.orient("bottom")); | |
| // zero line | |
| g.select(".x.axis.zero") | |
| .attr("transform", "translate(0," + Y0() + ")") | |
| .call(xAxis.tickFormat("").tickSize(0)); | |
| // Update the y-axis. | |
| g.select(".y.axis") | |
| .call(yAxis); | |
| }); | |
| } | |
| // The x-accessor for the path generator; xScale ∘ xValue. | |
| function X(d) { | |
| return xScale(d[0]); | |
| } | |
| function Y0() { | |
| return yScale(0); | |
| } | |
| // The x-accessor for the path generator; yScale ∘ yValue. | |
| function Y(d) { | |
| return yScale(d[1]); | |
| } | |
| chart.margin = function(_) { | |
| if (!arguments.length) return margin; | |
| margin = _; | |
| return chart; | |
| }; | |
| chart.width = function(_) { | |
| if (!arguments.length) return width; | |
| width = _; | |
| return chart; | |
| }; | |
| chart.height = function(_) { | |
| if (!arguments.length) return height; | |
| height = _; | |
| return chart; | |
| }; | |
| chart.x = function(_) { | |
| if (!arguments.length) return xValue; | |
| xValue = _; | |
| return chart; | |
| }; | |
| chart.y = function(_) { | |
| if (!arguments.length) return yValue; | |
| yValue = _; | |
| return chart; | |
| }; | |
| return chart; | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <script src="http://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> |
