JSFiddle - React, Tailwind, and code Playground
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.2);
var x1Scale = d3.scale.ordinal()
.domain([0, d3.max(dataset, function (d) { return d.TotalOrders; })])
.rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.2);
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)
...