xxxxxxxxxx
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
<style type="text/css">
body {
font-family: Futura;
font-size: 10px;
}
.bar-group {
font-family: Futura;
}
.axis line {
stroke-opacity: .5;
stroke: #fff;
}
.axis text {
font-family: Futura;
font-size: 6px;
}
button {
font-family: Futura;
}
</style>
<body>
</body>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scaleBand()
.padding([.1])
.range([0,width])
var yScale = d3.scaleLinear()
.range([height, 0])
var colorScale = d3.scaleOrdinal(d3.schemeCategory20c);
// var colorScale = d3.scaleLinear()
// .range(["yellow", "purple", "green"])
// .domain([0, 12, 25])
// .interpolate(d3.interpolateHsl);
// var colorScale = d3.scaleSequential(d3.interpolateRainbow);
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 + ")");
var data = [
{month: "January", apples: 3840, bananas: 1920, cherries: 960, dates: 400},
{month: "February", apples: 1600, bananas: 1440, cherries: 960, dates: 400},
{month: "March", apples: 640, bananas: 960, cherries: 640, dates: 400},
{month: "April", apples: 320, bananas: 480, cherries: 640, dates: 400}
];
var stack = d3.stack()
.keys(["apples", "bananas", "cherries", "dates"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
var series = stack(data);
console.log(data);
console.log(series);
xScale.domain(d3.set(data.map(function(d) { return d.month })).values());
var allMaxValues = [];
series.forEach(function(d) {
d.forEach(function(d) {
allMaxValues.push(d[1])
})
})
var maxValue = d3.max(allMaxValues, function(d) { return d; });
yScale.domain([0, maxValue]);
// x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale))
// y axis
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale))
// appends the rect
svg.selectAll(".bar-group")
.data(series)
.enter().append("g")
.attr("class", "bar-group")
.style("fill", function(d) { return colorScale(d.key); })
.selectAll(".bar")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.data.month); })
.attr("y", function(d) { return yScale(d[1]); })
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
.attr("width", xScale.bandwidth)
// https://github.com/d3/d3-shape/blob/master/README.md#stack-orders
var orderButtons = d3.select("body")
.selectAll(".stack-order")
.data(["stackOrderAscending","stackOrderDescending","stackOrderInsideOut","stackOrderNone","stackOrderReverse"])
.enter().append("button")
.attr("class", "stack-order")
.text(function(d) { return d; })
.on("click", function(stackOrder) {
stack.order(d3[stackOrder])
series = stack(data);
d3.selectAll(".bar-group")
.data(series)
.selectAll(".bar")
.data(function(d) { return d })
.transition()
.duration(1000)
.attr("y", function(d) { return yScale(d[1]); })
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
})
// https://github.com/d3/d3-shape/blob/master/README.md#stack-offsets
var stackButtons = d3.select("body")
.selectAll(".stack-offset")
.data(["stackOffsetWiggle","stackOffsetSilhouette","stackOffsetNone","stackOffsetExpand"])
.enter().append("button")
.attr("class", "stack-order")
.text(function(d) { return d; })
.on("click", function(stackOrder) {
stack.offset(d3[stackOrder])
series = stack(data);
var newMaxValues = [];
series.forEach(function(d) {
d.forEach(function(d) {
newMaxValues.push(d[1])
})
})
var maxValue = d3.max(newMaxValues, function(d) { return d; });
yScale.domain([0, maxValue]);
d3.select(".y")
.transition()
.duration(1000)
.call(d3.axisLeft(yScale))
d3.selectAll(".bar-group")
.data(series)
.selectAll(".bar")
.data(function(d) { return d })
.transition()
.duration(1000)
.attr("y", function(d) { return yScale(d[1]); })
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); });
})
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v0.3.min.js