JSFiddle - React, Tailwind, and code Playground

by tpew

HTML

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

CSS

.axis path,
.axis line{ /*веритикальные тики*/
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

var format = d3.time.format('%m/%d/%y');
    var width = 600;
    var height = 400;
    var x = d3.time.scale().range([0, width]);
    var y = d3.scale.linear().range([height-10, 0]);
    var z = d3.scale.ordinal().range(colorbrewer['RdBu'][6]);
    
var margin = {top: 20, right:10, bottom:20, left: 30}

var width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var axiswidth = 500 + margin.rigth + margin.left,
    axisheight = 600 + 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 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') //чтобы было плавно
   


    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() // устанавливает y0
            .values(function(d) { return d.values })
            .x(function(d) { return d.date })
            .y(function(d) { return d.value })
            .offset("wiggle") //выравнивание
           
       
    
        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 })]);

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


var xAxis =...