JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id='myCanvas' style='background-color: rgba(20,20,20,0.02)'></canvas>

JavaScript

// we want x circles with a total width of 100px all on top of each other. with x padding.
// take total sum of all current values, divide by the chart height, and the preferred padding.


// --------------------- ABOVE IS CUSTOM ARRAYS (NOT THE PROGRAM) ----------------------- //
function drawBubbles(obj) {
    function findNumberKeys(directive) {
        return Object.keys(directive).length; // returns numberKeys
    } // using return instead of a variable
    // find the number of object keys under the obj.array directive in this case.


    function createComposite() {
        compositeArray = [];
        for (comp_inc = 0; comp_inc < findNumberKeys(obj.array); comp_inc++) {
            compositeArray[comp_inc] = obj.array[comp_inc]; // always labelled compositeArray
        }
    } // creates a composite array of all arrays put in the object
    createComposite();

    function findSum(array, position) {
        total = 0;
        for (sum_inc = 0; sum_inc < array.length; sum_inc++) {
            total += array[sum_inc][position];
        }
        return total;
    } // find the sum of all array's same element (array[x][element])
    // this does NOT get an array sum, and is dependent on the arrays working where each element is the same time.

    function findMultiplier(total, width) {
        return (width / total) * (1 - obj.settings.padding.paddingTop);
    } // find the correct multiplier for the viewframe

    function getRadius(array, position) {
        return findMultiplier(findSum(compositeArray, position), window.innerHeight) * compositeArray[array][position] / 2;
    } // find the actual radius from the multiplier and the actual radius.

    function initializeYOffset() {
        yOffset = 0;
    } // initialize the yOffset in loops

    function yOffsetCounter(array, position) {
        if (array === -1) {
            yOffset += 0;
        } // don't count the first one because the first cicle should be touching the top.
        if (array >= 0)...