JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<div id="searchVolume"></div>

JavaScript

var w = 500;
    var h = 600;
    var MARGINS = { top: 1, right: 20, bottom: 2, left: 50 }
    var colors = [["TotalTicket", "#377EB8"],
                  ["TotalOrders", "#4DAF4A"]];
    var dataset = [{ "Month": "Jan", "TotalOrders": 7324, "TotalTicket": 23954, "Year": "2013", "Avg": "10%" },
                   { "Month": "Feb", "TotalOrders": 3738, "TotalTicket": 12319, "Year": "2013", "Avg": "12%" },
                   { "Month": "March", "TotalOrders": 4466, "TotalTicket": 15524, "Year": "2013", "Avg": "14%" },
                   { "Month": "May", "TotalOrders": 100, "TotalTicket": 200, "Year": "2013", "Avg": "50%" },
                   { "Month": "Oct", "TotalOrders": 109, "TotalTicket": 2000, "Year": "2013", "Avg": "9%" }]

    var x0Scale = d3.scale.ordinal()
                       .domain(d3.range(dataset.length))
                       .rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);
    var x1Scale = d3.scale.ordinal()
                    .domain([0, d3.max(dataset, function (d) { return d.TotalOrders; })])
                    .rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);

    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function (d) { return (d.TotalTicket + 10000); })])
                    .range([h - MARGINS.top, MARGINS.bottom]);
    xAxis = d3.svg.axis().scale(x0Scale).tickSize(5).tickSubdivide(true).orient("bottom");
    yAxis = d3.svg.axis().scale(yScale).tickSize(5).orient("left").tickSubdivide(true);

    var TotalOrders = function (d) {
        return d.TotalOrders;
    };

    var TotalTicket = function (d) {
        return d.TotalTicket;
    };
    var Month = function (d) {
        return d.Month;
    };

    var Average = function (d) {
        return d.Avg;
    };

    var commaFormat = d3.format(',');

    //SVG element
    var svg = d3.select("#searchVolume")
                .append("svg")
                .attr("width", w)
                .attr("height", h)
               ...