JSFiddle - React, Tailwind, and code Playground

by Michael Perrenoud

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<h1>Sales</h1>

<div id="chart"></div>

CSS

path {
    fill: none;
    fill-opacity: 0.7;
}
#chart {
    height: 400px;
}
#chart>svg {
    width: 100%;
    height: 100%;
    stroke: black;
    fill: none;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}
.axis text {
    font-family:'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
    font-size: 13px;
}

JavaScript

var $chart = $('#chart');
var isInitialized = false;

var margin = {
    top: 20,
    right: 20,
    bottom: 40,
    left: 40
};
var w = $chart.innerWidth() - margin.left - margin.right;
var h = $chart.innerHeight() - margin.top - margin.bottom;

var svg = d3.select('#chart')
    .append('svg')
    .classed('chart', true)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

var path = svg.append('path');

updateChart({
    "1": 567.5,
        "2": 1076.25,
        "3": 436.5,
        "4": 3420,
        "5": 1412,
        "6": 1485,
        "7": 0,
        "8": 0,
        "9": 0,
        "10": 0,
        "11": 0,
        "12": 0
});

function updateChart(data) {
    var keys = _.filter(_.keys(data), function (key) {
        return !key.startsWith('$');
    });
    var months = _.map(keys, function (key) {
        return parseInt(key);
    });
    var sales = _.values(_.pick(data, keys));

    var _data = _.map(sales, function (val, idx) {
        return {
            month: idx + 1,
            sales: val
        }
    });

    console.log('months', months);
    console.log('sales', sales);
    console.log('_data', _data);

    var xTickValues = _data.length === 12 ? ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"] : ["1Q", "2Q", "3Q", "4Q"];

    var xScale = d3.scale.linear()
        .domain(d3.extent(months))
        .range([margin.left, w - margin.right]);

    var xAxis = d3.svg.axis()
        .scale(xScale)
        .ticks(_data.length)
        .tickFormat(function (d, i) {
        return xTickValues[i];
    })
        .orient('bottom');

    if (!isInitialized) {
        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0, ' + (h - (margin.bottom / 2)) + ')')
            .call(xAxis);
    } else {
        svg.select('g.x.axis')
            .transition()
            .duration(1500)
            .ease('sin-in-out')
           ...