JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="input_distribution" width="500" height="50"></canvas>
<div>Temperature = <span id="temp_display"></span></div>
<input id="temp_slider" type="range" min="0.0001" max="20" step="0.0001" value="1"/>
<canvas id="output_distribution" width="500" height="50"></canvas>

CSS

canvas { border: 1px solid #888; }
input { width: 500px; }

JavaScript

function softmax(logits) {
  //find max in logits using reduce
  const maxLogit = logits.reduce((a, b) => Math.max(a, b), -Infinity);
  const scores = logits.map((l) => Math.exp(l - maxLogit));
  const denom = scores.reduce((a, b) => a + b);
  return scores.map((s) => s / denom);
}

function drawDistribution(canvas, dist, temp = 1) {
  
	const ctx = canvas.getContext("2d");
  const canvas_width = canvas.width;
  const canvas_height = canvas.height;

	dist = dist.map((s) => s / temp);
  dist = softmax(dist);
  dist = dist.map((s) => s * canvas_width);

	let x = 0;
  fills = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
  ctx.strokeStyle = "#000";
  for(const [idx, val] of Object.entries(dist)) {
  	ctx.fillStyle = fills[idx];
		ctx.fillRect(x, 0, val, canvas_height);
    ctx.strokeRect(x, 0, val, canvas_height);
    x += val;
  }
}

let input_distribution = [1, 5, 4, 6, 7, 0.1, 0.2];


drawDistribution(document.getElementById("input_distribution"), input_distribution);


slider = document.getElementById("temp_slider");
drawDistribution(document.getElementById("output_distribution"), input_distribution, slider.value);
document.getElementById("temp_display").innerText = ""+slider.value;
slider.addEventListener("input", (evt) => {
	drawDistribution(document.getElementById("output_distribution"), input_distribution, slider.value);
  document.getElementById("temp_display").innerText = ""+slider.value;
});