JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<h4 class="kpiTitle"></h4>
        <div class="well">
            <div class="kpi"></div>
        </div>

JavaScript

var margin = { top: 0, right: 0, bottom: 0, left: 0 };
        var width = 950 - margin.left - margin.right,
            height = 70 - margin.top - margin.bottom;

        d3.json("https://dl.dropboxusercontent.com/u/23726217/kpi.json", function (error, jsondata) {
            
            var xScale = d3.scale.linear()
                .domain([0, d3.max(jsondata.kpi, function (d) { return d.id +.5 ; })])
                .range([0, width - 200]);

            var yScale = d3.scale.linear()
                .range([height, 0]);

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

            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
            
            //place the left graph
            var svg = d3.select(".kpi").append("svg").attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            var colors = ["gray","green","yellow","red"];

            var heatmapColor = d3.scale.threshold()
               .domain([1,33.3, 66.7])
               .range(colors);

            var getData = d3.extent(jsondata.kpi, function (d) { return +d.status });
           // var c = d3.scale.linear().domain(getData).range([0, 1]);            

                  var animationDur2 = 2000;

                  var kpi = svg.selectAll("rect")
                     .data(jsondata.kpi)
                     .enter()
                      //.append("svg:a")
                          //.attr("xlink:href", (function (d) { return d.url }))
                      .append("rect")
                         .attr("width", 80)
                         .attr("height", 30)
                         .attr("x", function (d) { return xScale(d.id) })
                         .attr("y", 15 )
                          .attr("rx",...