JSFiddle - React, Tailwind, and code Playground
HTML
<p>So here's those results I was telling you about:</p>
<p class="results">
0.00 0.03 0.10 0.26 0.15 0.07 0.11 0.21 0.09 0.09 0.37 0.37 0.36 0.47 0.24 0.08 0.14 0.25 0.08 0.12 0.38 0.51 0.37 0.11 0.01 0.06 0.09 0.13 0.34 0.36 0.10 0.02 0.04 0.38 0.39 0.10 0.10 0.21 0.15 0.15 0.39 0.37 0.10 0.01 0.03 0.12 0.23 0.22 0.48 0.62 0.25 0.03 0.03 0.02 0.07 0.27 0.52 0.39 0.36 0.35 0.07 0.02 0.11 0.25 0.25 0.24 0.25 0.26 0.13 0.16 0.25 0.11 0.03 0.03 0.02 0.02 0.03 0.02 0.02 0.02 0.02 0.01 0.02 0.03 0.01 0.03 0.03
</p>
<p>They are very interesting.</p>
CSS
canvas{display: inline;}
JavaScript
$(document).ready(function() {
var $results = $(".results");
var values = $results.text().split(" ");
var canvas = $("<canvas>")[0]
var ctx = canvas.getContext("2d");
var graphHeight = 20;
var graphWidth = 4;
ctx.canvas.width = values.length * graphWidth;
ctx.canvas.height = graphHeight;
$results.html(canvas)
for (var i = 0; i < values.length; i++) {
var result = parseFloat(values[i]);
ctx.fillRect(i * graphWidth, (graphHeight - (result * graphHeight)), graphWidth, result * graphHeight);
}
})