JSFiddle - React, Tailwind, and code Playground

by friek2k

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
    <div id="graph">
    </div>

CSS

body {


    font: 10px sans-serif;


}


.axis path, .axis line {


    fill: none;


    stroke: #000;


    shape-rendering: crispEdges;


}


.bar {


    fill: steelblue;


}


.x.axis path {


    display: none;


}

JavaScript

var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .rangeRound([height, 0]);

    var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

    var svg = d3.select("#graph").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 data = [{
        'UniqueCodeOrIdentifier' : "Test",
        'Cleared':150
        'Occured':300
    },{
        'UniqueCodeOrIdentifier' : "Test2",
        'Cleared':70
        'Occured':3000
    }];
    /*
    d3.csv('@Url.Action("FleetStateInfoGraphData","StateInfo")', function (error, data) {
        */
        color.domain(d3.keys(data[0]).filter(function (key) {
            return key !== "UniqueCodeOrIdentifier";
        }));
        debugger;
        data.forEach(function (d) {
            var y0 = 0;
            d.ages = color.domain().map(function (name) {
                return {
                    name: name,
                    y0: y0,
                    y1: y0 += +d[name]
                };
            });
            d.total = d.ages[d.ages.length - 1].y1;
        });

        data.sort(function (a, b) {
            return b.total - a.total;
        });

        x.domain(data.map(function (d) {
            return d.State;
        }));
        y.domain([0, d3.max(data, function (d) {
            return d.total;
        })]);

        svg.append("g")
        .attr("class", "x...