Rendering of mbostock's Bar Chart with Negative Values II with d3 v4. Text-rendering by way of HarryStevens' Positive-Negative Bar Chart.
Last active
December 18, 2017 06:58
-
-
Save seasmith/cd54d777d2c5e5074e1e2a91237cee4b to your computer and use it in GitHub Desktop.
Bar Chart With Negative Values
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
h1, h2 { | |
font-family: "Lato", "Open Sans", "sans-serif"; | |
margin: 0px; | |
padding: 0px; | |
} | |
.text-things { | |
margin-bottom: 4px; | |
} | |
.bar--positive { | |
fill: steelblue; | |
} | |
.bar--negative { | |
fill: brown; | |
} | |
.value { | |
font-size: 10px; | |
} | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
<div class="text-things"> | |
<h1>US Weekly Oil and Gas Rig Count</h1> | |
<h2>Week of December 8, 2017</h2> | |
</div> | |
<svg width="480" height="250"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
margin = {top: 30, right: 20, bottom: 40, left: 30}, | |
width = +svg.attr("width") - margin.left - margin.right, | |
height = +svg.attr("height") - margin.top - margin.bottom; | |
var x = d3.scaleLinear() | |
.range([0, width]); | |
var y = d3.scaleBand() | |
.rangeRound([0, height]) | |
.padding(0.1); | |
var g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("rig_count_changes.csv", type, function(error, data) { | |
if (error) throw errror; | |
x.domain(d3.extent(data, function(d) { return d.change; })).nice(); | |
y.domain(data.map(function(d) { return d.formation;})); | |
g.append("g") | |
.attr("class", "axis axis-x") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x).ticks(6)); | |
var tickNegative = g.append("g") | |
.attr("class", "axis axis--y") | |
.attr("transform", "translate(" + x(0) + ",0)") | |
.call(d3.axisLeft(y)) | |
.selectAll(".tick") | |
.filter(function(d, i) { return data[i].change < 0; }); | |
tickNegative.select("line") | |
.attr("x2", 6); | |
tickNegative.select("text") | |
.attr("x", 9) | |
.style("text-anchor", "start"); | |
g.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", function(d) { return "bar bar--" + (d.change < 0 ? "negative" : "positive"); }) | |
.attr("x", function(d) { return x(Math.min(0, d.change)); }) | |
.attr("y", function(d) { return y(d.formation); }) | |
.attr("width", function(d) { return Math.abs(x(d.change) - x(0)); }) | |
.attr("height", y.bandwidth()); | |
/* | |
text idea from: http://blockbuilder.org/HarryStevens/f1e0de06f1e3f014e9233b80e3514849 | |
*/ | |
g.selectAll(".value") | |
.data(data) | |
.enter().append("text") | |
.attr("class", "value") | |
.attr("x", function(d){ | |
if (d.change < 0){ | |
return (x(d.change * -1) - x(0)) > 20 ? x(d.change) + 2 : x(d.change) - 1; | |
} else { | |
return (x(d.change) - x(0)) > 20 ? x(d.change) - 2 : x(d.change) + 1; | |
}}) | |
.attr("y", function(d){ return y(d.formation); }) | |
.attr("dy", y.bandwidth() - 4) | |
.attr("text-anchor", function(d){ | |
if (d.change < 0){ | |
return (x(d.change * -1) - x(0)) > 20 ? "start" : "end"; | |
} else { | |
return (x(d.change) - x(0)) > 20 ? "end" : "start"; | |
}}) | |
.style("fill", function(d){ | |
if (d.change < 0){ | |
return (x(d.change * -1) - x(0)) > 20 ? "#fff" : "#3a403d"; | |
} else { | |
return (x(d.change) - x(0)) > 20 ? "#fff" : "#3a403d"; | |
}}) | |
.text(function(d){ return d.change; }); | |
}) | |
function type(d) { | |
d.change = +d.change; | |
return d; | |
} | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
formation | change | |
---|---|---|
Marcellus | 3 | |
Haynesville | 3 | |
Eagle Ford | 3 | |
Permian | 3 | |
Barnett | 1 | |
Cana Woodford | 1 | |
Williston | -1 | |
DJ-Niobrara | -2 | |
Mississippian | -2 | |
Utica | -3 | |
Others | -4 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment