forked from devgru's block: Simple stream + interpolation, layout offset & axes
forked from devgru's block: Simple stream 2016
forked from devgru's block: Simple stream 2016
forked from devgru's block: Simple stream + interpolation, layout offset & axes
forked from devgru's block: Simple stream 2016
forked from devgru's block: 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 |