Mokhova/index.html

## index.html
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Snake</title>
    <script src='http://d3js.org/d3.v3.js'></script>
    <script src='http://d3js.org/colorbrewer.v1.js'></script>


   <style>

.axis path, .axis line {
    fill: none;
    stroke: black;
    /*shape-rendering: crispEdges;*/
    opacity: 0.5;
}

.axis text {
    font-family: sans-serif;
    font-size: 12px;
    opacity: 0.3;
}

svg
{
    padding: 50px;
}


div.tooltip {
  position: absolute;
  width: 60px;
  padding: 4px 4px 4px 8px;
  font: 10pt Helvetica;
  background: #FCD036;
    color: #555;
  border: 0px;
  border-radius: 12px 12px 12px 0px;
  pointer-events: none;
}

.header{
    font-family:'Helvetica Neue';
    fill: #3285B7;
    font-size: 24px;
}

.header:hover{
    fill: red;
}
   </style>
</head>
<body>
<script>
svar format = d3.time.format('%m/%d/%y');
var width = 600;
var height = 450;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height-150, 0]);
var z = d3.scale.ordinal().range(colorbrewer['Spectral'][6]);

var area = d3.svg.area()
    .interpolate('basis') /*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');

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

svg.append('a')
.attr('xlink:href', 'http://music.yandex.ru/#!/track/15801831/album/1722050')
.append('text')
.text('Hello')
.attr('dx', '-30')
.attr('class', 'header');


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()
        .values(function(d) { return d.values })
        .x(function(d) { return d.date })
        .y(function(d) { return d.value });
        return stack(nest.entries(data));
}

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') // wiggle*/
    .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')
    .on('mouseover', function(d,i)
        {
            d3.select(this).attr('opacity', 0.8)
            var key = d.key;
            d3.selectAll('path').style('opacity', 0.8);
            d3.select(this).style('opacity', 1);

            div.transition().duration(200).style("opacity", .9);
            div.html(key)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY) + "px");
        })
    .on('mouseout', function(d,i) {d3.select(this).attr('opacity', 1)})
    .attr('class', 'layer')
    .attr('d', function (d) { return area(d.values) })
    .style('fill', function (d, i) { return z(i) })    ;

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10)

    svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (height-150) + ")")
    .call(xAxis)

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)

    svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (0) + ")")
    .call(yAxis)
});
</script>
</body>
</html>
	<html lang='en'>
	<head>
	<meta charset='utf-8'>
	<title>Snake</title>
	<script src='http://d3js.org/d3.v3.js'></script>
	<script src='http://d3js.org/colorbrewer.v1.js'></script>


	<style>

	.axis path, .axis line {
	fill: none;
	stroke: black;
	/shape-rendering: crispEdges;/
	opacity: 0.5;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	opacity: 0.3;
	}

	svg
	{
	padding: 50px;
	}


	div.tooltip {
	position: absolute;
	width: 60px;
	padding: 4px 4px 4px 8px;
	font: 10pt Helvetica;
	background: #FCD036;
	color: #555;
	border: 0px;
	border-radius: 12px 12px 12px 0px;
	pointer-events: none;
	}

	.header{
	font-family:'Helvetica Neue';
	fill: #3285B7;
	font-size: 24px;
	}

	.header:hover{
	fill: red;
	}
	</style>
	</head>
	<body>
	<script>
	svar format = d3.time.format('%m/%d/%y');
	var width = 600;
	var height = 450;
	var x = d3.time.scale().range([0, width]);
	var y = d3.scale.linear().range([height-150, 0]);
	var z = d3.scale.ordinal().range(colorbrewer['Spectral'][6]);

	var area = d3.svg.area()
	.interpolate('basis') /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');

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	svg.append('a')
	.attr('xlink:href', 'http://music.yandex.ru/#!/track/15801831/album/1722050')
	.append('text')
	.text('Hello')
	.attr('dx', '-30')
	.attr('class', 'header');


	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()
	.values(function(d) { return d.values })
	.x(function(d) { return d.date })
	.y(function(d) { return d.value });
	return stack(nest.entries(data));
	}

	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') // wiggle/
	.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')
	.on('mouseover', function(d,i)
	{
	d3.select(this).attr('opacity', 0.8)
	var key = d.key;
	d3.selectAll('path').style('opacity', 0.8);
	d3.select(this).style('opacity', 1);

	div.transition().duration(200).style("opacity", .9);
	div.html(key)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY) + "px");
	})
	.on('mouseout', function(d,i) {d3.select(this).attr('opacity', 1)})
	.attr('class', 'layer')
	.attr('d', function (d) { return area(d.values) })
	.style('fill', function (d, i) { return z(i) }) ;

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(10)

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (height-150) + ")")
	.call(xAxis)

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10)

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (0) + ")")
	.call(yAxis)
	});
	</script>
	</body>
	</html>