JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ReportContent_ReportContent" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);">
    <svg></svg>
</div>

CSS

.bullet {
            font: 10px sans-serif;
        }
        .bullet .marker {
            stroke: #000;
            stroke-width: 2px;
        }
        .bullet .tick line {
            stroke: #666;
            stroke-width: .5px;
        }
        .bullet .range.s0 {
            fill: #eee;
        }
        .bullet .range.s1 {
            fill: #ddd;
        }
        .bullet .range.s2 {
            fill: #ccc;
        }
        .bullet .measure.s0 {
            fill: lightsteelblue;
        }
        .bullet .measure.s1 {
            fill: steelblue;
        }
        .bullet .title {
            font-size: 14px;
            font-weight: bold;
        }
        .bullet .subtitle {
            fill: #999;
        }

JavaScript

(function () {

    // Chart design based on the recommendations of Stephen Few. Implementation
    // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
    // http://projects.instantcognition.com/protovis/bulletchart/
    d3.bullet = function () {
        var orient = "left", // TODO top & bottom
            reverse = false,
            duration = 0,
            ranges = bulletRanges,
            markers = bulletMarkers,
            measures = bulletMeasures,
            width = 380,
            height = 30,
            tickFormat = null;

        // For each small multiple…
        function bullet(g) {
            g.each(function (d, i) {
                var rangez = ranges.call(this, d).slice().sort(d3.descending),
                    markerz = markers.call(this, d).slice().sort(d3.descending),
                    measurez = measures.call(this, d).slice().sort(d3.descending),
                    g = d3.select(this);

                // Compute the new x-scale.
                var x1 = d3.scale.linear()
                    .domain([0, Math.max(rangez[0], markerz[0], measurez[0])])
                    .range(reverse ? [width, 0] : [0, width]);

                // Retrieve the old x-scale, if this is an update.
                var x0 = this.__chart__ || d3.scale.linear()
                    .domain([0, Infinity])
                    .range(x1.range());

                // Stash the new scale.
                this.__chart__ = x1;

                // Derive width-scales from the x-scales.
                var w0 = bulletWidth(x0),
                    w1 = bulletWidth(x1);

                // Update the range rects.
                var range = g.selectAll("rect.range")
                    .data(rangez);

                range.enter().append("rect")
                    .attr("class", function (d, i) {
                    return "range s" + i;
                })
                    .attr("width", w0)
                    .attr("height", height)
             ...