JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;
    /* We'll override this later */
    background-color: teal;
    margin-left:2px;
}
svg
{
    background:#ecf0f1
}
}

JavaScript

$(document).ready(function () {
    var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
    11, 12, 15, 20, 18, 17, 16, 18, 23, 25];

    //Width and height
    var w = 500;
    var h = 150;
    var barPadding = 1; // <-- New!

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
    ;

    function calcHeight(d) {
        return d * 4;
    };
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function (d) {
        return d * 4;
    })
        .attr("x", function (d, i) {
        return i * (w / dataset.length);
    })
        .attr("y", function (d) {
        return h - d * 4;
    }).attr("fill", function (d) {
        return "#c0392b";
    })
        .attr("data-toggle", "tooltip")
        .attr("data-placement", "top");

    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function (d) {
        return d;
    }).attr("x", function (d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
        .attr("y", function (d) {
        return h - (d * 4) + 14;
    }).attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white")
        .attr("text-anchor", "middle");


    $("[data-toggle='tooltip']").tooltip(); 
});