JSFiddle - React, Tailwind, and code Playground

by Elliot Stokes

HTML

<body></body>

CSS

svg rect {
			    fill: steelblue;
			}
			.axis text {
			    font: 10px sans-serif;
			}
			.axis path, .axis line {
			    fill: none;
			    stroke: #000;
			    shape-rendering: crispEdges;
			}

JavaScript

(function () {

    var items = [{
        name: "bob",
        value: 19
    }, {
        name: "tim",
        value: 4
    }, {
        name: "chris",
        value: 12
    }, {
        name: "tina",
        value: 22
    }, {
        name: "ryan",
        value: 30
    }];

    var barHeight = 30,
        height = (barHeight * items.length) + 20,
        width = 500,
        xmargin = 50,
        ymargin = 5;

    var svgContainer = d3.select("body").append("svg")
        .attr("width", width + xmargin + 10)
        .attr("height", height + ymargin)
        .append("g")
        .attr("transform", "translate(" + xmargin + "," + ymargin + ")");

    //create a function that will scale the bars properly to fit the space we have
    var x = d3.scale.linear()
        .domain([0, d3.max(items, function (d) {
        return d.value;
    })])
        .range([0, width]);



    var y = d3.scale.ordinal()
        .domain(items.map(function (d) {
        return d.name;
    }))
        .rangeBands([0, height - 20]);

    //create a formatter to make the number look cool
    format = d3.format("02d");

    //Append and then select a g for each of the items in the array
    var bar = svgContainer.selectAll("g")
        .data(items)
        .enter()
        .append("g")
        .attr("transform", function (d, i) {
        return "translate(0," + i * barHeight + ")";
    });

    bar.append("rect")
        .on("mouseover", function(){d3.select(this).style("fill", "gray");})
        .on("mouseout", function(){d3.select(this).style("fill", "steelblue");})
        .attr("height", barHeight - 1)
        .attr("width", 0)
        .transition().delay(function (d, i) {
        return i * 400;
    }).duration(400)
        .attr("width", function (d) {
        return x(d.value);
    });

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

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

    svgContainer.append("g").call(yAxis)
       ...