JSFiddle - React, Tailwind, and code Playground

by devgru

HTML

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

CSS

svg {
    width: 100%;
    height: 300px;
}

JavaScript

var url = 'http://nemetz.devg.ru/d3/7mln-2.csv'

d3.csv(url, function (data) {
    data.forEach(function (d) {
        d.cost = Number(d.cost)
        d.count = Number(d.count)
    })
    var costSum = d3.sum(data, function (d) {
        return d.cost
    })
    var countSum = d3.sum(data, function (d) {
        return d.count
    })
    var cost = d3.scale.linear()
        .domain([0, costSum])
        .range([0, 250])
    var count = d3.scale.linear()
        .domain([0, countSum])
        .range([0, 250])
    data = data.map(function (d) {
        return [{
            x: 'cost',
            y: cost(d.cost),
            cost: d.cost
        }, {
            x: 'count',
            y: count(d.count),
            count: d.count
        }]
    })
    d3.layout.stack().offset('silhuette')(data)
    
    var costScale = d3.scale.linear()
        .domain([0, 250])
        .range([50, 200])
    var costEffect = function (d, num) {
        if (d.x == 'cost') 
            return costScale(num)
        return num
    }
    var area = d3.svg.area()
        .interpolate('cardinal')
        .x(function(d) {
            if (d.x == 'cost')
                return 60
            if (d.x == 'count')
                return 250
        })
        .y0(function(d) { return costEffect(d, d.y0) })
        .y1(function(d) { return costEffect(d, d.y0 + d.y) })
    
    var svg = d3.select('body').append('svg')
    svg.selectAll('path')
        .data(data)
        .enter().append('path')
        .attr('d', function (d) { return area(d) })
        .attr('fill', function (d, i) {
            return colorbrewer['Set1']['6'][i]
        })
    
    var texts = svg
        .selectAll('g')
        .data(data)
        .enter()
        .append('g')
    texts.append('text')
        .attr('x', 60)
        .attr('dy', 5)
        .style('text-anchor', 'end')
        .attr('y', function (d) {
            return costEffect(d[0], d[0].y0 + d[0].y / 2)
        })
        .text(function (d) {
           ...