JSFiddle - React, Tailwind, and code Playground

by jlaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="test"></div>
<button id="small">Small</button>
<button id='large'>Large</button>

CSS

@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/EInbV5DfGHOiMmvb1Xr-hqRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff)...

Babel + JSX

class LayeredBarChart {
    // switch top to false when you want to display a reversed and upside down chart.
    // not sure how we want to map this mentally, but I've done it going from the center out
    constructor(selection) {
        // grab the selection and default a usable selection
        selection = selection || d3.select('body');
        // create the svg
        this.selection = selection.append('svg')
        	.classed('chartContainer', true);

        // initialize bar chart
        // Scales
        this.xScale = d3.scale.linear();
        this.yScale = d3.scale.linear();
    }

    // Helper Functions
    height(value) {
        if (arguments.length === 1) {
            this._height = value;
            this.selection.attr('height', value);
            return this;
        }
        return this._height;
    }

    width(value) {
        if (arguments.length === 1) {
            this._width = value;
            this.selection.attr('width', value);
            return this;
        }
        return this._width;
    }
      
    
    barHeight(value) {
        if (arguments.length === 1) {
            this._bHeight = value;
            return this;
        }
        return this._bHeight;
    }     
    
    barPadding(value) {
        if (arguments.length === 1) {
            this._bPadding = value;
            return this;
        }
        return this._bPadding;
    }
      
    fontSize(value) {
        if (arguments.length === 1) {
            this._fontSize = value;
            return this;
        }
        return this._fontSize;
    }
    
    label(value) {
        if (arguments.length === 1) {
            this._label = value;
            return this;
        }
        return this._label;
    }
    
    leftLabel(value) {
        if (arguments.length === 1) {
            this._leftLabel = value;
            return this;
        }
        return this.leftLabel;
    }
    
    rightLabel(value) {
        if (arguments.length === 1) {
         ...