Skip to content

Instantly share code, notes, and snippets.

@roveo
Last active Jan 4, 2016
Embed
What would you like to do?
Training stream graph
<!DOCTYPE html>
<html>
<head>
<style>
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
stroke-width: 1.1;
opacity: .2
}
.x.axis path {
opacity: 0
}
.y.axis path {
opacity: 0
}
.x.axis text {
opacity: 0
}
.y.axis text {
font-family: Georgia;
font-size: 14px;
opacity: .7
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 800,
height = 500;
var svg = d3.select('body').append('svg');
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height-10, 0]),
z = d3.scale.category10() //ordinal().range(colorbrewer['Blues'][6]);
var format = d3.time.format('%m/%d/%y');
function prepareData(data) {
data.forEach(function (d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
var nest = d3.nest()
.key(function (d) { return d.key });
var stack = d3.layout.stack().offset('silhouette')
.values(function (d) { return d.values })
.x(function (d) { return d.date })
.y(function (d) { return d.value });
return stack(nest.entries(data));
}
d3.csv('//nemetz.devg.ru/d3/stream.csv', function (data) {
var layers = prepareData(data);
x.domain(d3.extent(data, function (d) { return d.date }));
y.domain([0, d3.max(data, function (d) { return d.y0 + d.y })]);
var area = d3.svg.area()
.interpolate('monotone')
.x(function (d) { return x(d.date) })
.y0(function (d) { return y(d.y0) })
.y1(function (d) { return y(d.y0 + d.y) });
svg.selectAll('.layer')
.data(layers)
.enter()
.append('path')
.attr('class', 'layer')
.attr('d', function (d) { return area(d.values) })
.attr('stroke', 'white')
.attr('fill', function (d, i) { return z(i) })
.attr('opacity', .75);
var xAxis = d3.svg.axis()
.scale(x)
.orient('top')
.tickSize(20)
.ticks(100);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickSize(20)
.ticks(10);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(60, 260)')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(50, 0)')
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment