JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
  <div id="main-container">
    <div id="selector-container">
      <div class="toggle-radio">
        <input type="radio" id="good" name="selector" value="good">
        <label for="good">Good</label>
      </div>
      <br>
      <div class="toggle-radio">
        <input type="radio" id="fast" name="selector" value="fast">
        <label for="fast">Fast</label>
      </div>
      <br>
      <div class="toggle-radio">
        <input type="radio" id="cheap" name="selector" value="cheap">
        <label for="cheap">Cheap</label>
      </div>
    </div>
    <div id="triangle-container">
      <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"...

CSS

body {
  background-color: #222;
  color: #f0f0f0;
  font-family: Arial, sans-serif;
}

footer {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
}

#main-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#selector-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33%;
  margin-bottom: 1em;
}

#triangle-container {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#barchart-container {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#bar-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.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;
}
.toggle-radio {
  display: inline-block;
  position: relative;
  padding: 0;
  margin-right: 10px;
  width: 80px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
}

.toggle-radio input {
  display: none;
}

.toggle-radio input:checked + label {
  left: 50%;
}

.toggle-radio label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 30px;
  background-color: #4caf50;
  border-radius: 15px;
  cursor: pointer;
  transition: left 0.3s;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  color: white;
}

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 =...