arr-ee/index.html

## index.html
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/colorbrewer.v1.min.js"></script>
    <style>
.axis {
    shape-rendering: crispEdges;
    stroke-width: 2;
}

.axis text {
    font: 10 Helvetica;
}

.x.axis path {
    fill: none;
    stroke: #000;
}

.y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
}
    </style>
  </head>
  <body>
    <script>
var margin = {top: 20, bottom: 20, left: 40, right: 40}
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
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 + ')');
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).tickSize(-height).ticks(d3.time.weeks)
var yAxis = d3.svg.axis().scale(y).ticks(4).orient('left')
var z = d3.scale.ordinal().range(colorbrewer['Set1'][6]);
var format = d3.time.format('%m/%d/%y');

var area = d3.svg.area()
    .x(function (d) {
        return x(d.date)
    })
    .y0(function (d) {
        return y(d.y0)
    })
    .y1(function (d) {
        return y(d.y0 + d.y)
    })
    .interpolate('cardinal')

var prepareData = function (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()
        .values(function (d) {
            return d.values
        })
        .x(function (d) {
            return d.date
        })
        .y(function (d) {
            return d.value
        })

    return stack(nest.entries(data))
}

var stack = d3.csv('//nemetz.devg.ru/d3/stream.csv', function (data) {
    d = 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(d).enter().append('path').attr('opacity', 1)
    .on('mouseover', function(d, i){
        svg.selectAll('.layer').attr('stroke', function(d, j) {
            return i != j ? '' : d3.rgb(z(i)).darker(0.5);
        }).transition().duration(250)
        .attr('opacity', function(d, j) {
            return i != j ? 0.4 : 1
        })
    })
    .on('mouseout', function(d){
     svg.selectAll('.layer').attr('stroke', '').transition().duration(250).attr('opacity', 1)
    })
    .attr('class', 'layer').attr('d', function (d) {
        return area(d.values)
    }).style('fill', function (d, i) {
        return z(i)
    })
    svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis)
    svg.append('g').attr('class', 'y axis').call(yAxis)
})
    </script>
  </body>
</html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
	<style>
	.axis {
	shape-rendering: crispEdges;
	stroke-width: 2;
	}

	.axis text {
	font: 10 Helvetica;
	}

	.x.axis path {
	fill: none;
	stroke: #000;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}
	</style>
	</head>
	<body>
	<script>
	var margin = {top: 20, bottom: 20, left: 40, right: 40}
	var width = document.body.clientWidth - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;
	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 + ')');
	var x = d3.time.scale().range([0, width]);
	var y = d3.scale.linear().range([height, 0]);
	var xAxis = d3.svg.axis().scale(x).tickSize(-height).ticks(d3.time.weeks)
	var yAxis = d3.svg.axis().scale(y).ticks(4).orient('left')
	var z = d3.scale.ordinal().range(colorbrewer['Set1'][6]);
	var format = d3.time.format('%m/%d/%y');

	var area = d3.svg.area()
	.x(function (d) {
	return x(d.date)
	})
	.y0(function (d) {
	return y(d.y0)
	})
	.y1(function (d) {
	return y(d.y0 + d.y)
	})
	.interpolate('cardinal')

	var prepareData = function (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()
	.values(function (d) {
	return d.values
	})
	.x(function (d) {
	return d.date
	})
	.y(function (d) {
	return d.value
	})

	return stack(nest.entries(data))
	}

	var stack = d3.csv('//nemetz.devg.ru/d3/stream.csv', function (data) {
	d = 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(d).enter().append('path').attr('opacity', 1)
	.on('mouseover', function(d, i){
	svg.selectAll('.layer').attr('stroke', function(d, j) {
	return i != j ? '' : d3.rgb(z(i)).darker(0.5);
	}).transition().duration(250)
	.attr('opacity', function(d, j) {
	return i != j ? 0.4 : 1
	})
	})
	.on('mouseout', function(d){
	svg.selectAll('.layer').attr('stroke', '').transition().duration(250).attr('opacity', 1)
	})
	.attr('class', 'layer').attr('d', function (d) {
	return area(d.values)
	}).style('fill', function (d, i) {
	return z(i)
	})
	svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis)
	svg.append('g').attr('class', 'y axis').call(yAxis)
	})
	</script>
	</body>
	</html>