Skip to content

Instantly share code, notes, and snippets.

@glassira
Last active Jan 4, 2016
Embed
What would you like to do?
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>
<body>
<style>
.axis path,
.axis line{
fill:none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
<script src='http://d3js.org/colorbrewer.v1.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 30, bottom: 30, left: 30}
var format = d3.time.format('%m/%d/%y')
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 z = d3.scale.ordinal().range(colorbrewer['Spectral'][6])
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(y);
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 + ')')
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('http://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 })])
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 z(i) })
.style('opacity', 0.6)
.on('mouseover', function(d,i){
d3.select(this)
.style('opacity', 1)
//.text(function(d) {return d.key})
})
.on('mouseout', function(d,i){
d3.select(this)
.style('opacity', 0.6)
})
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + width + ', 0)')
.call(yAxis.orient('right'));
svg.append('g')
.attr('class', 'y axis')
.call(yAxis.orient('left'));
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment