JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

HTML

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

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;//заливка
    stroke-width: 1px;
    shape-rendering: crispEdges;
    //рисуем точные края
}
.axis text{
    fill: black;
    stroke-width: 2px;
}

JavaScript

//var tooltip = d3.select("body")
//    .append("div")
//    .style("position", "absolute")
//    .style("z-index", "10")
//    .style("visibility", "hidden")
//    .text("a simple tooltip");


//делаем оступы
var margin = {top: 20, right: 40, bottom: 30, left: 30}
var width = 600 - 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-10, 0])

d3.csv('http://nemetz.devg.ru/d3/stream.csv', function(data){
                   // console.log(data)

    
    //добавляем новый элемент
    var newNumber = { key:'RI',value:0.07,date:'02/01/13'}
    data.push(newNumber);
    var newNumber1 = { key:'AR',value:0.07,date:'02/01/13'}
    data.push(newNumber1);
    var newNumber2 = { key:'DJ',value:0.07,date:'02/01/13'}
    data.push(newNumber2);
    var newNumber3 = { key:'MS',value:0.07,date:'02/01/13'}
    data.push(newNumber3);
    var newNumber4 = { key:'RC',value:0.07,date:'02/01/13'}
    data.push(newNumber4);
    var newNumber5 = { key:'CG',value:0.07,date:'02/01/13'}
    data.push(newNumber5);    
    
var format=d3.time.format('%m/%d/%y')

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 })

    .offset('expand')//zero, sillhoutte

function prepareData(){
    data.forEach(function(d) {
        d.date = format.parse(d.date)
        d.value= Number(d.value)                                
        //console.log(d)
    })
    //console.log(stack(nest.entries(data)))
        return stack(nest.entries(data))
    }   
        var layers...