JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div id="tri-interp-m2" class="tri-int-div">
    <svg class="tri-interp-svg" width="300px" height="300px">
        <line style="stroke: steelblue; stroke-width: 4" x1="150" y1="50" x2="50" y2="250"></line>
        <line style="stroke: steelblue; stroke-width: 4" x1="150" y1="50" x2="250" y2="250"></line>
        <line style="stroke: steelblue; stroke-width: 4" x1="50" y1="250" x2="250" y2="250"></line>
        <line id="tri-interp-m2-l1" style="stroke: grey; stroke-width: 3.5px;" x1="150" y1="50" x2="150" y2="150"></line>
        <line id="tri-interp-m2-l2" style="stroke: grey; stroke-width: 2.25px;" x1="50" y1="250" x2="150" y2="150"></line>
        <line id="tri-interp-m2-l3" style="stroke: grey; stroke-width: 2.25px;" x1="250" y1="250" x2="150" y2="150"></line>
        <circle style="stroke: red; stroke-width: 4; fill: white;" cx="150" cy="50" r="10"></circle>
        <circle style="stroke: green; stroke-width: 4; fill: white;" cx="50" cy="250" r="10"></circle>
        <circle style="stroke: purple; stroke-width: 4; fill: white;" cx="250" cy="250" r="10"></circle>
        <text style="fill: steelblue; font-size: 20px; font-weight: bold;" x="175" y="55">Good</text>
        <text style="fill: steelblue; font-size: 20px; font-weight: bold;" x="10" y="220">Fast</text>
        <text style="fill: steelblue; font-size: 20px; font-weight: bold;" x="240" y="220">Cheap</text>
        <text id="tri-interp-m2-w1" style="text-anchor: middle; fill: steelblue; font-size: 15px; font-weight: bold;" x="150" y="30">50%</text>
        <text id="tri-interp-m2-w2" style="text-anchor: middle; fill: steelblue; font-size: 15px; font-weight: bold;" x="50" y="280">25%</text>
        <text id="tri-interp-m2-w3" style="text-anchor: middle; fill: steelblue; font-size: 15px; font-weight: bold;" x="250" y="280">25%</text>
        <circle id="tri-interp-m2-p" style="stroke: steelblue; stroke-width: 2; fill:...

CSS

.tri-int-div {
    border: 1px solid grey;
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.tri-int-svg {
    border: 1px solid grey;
    width: 300px;
    height: 300px;
}

JavaScript

var plot_point = function(svg, x, y, color) {
    var k = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    k.setAttribute("x", x);
    k.setAttribute("y", y);
    k.setAttribute("width", "1");
    k.setAttribute("height", "1");
    k.setAttribute("style", "fill: " + color);
    svg.appendChild(k);
}

var calc_barycentric_weights = function(x, y, v1x, v1y, v2x, v2y, v3x, v3y) {
    var w_v1=(x*(v3y-v2y)+v2x*(y-v3y)+v3x*(v2y-y))/(v1x*(v3y-v2y)+v2x*(v1y-v3y)+v3x*(v2y-v1y));
    var w_v2=-(x*(v3y-v1y)+v1x*(y-v3y)+v3x*(v1y-y))/(v1x*(v3y-v2y)+v2x*(v1y-v3y)+v3x*(v2y-v1y));
    var w_v3 = 1.0 - w_v1 - w_v2;

    return [w_v1, w_v2, w_v3];
}

function updateBarGraph(good, fast, cheap) {
    var barGraph = document.getElementById("bar-graph");
    var barGood = document.getElementById("bar-good");
    var barFast = document.getElementById("bar-fast");
    var barCheap = document.getElementById("bar-cheap");

    barGood.style.height = good * 100 + "px";
    barFast.style.height = fast * 100 + "px";
    barCheap.style.height = cheap * 100 + "px";

    barGood.style.transform = "translateY(" + (100 - good * 100) + "px)";
    barFast.style.transform = "translateY(" + (100 - fast * 100) + "px)";
    barCheap.style.transform = "translateY(" + (100 - cheap * 100) + "px)";
}

function createBarChart() {
    var ctx = document.getElementById('bar-chart').getContext('2d');
    return new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Good', 'Fast', 'Cheap'],
            datasets: [{
                label: '%',
                data: [50, 25, 25],
                backgroundColor: ['red', 'green', 'purple']
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
}

var barChart =...