An example of a divering bar chart original creator https://bl.ocks.org/tlfrd
Graph of margins for Cinton Florida district level added hover text showing percentages and
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style>
body { margin:0; position:fixed; top:0; right:0; bottom:0; left:0; }
body {
font-family: monospace;
}
.y-axis line{
stroke: black;
}
.marginClinton {
fill: black;
}
.bar-label, .x-axis {
font-size: 8px;
}
.domain, .tick line {
opacity: 0.5;
}
</style>
</head>
<body>
<script>
var margin = {top: 40, right: 50, bottom: 60, left: 50};
var width = 960 - margin.left - margin.right,
height = 1500 - margin.top - margin.bottom;
var svg = 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 + ")");
// Config
var cfg = {
labelMargin: 5,
xAxisMargin: 10,
legendRightMargin: 0
}
var x = d3.scaleLinear()
.range([0, width]);
var colour = d3.scaleSequential(d3.interpolatePRGn);
var y = d3.scaleBand()
.range([height, 0])
.padding(0.1);
function parse(d) {
d.district = +d.district;
d.marginClinton = +d.marginClinton;
return d;
}
var legend = svg.append("g")
.attr("class", "legend");
legend.append("text")
.attr("x", width - cfg.legendRightMargin)
.attr("text-anchor", "end")
.text("margin for Clinton");
legend.append("text")
.attr("x", width - cfg.legendRightMargin)
.attr("y", 20)
.attr("text-anchor", "end")
.style("opacity", 0.5)
.text("Florida Districts");
d3.csv("marginsfl.csv", parse, function(error, data) {
if (error) throw error;
y.domain(data.map(function(d) { return d.district; }));
x.domain(d3.extent(data, function(d) { return d.marginClinton; }));
var max = d3.max(data, function(d) { return d.marginClinton; });
colour.domain([-max, max]);
var yAxis = svg.append("g")
.attr("class", "y-axis")
.attr("transform", "translate(" + x(0) + ",0)")
.append("line")
.attr("y1", 0)
.attr("y2", height);
var xAxis = svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + (height + cfg.xAxisMargin) + ")")
.call(d3.axisBottom(x).tickSizeOuter(0));
var bars = svg.append("g")
.attr("class", "bars")
bars.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "margin")
.attr("x", function(d) {
return x(Math.min(0, d.marginClinton));
})
.attr("y", function(d) { return y(d.district); })
.attr("height", y.bandwidth())
.attr("width", function(d) {
return Math.abs(x(d.marginClinton) - x(0))
})
.style("fill", function(d) {
return colour(d.marginClinton)
});
var labels = svg.append("g")
.attr("class", "labels");
labels.selectAll("text")
.data(data)
.enter().append("text")
.attr("class", "bar-label")
.attr("x", x(0))
.attr("y", function(d) { return y(d.district)})
.attr("dx", function(d) {
return d.marginClinton < 0 ? cfg.labelMargin : -cfg.labelMargin;
})
.attr("dy", y.bandwidth())
.attr("text-anchor", function(d) {
return d.marginClinton < 0 ? "start" : "end";
})
.text(function(d) { return "FL HD " + d.district })
;
});
</script>
</body>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js