JSFiddle - React, Tailwind, and code Playground

by Matthew Vasallo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<svg id="drawing"></svg>

JavaScript

$(document).ready(function() {

    var canvasWidth = 600;
    var canvasHeight = 400;
    
    var ctx = SVG('#drawing').size(canvasWidth, canvasHeight);
    var ballColor = "rgb(63,127,191)";

    var ballDiameter = 40;
    var columns = [];
    var colDx   = Math.floor(canvasWidth / 6);

    
    var drawGrid = function() {
        var dx = Math.floor((canvasHeight - 20) / 4);
        var ht = canvasHeight - 30;

        var lineStart = 60;
        for (var i = 0; i < 5; i++) {
            var txt = ctx.text(String(i * 25).padStart(3, ' ') + "%");
            txt.attr({x: 2, y: ht});
            ctx.line(lineStart, ht, canvasWidth, ht).stroke({width: 1, color: "lightgray"});
            ht -= dx;
        }
    };

    var addCircles2Column = function(colNo, cnt, data) {
        var col = [];
        var score;
        if (data) {
            cnt = data.length;
        }
        for (var i = cnt - 1; i >= 0; i--) {
            if (data) {
                score = data[i];
            } else {
                score = Math.floor(Math.random()*100);
            }
            var item = _.find(col, function(x) {return x.score === score});
            if (!item) {
                item = {score: score, count: 0};
                col.push(item);
            }
            item.count++;
        }

        columns[colNo] = col;
    };

    function clickHandler(item, evt) {
        alert(item.score + ": " + item.count);
    }

    var drawColumn = function(colNo) {
        var x = 80 + colNo * colDx;
        var col = columns[colNo];
        
        for (var i = col.length - 1; i >= 0; i--) {
            var item = col[i];
            var y = canvasHeight - Math.floor(canvasHeight * item.score / 100);
            var c = ctx.circle(ballDiameter).attr({cx: x, cy: y})
                .fill({color: ballColor,
                       opacity: 0.2 * item.count
                      });
            c.click(_.partial(clickHandler, item));
        }
    };


    drawGrid();
   ...