Skip to content

Instantly share code, notes, and snippets.

@reinson
Last active March 30, 2018 15:45
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save reinson/166bae46dd106b45cf2d77c7802768ca to your computer and use it in GitHub Desktop.
Stacked bars & slider

This is a stacked bar chart with slider dependent transitions. Uses D3.js V4

Slider x first second third
0 1 55 20 25
0 2 65 15 20
0 3 80 10 10
0 4 88 7 5
0 5 93 5 2
25 1 45 25 30
25 2 46 27 27
25 3 65 15 20
25 4 72 13 15
25 5 80 10 10
50 1 35 30 35
50 2 47 30 23
50 3 53 30 17
50 4 57 30 13
50 5 60 30 10
75 1 25 30 45
75 2 38 37 25
75 3 39 38 23
75 4 39 39 22
75 5 40 40 20
100 1 22 23 55
100 2 20 20 60
100 3 10 15 75
100 4 3 12 85
100 5 2 8 90
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path, .axis--x line {
display: none;
}
input {
position: absolute;
left: 30px;
top: 40px;
width: 220px;
}
</style>
<svg width="800" height="600"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<input type="range" min="0" max="100" step="25" value="0">
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 100, bottom: 200, left: 300},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.3)
.align(0.7);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory10);
var stack = d3.stack();
d3.csv("data.csv", function(error, data) {
if (error) throw error;
var data_nest = d3.nest()
.key(function(d){
return d.Slider
})
.entries(data);
data = data_nest.filter(function(d){ return d.key == 0})[0].values;
var cat = ["first","second","third"];
x.domain(data.map(function(d) { return d.x; }));
y.domain([0, 100]).nice();
z.domain(cat);
g.selectAll(".serie")
.data(stack.keys(cat)(data))
.enter().append("g")
.attr("class", "serie")
.attr("fill", function(d) {return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.x); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.style("font", "18px sans-serif")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.attr("transform","translate(" + width + ",0)")
.call(d3.axisRight(y).ticks(10, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks(10).pop()))
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000");
d3.select("input")
.on("input", changed)
.on("change", changed);
function changed() {
var value = this.value;
g.selectAll(".serie")
.data(stack.keys(cat)(data_nest.filter(function(d){return +d.key == value})[0].values))
.selectAll("rect")
.data(function(d) { return d; })
.transition()
.duration(500)
.delay(function(d,i){return i*100})
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("x", function(d) { return x(d.data.x); })
.attr("y", function(d) { return y(d[1]); })
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment