Мимидав

by Kate Mokhova

HTML

<script src='http://d3js.org/d3.v3.js'></script>
<script src='http://d3js.org/colorbrewer.v1.js'></script>

CSS

svg
{
   width:100%;
   height: 2000px;
}
.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;
}

JavaScript

var 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'][11]);

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) 
        {
           ...