Readme
xxxxxxxxxx
<meta charset="UTF-8">
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<script>
function streamChart(){
d3.select("body").append("svg").attr("width", 1000).attr("height", 500)
d3.csv("MOCK_DATA.csv", data => {
var keys = ["1","2","3","4","5","6","7","8"]
var stackLayout = d3.stack()
.keys(keys)
stackLayout.offset(d3.stackOffsetSilhouette)
console.log(stackLayout(data))
var yScale = d3.scaleLinear().domain([-70,70]).range([480,20])
var heightScale = d3.scaleLinear().domain([-70,70]).range([480,0])
yAxis = d3.axisRight().scale(heightScale)
var xScale = d3.scaleLinear().domain([0,249]).range([20,980])
xAxis = d3.axisBottom().scale(xScale)
var colorScale = d3.scaleOrdinal().domain(keys).range(['#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4'])
var stackArea = d3.area()
.x((d,i) => xScale(i))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]))
.curve(d3.curveBasis)
d3.select("svg").selectAll("path")
.data(stackLayout(data)).enter().append("path")
.attr("d", d => stackArea(d))
.attr("fill", function(d){return colorScale(d.key)})
var stackArea = d3.area()
.x((d,i) => xScale(i))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]))
.curve(d3.curveBasis)
d3.select("svg").selectAll("path")
.data(stackLayout(data)).enter()
.append("path")
d3.select("svg").append("g").attr("class","xAxis")
.call(xAxis)
.attr("transform",`translate(0,480)`)
d3.select("svg").append("g").attr("class","yAxis")
.call(yAxis)
.attr("transform",`translate(20,0)`)
});
}
streamChart();
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-selection-multi.v0.4.min.js