Streamchart

Readme

<!DOCTYPE html>
<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