JSFiddle - React, Tailwind, and code Playground

statiSquare http://www.zhereicome.com/experiments/statics/statisquares/

by Jennifer Perrin

HTML

<div id="example-6" class="single-example">
	<span class="statiSquare-value">10%</span>
	<span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
    <span class="statiSquare-value">10%</span>
</div>

CSS

body { margin: 100px; }

.statiSquare-single {
    overflow:hidden;
}
.statiSquare-map {
    position:absolute;
    outline:1px solid #fff;
}
.statiSquare-map:hover {
    box-shadow:0 0 10px 0 rgba(0, 0, 0, .7);
}
.statiSquare-bars {
    outline:1px solid #fff;
    float:left;
}
.statiSquare-bars:hover {
    box-shadow:0 0 10px 0 rgba(0, 0, 0, .7);
}
.value-label {
    padding:5px;
    color:#fff;
    font-size:10px;
    display:block;
    background:rgba(0, 0, 0, .7);
    cursor:default;
}

JavaScript

(function ($) {
    $.fn.statiSquare = function (options, method) {

        //SOME DEFAULTS
        var settings = $.extend({
            'width': 400,
                'height': 200,
                'responsive': false,
                'hasValue': false,
                'type': 'blocks',
                'theme': 'random',
                'sort': 'ascendant',
                'strokeWidth': 10
        }, options);

        //METHODS
        var methods = {
            init: function () {
                var element = $(this);
                var innerElement = $(this).find('.statiSquare-value');
                var valuesArray = new Array();
                var total = 0;

                element.find('.statiSquare-value').each(function () {
                    value = parseInt($(this).html().replace("%", ""));
                    total += value;
                    valuesArray.push(value);
                });

                // Convert to percentage if total is not 100
                if (total != 100) {
                    for (var i = 0; i < valuesArray.length; i++) {
                        valuesArray[i] = Math.round(valuesArray[i] / total * 100);
                    }
                }

                //sort elements if requested
                if (settings.sort == "descendant") {
                    for (var i = 0; i < valuesArray.length; i++) {
                        valuesArray.sort().reverse();
                    }
                } else if (settings.sort == "ascendant") {
                    for (var i = 0; i < valuesArray.length; i++) {
                        valuesArray.sort();
                    }
                }

                innerElement.remove();

                if (settings.responsive) {
                    element.css('width', '100%');
                    element.append("<div class='statiSquare-single'></div>").css({
                        'width': '100%',
                            'height': settings.height
                   ...