JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://gleap.org/static/special/marriage_viz/standardized_uk_data.js"></script>
<script src="http://gleap.org/static/special/marriage_viz/transformData8.js"></script>
<svg id="visualization"></svg>

CSS

.civil-union-bar {
    fill: #006A3F;
}

.marriage-bar {
    fill: #5AC399;
}

.overall-population-display {
    fill: #BABABA;
}

#visualization {
    width: 700px;
    height: 500px;
}

JavaScript

var WIDTH = 600;
var HEIGHT = 500;
var X_PADDING = 30;
var Y_PADDING = 15;
var BOTTOM_BAR_HEIGHT = 20;
var MIN_YEAR = 2005;
var MAX_YEAR = 2011;
var MAX_POP = 63200000;
var MAX_POP_AGE_BUCKET = 20000000;
var AGE_BUCKET_DISPLAY_SIZE = 50;
var EXPECTED_LGB_PERCENT = 0.06;

var AGE_GROUPINGS = [
    '<25',
    '25-29',
    '30-34',
    '35-39',
    '40-44',
    '45-49',
    '50-54',
    '55-59',
    '>=60'
];


var futureOpenAttr = function (attr, firstFunc) {
    var innerContinuation = null;
    
    var retFunction = function (data) {
        if (firstFunc)
            return firstFunc.continueWith(data);
        else
            return retFunction.continueWith(data);
    };

    retFunction.continueWith = function (data) {
        if (innerContinuation) {
            if (innerContinuation.continueWith)
                return innerContinuation.continueWith(data[attr]);
            else if (innerContinuation)
                return innerContinuation(data[attr]);
        } else {
            return data[attr];
        }
    };
    
    retFunction.thenOpen = function (attr) {
        if (firstFunc)
            innerContinuation = futureOpenAttr(attr, firstFunc);
        else
            innerContinuation = futureOpenAttr(attr, retFunction);
        return innerContinuation;
    };

    retFunction.then = function (continuation) {
        innerContinuation = continuation;
        return function (data) {
            if (firstFunc)
                return firstFunc.continueWith(data);
            else
                return retFunction.continueWith(data);
        };
    };
    
    return retFunction;
};


var futureReduceAcrossAttrs = function (reduceFunc) {
    return function (data) {
        var emitter = createObjectPropertyEmitter(data);
        var reduceVal = 0;
        emitter.each(function (subsetCounts) {
            reduceVal = reduceFunc(reduceVal, subsetCounts);
        });

        return reduceVal;
    };
};


var createAttrSummer = function (attr) {
 ...