JSFiddle - React, Tailwind, and code Playground

by aybalasubramanian

HTML

<div id="wrapper1" class="floatLeftClearLeft">
	</div>
  <div id="legend" class="floatLeftClearLeft">
  </div>

CSS

body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 960px;
        height: 500px;
        position: relative;
    }

    svg {
        width: 100%;
        height: 100%;
        position: center;
    }

    .toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }

    text {
        font: 9px sans-serif;
        color: white;
    }
    text.value {
        font-size: 100%;
        fill: white;
    }

    .axisHorizontal path{
        fill: none;
    }

    .axisHorizontal .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, 0.2);
    }

    .bar {
        fill: #012169;
    }
        .bar2 {
        fill: #62b5e5;
    }
        .bar3 {
        fill: #009a44;
    }
        .bar4 {
        fill: #c4d600;
    }
    .categoryWrapper{
      float:left;
      clear:left;
      margin-top:-90px;
      border-top:1px solid #cccccc;
      background:white;
      z-index:80;
    }
    .floatLeftClearLeft{
      float:left;
      clear:left;
    }
    .categoryLegend{
    float:left;
    margin-right: 1em;
    }

JavaScript

data = [
        {label:"Category 1", value:19},
        {label:"Category 2", value:5},
        {label:"Category 3", value:13}
    ];
    legendData = [{label:"Group 1"}
    ];
    
    var max = d3.max(data, function(d) { return d.value; });
    var maxOfAll = max;
    
    var div = d3.select("#wrapper1").append("div").attr("class", "toolTip");
    var axisMargin = 1,
            margin = 40,
            valueMargin = 4,
            width = parseInt(400, 10),
            height = parseInt(250, 10),
            barHeight = 20,
            barPadding = 6,
            data, bar, svg, scale, xAxis,labelWidth;
    
    svg = d3.select('#wrapper1')
            .append("svg")
            .attr("width", width)
            .attr("height", height);
    bar = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g");
    bar.attr("class", "bar")
            .attr("cx",0)
            .attr("transform", function(d, i) {
                return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding + 40) + ")";
            });
    bar.append("text")
            .attr("class", "label")
            .attr("y", barHeight / 2)
            .attr("dy", ".35em") //vertical align middle
            .text(function(d){
                return d.label;
            }).each(function() {
        //labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width +20));
        labelWidth = 80;
    });
    scale = d3.scale.linear()
            .domain([0, maxOfAll])
            .range([0, width - margin*2 - labelWidth]);
    xAxis = d3.svg.axis()
            .scale(scale)
            .tickSize(-height + 2*margin + axisMargin)
            .orient("bottom");
    bar.append("rect")
            .attr("transform", "translate("+labelWidth+", 0)")
            .attr("height", barHeight)
            .attr("width", function(d){
                return scale(d.value);
            });
    bar.append("text")
            .attr("class", "value")
           ...