JSFiddle - React, Tailwind, and code Playground

by Blake Dietz

HTML

<div id="root">

CSS

.axis line, .axis path {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.y .axis {
    fill: none;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

var data = {
    "labels": ["This", "Is", "White", "Cloud!"],
        "values": [300, 15, 34, 421, ]
};

draw(data);

function draw(data) {
    var margin = {
        "top": 10,
            "right": 10,
            "bottom": 30,
            "left": 50
    },
    width = 700,
        height = 300;

    var x = d3.scale.ordinal()
        .domain(data.labels.map(function (d) {
        return d;
    }))
        .rangeRoundBands([0, width], .1, 0);


    var y = d3.scale.linear()
        .domain([0, d3.max(data.values)])
        .range([height, 0]);

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

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

    var svgContainer = d3.select("#root").append("svg")
        .attr("class", "chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom).append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.right + ")");

    svgContainer.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate( 0," + height + ")")
        .call(xAxis);

    svgContainer.append("g")
        .attr("class", "y axis").call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Values");

    // Clean up with better attr notation
    var bars = svgContainer.selectAll(".bar").data(data.values).enter().append("rect")
        .attr("class", "bar")
        .attr("fill", "gray")
        .attr("stroke", "blue")
        .attr("stroke-width", "1px")
        .attr("x", function (d, i) {
        return i * x.rangeBand();
    })
        .attr("y", function (d) {
        return y(d);
    })
        .attr("width", function () {
        return x.rangeBand();
    })
        .attr("height", function (d) {
        return height - y(d);
    })
        .on("mouseover", function (d) {
        d3.select(this).attr("fill",...