Skip to content

Instantly share code, notes, and snippets.

@harrisoncramer

harrisoncramer/.block

Last active November 22, 2017 17:35
Show Gist options
  • Save harrisoncramer/72524a4bcc1675329debca53049613b5 to your computer and use it in GitHub Desktop.
Save harrisoncramer/72524a4bcc1675329debca53049613b5 to your computer and use it in GitHub Desktop.
Download ZIP
Streamchart
Raw
.block
license: gpl-3.0
Raw
index.html
<!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>
Raw
MOCK_DATA.csv
1 2 3 4 5 6 7 8
4 18 2 14 6 19 20 11
2 17 10 2 20 7 17 10
7 6 9 8 11 13 1 1
20 20 11 10 14 9 8 5
18 20 8 6 18 1 18 15
6 4 12 18 2 17 7 20
19 13 4 2 2 17 14 14
18 2 13 9 6 2 14 2
7 20 11 7 15 8 10 2
16 8 13 18 2 16 20 18
20 5 4 16 17 15 4 20
11 3 9 8 19 4 4 17
5 4 15 14 7 14 1 13
15 12 6 17 9 18 8 5
14 11 15 3 14 10 19 9
2 13 19 1 18 20 3 11
12 5 14 3 8 20 13 9
12 12 5 19 10 14 6 18
8 3 4 1 16 5 13 11
19 12 2 20 19 13 18 5
18 19 19 15 20 14 20 8
4 20 9 20 12 10 18 5
1 13 8 3 7 15 1 10
15 19 9 14 8 12 15 12
20 13 10 17 15 16 20 12
7 7 14 5 3 13 9 3
1 14 6 8 6 7 11 8
20 3 2 16 11 6 13 10
7 13 9 6 7 5 10 3
16 8 6 6 11 1 9 7
15 17 3 14 15 13 13 10
10 14 13 13 15 11 17 3
12 6 12 12 10 9 2 8
3 11 8 8 20 15 19 4
12 10 20 19 3 9 18 12
9 7 20 12 13 15 20 18
8 6 3 11 1 11 15 11
7 10 1 16 19 13 18 2
3 17 16 14 6 3 14 11
7 6 13 8 18 17 17 20
19 14 19 13 13 9 9 20
5 17 17 2 18 9 17 6
2 8 19 12 4 5 2 7
3 16 5 2 17 4 1 1
4 8 13 11 10 7 15 20
1 7 12 12 19 2 15 13
7 10 6 2 5 6 6 18
17 4 11 3 4 15 3 9
18 2 15 10 13 15 2 19
16 13 15 20 5 14 13 3
3 17 9 4 20 17 9 15
12 11 11 3 19 8 4 5
1 16 7 16 12 13 4 19
17 14 17 4 12 5 7 18
1 10 18 20 5 10 9 15
2 13 12 7 7 8 3 3
16 7 11 18 15 15 11 15
14 16 3 10 20 13 17 16
11 9 5 11 15 7 10 11
10 17 14 15 5 20 4 17
10 1 13 12 10 15 9 8
15 3 18 16 14 9 5 7
12 13 16 7 20 10 15 10
8 11 11 7 11 18 2 3
18 20 20 11 8 16 19 9
16 3 15 10 13 12 19 10
11 2 8 13 20 7 11 16
16 18 3 1 18 17 3 12
17 8 9 8 16 2 15 4
6 4 1 8 7 14 11 20
14 6 16 4 6 9 12 8
10 1 18 2 16 8 18 16
3 7 7 1 10 14 12 20
15 1 4 12 6 13 8 14
10 6 4 12 14 20 15 14
3 1 7 9 7 12 16 13
1 5 19 2 3 6 20 3
15 15 15 8 19 16 10 19
18 2 16 15 7 3 15 17
20 13 19 8 14 20 3 15
15 10 10 15 14 2 7 7
8 15 11 6 12 8 1 7
16 4 10 12 1 9 16 2
8 5 20 8 1 8 14 10
10 16 13 7 1 6 6 19
2 15 1 7 16 1 14 10
11 15 12 19 8 8 4 18
10 1 20 2 4 16 13 15
12 14 20 8 15 19 20 1
13 6 20 3 14 15 20 16
9 13 6 1 2 3 19 1
2 19 5 12 13 9 2 15
9 3 20 8 19 15 12 16
4 15 12 4 12 20 3 20
7 2 9 19 2 20 16 8
13 2 6 12 6 19 2 12
1 4 4 12 8 6 12 14
10 20 18 10 4 14 3 12
18 11 12 4 17 1 1 20
15 1 17 19 18 7 20 10
6 5 6 7 5 2 15 16
5 3 9 7 6 11 17 15
20 2 13 18 10 20 18 13
3 10 11 10 18 10 12 13
13 3 7 2 13 10 14 12
20 7 4 8 7 19 12 5
17 1 20 3 18 5 15 19
18 17 19 2 7 4 16 8
14 1 6 5 17 7 11 17
3 18 7 2 14 6 4 11
14 11 12 6 1 17 19 11
13 3 11 17 5 19 11 2
3 15 12 7 18 2 3 17
12 6 15 9 19 8 13 2
15 7 2 16 16 7 19 10
15 6 10 7 9 15 10 10
6 4 8 19 12 13 14 2
11 7 17 2 3 18 12 19
4 6 19 15 11 4 12 5
12 14 18 5 3 7 15 18
14 16 20 2 1 7 1 18
3 5 4 1 8 2 8 4
14 10 5 5 13 18 8 16
15 10 8 6 17 2 2 1
7 2 12 19 7 19 2 11
20 3 9 1 9 14 13 10
20 2 3 14 9 9 10 16
8 19 4 3 2 18 15 18
9 14 12 3 2 2 14 1
18 16 17 12 5 2 11 6
16 2 4 13 20 2 6 16
3 18 4 4 16 6 7 7
10 2 6 1 16 4 14 7
3 15 13 9 17 16 6 19
11 14 15 1 12 16 10 7
3 18 10 11 4 2 2 10
10 12 10 1 8 18 14 17
12 2 6 16 11 8 3 5
9 11 18 15 2 6 13 6
1 4 6 15 12 1 5 16
11 20 12 10 9 17 20 8
6 3 4 3 5 10 14 15
1 13 20 18 4 20 18 9
4 7 10 17 19 19 18 19
15 14 3 16 3 15 20 17
13 15 6 19 14 4 10 20
1 12 14 18 18 3 9 4
8 3 5 13 10 13 7 12
2 10 6 3 20 8 8 17
14 8 8 13 3 10 1 6
13 18 3 2 12 8 14 12
10 5 8 12 5 13 1 12
18 17 6 19 14 3 3 11
11 15 1 15 10 6 9 18
2 13 6 8 18 4 2 14
6 19 18 4 11 12 20 19
3 17 5 18 20 4 3 2
8 10 18 18 15 1 7 3
1 3 4 5 2 2 15 4
1 3 4 5 2 2 15 4
1 3 4 5 2 2 15 4
11 11 15 15 10 10 3 19
8 11 2 2 10 12 3 4
6 14 9 9 13 8 12 15
6 13 13 15 6 6 14 8
13 16 13 12 17 19 6 15
17 7 16 9 1 17 16 17
5 8 5 17 20 13 16 17
3 3 12 3 1 7 1 12
12 17 10 19 6 3 12 11
17 20 20 13 2 13 11 7
17 19 3 1 6 10 14 18
5 10 11 4 4 16 2 15
17 13 4 2 7 18 9 17
19 10 7 3 6 15 5 16
12 6 12 5 8 13 13 16
19 16 9 7 17 12 14 20
18 3 11 3 12 10 10 4
11 9 9 15 12 19 8 4
1 9 16 17 8 15 6 12
17 18 7 17 15 7 4 6
19 2 20 15 4 11 16 7
17 14 18 14 14 9 3 20
16 16 1 11 4 6 6 12
15 10 4 18 4 15 19 18
7 17 6 10 12 9 18 16
20 7 2 10 19 5 6 2
12 18 10 19 2 13 16 17
17 5 7 2 14 20 4 5
16 16 2 7 17 18 8 13
12 6 16 10 14 15 15 15
9 7 16 17 5 10 15 17
6 3 10 17 20 18 4 11
3 9 17 4 6 13 13 1
6 9 16 4 7 20 10 2
10 8 1 19 1 7 11 12
17 9 17 17 2 8 7 18
4 16 2 2 1 12 19 20
2 9 10 16 1 9 2 12
10 4 14 9 5 14 9 20
16 6 13 7 9 13 4 1
20 8 16 11 10 12 17 9
4 9 3 11 7 2 6 14
10 1 5 6 8 12 12 12
9 17 2 1 1 13 7 19
1 5 15 6 20 15 1 2
20 10 4 19 5 20 10 15
1 10 10 7 5 5 20 6
12 2 16 30 5 2 6 14
13 12 12 11 19 2 3 11
19 8 5 6 13 1 14 9
5 17 4 16 19 3 5 15
19 14 16 13 17 3 4 20
12 14 9 11 18 5 19 6
14 18 14 9 60 18 15 13
3 14 13 1 13 16 9 1
1 11 16 18 15 2 15 4
5 20 8 19 5 20 11 17
3 14 19 3 9 6 19 7
14 4 6 5 17 3 6 6
12 5 13 10 5 20 3 17
11 18 11 2 19 12 3 7
11 10 11 5 14 3 15 5
2 19 12 18 10 2 9 20
5 6 3 19 20 10 8 12
1 3 4 5 2 2 15 4
1 3 4 5 2 2 15 4
8 13 16 14 6 4 10 18
16 2 16 9 1 8 5 14
15 3 13 6 2 2 20 12
6 1 10 11 12 20 13 5
17 2 12 14 8 15 3 5
14 4 18 7 18 11 5 6
20 5 20 7 19 17 3 12
6 3 11 7 4 5 13 5
4 4 13 9 1 18 13 3
10 14 14 7 4 16 13 4
9 16 8 8 2 14 16 11
17 13 20 13 19 12 13 20
7 10 20 13 14 19 8 12
5 19 20 3 10 12 6 15
2 6 9 2 12 2 19 8
18 2 7 20 2 3 19 14
2 20 6 18 7 18 2 6
7 5 19 14 18 8 2 7
15 3 14 9 6 12 13 1
4 6 7 15 5 13 5 13
12 9 3 9 12 7 15 15
1 19 4 1 18 14 16 17
18 11 13 6 7 16 17 12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment