Built with blockbuilder.org
forked from romsson's block: Stacked bar chart v4
xxxxxxxxxx
<style>
.axis .domain {
display: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var n = 11, // number of samples
m = 4; // number of series
var t = d3.transition()
.duration(1000)
.ease(d3.easeLinear);
var stacked = true;
var data = d3.range(m).map(function() {
return d3.range(n).map(Math.random);
});
var dataFormat = [];
d3.csv("stock.csv", function(data) {
var dataset = d3.nest()
.key(function(d) {
return d.date.substring(d.date.length - 4)
})
.entries(data)
dataset.forEach(function(item, index) {
dataset[index] = {
year: item.key,
symbols: d3.nest()
.key(function(e) {
return e.symbol
})
.entries(item.values)
}
dataset[index].symbols.forEach(function(el, i) {
dataset[index].symbols[i] = {
symbol: el.key,
price: d3.mean(el.values, function(a) {
return a.price
})
}
})
})
dataFormat = d3.range(n).map(function(index) {
return d3.range(m).map(function(i) {
return Math.round(dataset[index].symbols[i].price * 10) / 10
});
})
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// y stacked
var y_st = d3.scaleLinear()
.domain([0, 500])
.rangeRound([height, 0])
.nice();
// y grouped
var y_gr = d3.scaleLinear()
.domain([0, 500])
.rangeRound([height, 0])
.nice();
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1)
.domain(d3.range(n));
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
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 + ")");
// Création du graphique initial stacked
svg.append("g").selectAll("g")
.data(d3.stack().keys(d3.range(m))(dataFormat))
.enter().append("g")
.style("fill", function(d) {
return z(d.key);
})
.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("x", function(d, i) {
return x(i);
})
.attr("y", function(d) {
return y_st(d[1]);
})
.attr("height", function(d) {
return y_st(d[0]) - y_st(d[1]);
})
.attr("width", x.bandwidth());
// Gestion de la transition
svg.on("click", function() {
svg.selectAll("g").each(function(d, index) {
d3.select(this).selectAll("rect").each(function(e, i) {
if (stacked == true) {
d3.select(this).transition(t)
.attr("width", function() {
if(x(i)!=undefined) {
return x.bandwidth() / 5
}
})
.attr("x", function() {
if(x(i)!=undefined) {
return x(i) + ((index - 1) % 4) * x.bandwidth() / 4
}
})
.transition(t).delay(200)
/*.attr("height", function(d) {
return y_gr(d[0]) - y_gr(d[1]);
})*/
.attr("y", function(d) {
return height - (y_gr(d[0]) - y_gr(d[1]));
})
} else {
d3.select(this).transition()
/*.attr("height", function(d) {
return y_st(d[0]) - y_st(d[1])
})*/
.attr("y", function(d) {
return y_st(d[1]);
})
.transition(t).delay(200)
.attr("x", function() {
if(x(i)!=undefined) {
return x(i)
}
})
.attr("width", function() {
return x.bandwidth()
})
}
})
})
if(stacked == true){
stacked = false
} else {
stacked = true
}
})
});
</script>
https://d3js.org/d3.v4.min.js