Skip to content

Instantly share code, notes, and snippets.

@devgru
Created April 24, 2016 10:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devgru/727eee1c83bf855ef82d4a0f9bbabff7 to your computer and use it in GitHub Desktop.
Save devgru/727eee1c83bf855ef82d4a0f9bbabff7 to your computer and use it in GitHub Desktop.
Simple stream 2016
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
body { font: 10px sans-serif; }
p { font: 12px helvetica; }
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src='http://d3js.org/d3.v3.js'></script>
<script src='http://d3js.org/colorbrewer.v1.js'></script>
<script>
var format = d3.time.format('%m/%d/%y')
var margin = {
top: 20,
right: 40,
bottom: 30,
left: 30
}
var fullWidth = 600
var fullHeight = 400
var width = fullWidth - margin.left - margin.right
var height = fullHeight - margin.top - margin.bottom
var x = d3.time.scale()
.range([0, width])
var y = d3.scale
.linear()
.range([height - 10, 0])
var color = d3.scale.ordinal()
.range(colorbrewer.Blues[6])
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
var area = d3.svg.area()
.interpolate('cardinal')
.x(function(d) { return x(d.date) })
.y0(function(d) { return y(d.y0) })
.y1(function(d) { return y(d.y0 + d.y) })
var svg = d3.select('body')
.append('svg')
.attr('width', fullWidth)
.attr('height', fullHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
d3.csv('stream.csv', function (d) {
d.date = format.parse(d.date)
d.value = Number(d.value)
return d
}, function (data) {
var nest = d3.nest()
.key(function(d) { return d.key })
nested = nest.entries(data)
var stack = d3.layout.stack()
.offset('silhouette') // wiggle
.values(function(d) { return d.values })
.x(function(d) { return d.date })
.y(function(d) { return d.value })
layers = stack(nested)
x.domain(d3.extent(data, function (d) {
return d.date
}))
y.domain([0, d3.max(data, function (d) {
return d.y0 + d.y
})])
svg.selectAll('.layer')
.data(layers)
.enter()
.append('path')
.attr('class', 'layer')
.attr('d', function (d) {
return area(d.values)
})
.style('fill', function (d, i) {
return color(i)
})
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
})
</script>
key value date
AR 0.1 01/08/13
AR 0.15 01/09/13
AR 0.35 01/10/13
AR 0.38 01/11/13
AR 0.22 01/12/13
AR 0.16 01/13/13
AR 0.07 01/14/13
AR 0.02 01/15/13
AR 0.17 01/16/13
AR 0.33 01/17/13
AR 0.4 01/18/13
AR 0.32 01/19/13
AR 0.26 01/20/13
AR 0.35 01/21/13
AR 0.4 01/22/13
AR 0.32 01/23/13
AR 0.26 01/24/13
AR 0.22 01/25/13
AR 0.16 01/26/13
AR 0.22 01/27/13
AR 0.1 01/28/13
DJ 0.35 01/08/13
DJ 0.36 01/09/13
DJ 0.37 01/10/13
DJ 0.22 01/11/13
DJ 0.24 01/12/13
DJ 0.26 01/13/13
DJ 0.34 01/14/13
DJ 0.21 01/15/13
DJ 0.18 01/16/13
DJ 0.45 01/17/13
DJ 0.32 01/18/13
DJ 0.35 01/19/13
DJ 0.3 01/20/13
DJ 0.28 01/21/13
DJ 0.27 01/22/13
DJ 0.26 01/23/13
DJ 0.15 01/24/13
DJ 0.3 01/25/13
DJ 0.35 01/26/13
DJ 0.42 01/27/13
DJ 0.42 01/28/13
MS 0.21 01/08/13
MS 0.25 01/09/13
MS 0.27 01/10/13
MS 0.23 01/11/13
MS 0.24 01/12/13
MS 0.21 01/13/13
MS 0.35 01/14/13
MS 0.39 01/15/13
MS 0.4 01/16/13
MS 0.36 01/17/13
MS 0.33 01/18/13
MS 0.43 01/19/13
MS 0.4 01/20/13
MS 0.34 01/21/13
MS 0.28 01/22/13
MS 0.26 01/23/13
MS 0.37 01/24/13
MS 0.41 01/25/13
MS 0.46 01/26/13
MS 0.47 01/27/13
MS 0.41 01/28/13
RC 0.1 01/08/13
RC 0.15 01/09/13
RC 0.35 01/10/13
RC 0.38 01/11/13
RC 0.22 01/12/13
RC 0.16 01/13/13
RC 0.07 01/14/13
RC 0.02 01/15/13
RC 0.17 01/16/13
RC 0.33 01/17/13
RC 0.4 01/18/13
RC 0.32 01/19/13
RC 0.26 01/20/13
RC 0.35 01/21/13
RC 0.4 01/22/13
RC 0.32 01/23/13
RC 0.26 01/24/13
RC 0.22 01/25/13
RC 0.16 01/26/13
RC 0.22 01/27/13
RC 0.1 01/28/13
CG 0.1 01/08/13
CG 0.15 01/09/13
CG 0.35 01/10/13
CG 0.38 01/11/13
CG 0.22 01/12/13
CG 0.16 01/13/13
CG 0.07 01/14/13
CG 0.02 01/15/13
CG 0.17 01/16/13
CG 0.33 01/17/13
CG 0.4 01/18/13
CG 0.32 01/19/13
CG 0.26 01/20/13
CG 0.35 01/21/13
CG 0.4 01/22/13
CG 0.32 01/23/13
CG 0.26 01/24/13
CG 0.22 01/25/13
CG 0.16 01/26/13
CG 0.22 01/27/13
CG 0.1 01/28/13
RI 0.1 01/08/13
RI 0.15 01/09/13
RI 0.35 01/10/13
RI 0.38 01/11/13
RI 0.22 01/12/13
RI 0.16 01/13/13
RI 0.07 01/14/13
RI 0.02 01/15/13
RI 0.17 01/16/13
RI 0.33 01/17/13
RI 0.4 01/18/13
RI 0.32 01/19/13
RI 0.26 01/20/13
RI 0.35 01/21/13
RI 0.4 01/22/13
RI 0.32 01/23/13
RI 0.26 01/24/13
RI 0.22 01/25/13
RI 0.16 01/26/13
RI 0.22 01/27/13
RI 0.1 01/28/13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment