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 + interpolation, layout offset & axes
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 width = 600 - margin.left - margin.right | |
var height = 400 - 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', width + margin.left + margin.right) | |
.attr('height', height + margin.top + margin.bottom) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') | |
d3.csv('http://nemetz.devg.ru/d3/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> |