JSFiddle - React, Tailwind, and code Playground

by skeller88

HTML

<div class="chartWrapper">
    <h2>2014 sales: variance from plan</h2>
    <div id="chart"></div>
</div>

CSS

h2, text {
    font-family: "Helvetica", sans-serif;
}

.bar.negative {
    fill: rgb(240, 126, 110);
}

.bar.positive {
    fill: rgb(140, 140, 140);
}

.axis path {
    stroke: none;
    fill: none;
}

.baseline {
    stroke: black;
}

.baseline-label {
    text-anchor: start;
    alignment-baseline: middle;
}

JavaScript

var width = 500;
var height = 300;
var margin = {top: 10, right: 30, bottom: 30, left: 30};

var data = [
    {date: "1", actual: 45, standard: 35},
    {date: "2", actual: 41, standard: 30},
    {date: "Mar", actual: 34, standard: 30},
    {date: "Apr", actual: 23, standard: 30},
    {date: "May", actual: 25, standard: 30},
    {date: "Jun", actual: 25, standard: 35},
    {date: "Jul", actual: 27, standard: 35},
    {date: "Aug", actual: 34, standard: 30},
    {date: "Sep", actual: 35, standard: 30},
    {date: "Oct", actual: 31, standard: 35},
    {date: "Nov", actual: 30, standard: 35},
    {date: "Dec", actual: 46, standard: 40}
];

var diffData = data.map(function(d) { return {date: d.date, diff: (d.actual - d.standard)}; });

var xScale = d3.scale.ordinal()
	.domain(diffData.map(function(d) { return d.date; }))
    .rangeRoundBands([margin.left, width - margin.left - margin.right], 0.1);

var yScale = d3.scale.linear()
	.domain(d3.extent(diffData, function(d) { return d.diff; })).nice()
	.range([height - margin.bottom, margin.top]);

var div = d3.select("#chart");

var svg = div.append("svg")
	.attr("width", width)
	.attr("height", height);

var updateSelection = svg.selectAll("rect.bar")
	.data(diffData);

var enterSelection = updateSelection.enter();

enterSelection.append("rect")
	.attr("class", function(d) { return d.diff < 0 ? "bar negative" : "bar positive"; })
	.attr("x", function(d) { return xScale(d.date); })
	.attr("y", function(d) { return yScale(Math.max(0, d.diff)); })
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) { return Math.abs(yScale(d.diff) - yScale(0)); });

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

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

svg.append("line")
	.attr("class", "baseline")
	.attr("y1", yScale(0))
	.attr("y2", yScale(0))
	.attr("x1", margin.left)
	.attr("x2", width - margin.left - margin.right);

svg.append("text")
	.attr("class", "baseline-label")
	.attr("x",...