JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Allocated budget weights</h3>
<div id="weights"></div>
<hr>
<h3>Averaged preferences: Serving Members</h3>
<div id="choices-0"></div>
<h3>Averaged preferences: Regional Development</h3>
<div id="choices-1"></div>
<h3>Averaged preferences: Global Collaboration</h3>
<div id="choices-2"></div>
<h3>Averaged preferences: Corporate</h3>
<div id="choices-3"></div>

CSS

svg rect.value {
    fill: steelblue;
}

svg rect.error {
    fill: darkred;
    fill-opacity: 0.3;
}

svg text.value {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
}

svg text.value.zero {
    fill: black;
}

svg text.label {
    fill: black;
    font: 10px sans-serif;
    text-anchor: end;
}

svg text.tick {
    fill: black;
    font: 10px sans-serif;
    text-anchor: middle;
    alignment-baseline: top;
}

svg line {
    stroke-width: 0.5px;
    stroke: black;
    stroke-opacity: 0.5;
}

JavaScript

var report = 
{"ByronEllacott":{"weights":[20.7959183692932,7.68387447632922,21.7242904063307,49.7959167480469],"choices":[[0,1,2,3],[0,1,2],[0,1,2],[0,1,2,3]]},"SanjayaSanjaya":{"weights":[70.0408264160156,9.97957763671875,9.97959594726563,10],"choices":[[0,3,1,2],[2,1,0],[0,1,2],[0,1,2,3]]}};

function stat() {
    var my = function() {};
    
    var n = 0,
        mean = 0,
        M2 = 0;
    
    my.add = function(v) {
        n++;
        delta = v - mean;
        mean += delta / n;
        M2 += delta * (v - mean);
    };
    
    my.mean = function() { return mean; };
    my.stddev = function() { return Math.sqrt(M2/n); };
    
    return my;
};

var weights = [stat(), stat(), stat(), stat()];
var choices = [
    [stat(), stat(), stat(), stat()],
    [stat(), stat(), stat()],
    [stat(), stat(), stat()],
    [stat(), stat(), stat(), stat()]
];

for (var user in report) {
    var record = report[user];
    for (var i = 0; i < 4; i++) {
        weights[i].add(record.weights[i]/100);
        
        for (var j = 0; j < choices[i].length; j++) {
            choices[i][record.choices[i][j]].add(choices[i].length - 1 - j);
        }
    }
}

function barReport(elem, data, width, barHeight, fmt, labels) {
    var labelSpace = 160;
    var maxdev = d3.max(data, function(d) { return d.stddev(); });
    var scale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d.mean() + d.stddev(); })])
        .range([0, width-labelSpace]);
    var x = function(d) { return scale(d.mean()); };

    var svg = elem.append('svg')
        .attr('width', width)
        .attr('height', barHeight * data.length);

    var bar = svg.selectAll("g").data(data).enter()
        .append("g")
        .attr("transform", function(d, i) { return "translate(0, " + i * 20 + ")"; });

    bar.append("rect")
        .classed("value", true)
        .attr("x", labelSpace)
        .attr("width", x)
        .attr("height", barHeight - 1);

    bar.append("rect")
       ...