JSFiddle - React, Tailwind, and code Playground

by jlaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
	<div id="test">
	</div>
	<div id="vis">
	</div>

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.ordinal();
        this.yScale = d3.scale.linear().domain([-100, 100]);
        // y scales for the seperate axis
        this.topYScale = d3.scale.linear().domain([0, 100]);
        this.bottomYScale = d3.scale.linear().domain([0, -100]);
        
        // Axis
        this.xAxis = d3.svg.axis()
            .scale(this.xScale)
    		.orient('bottom');
        this.topYAxis = d3.svg.axis()
    		.orient('left')
        	.ticks(4);
        this.bottomYAxis = d3.svg.axis()
    		.orient('left')
        	.ticks(4);
                
        // Other sections
        this.selection.append('rect')
        	.classed('labelBar', true);
        this.selection.append('text')
        	.classed('barLabel', true);
        this.selection.append('g')
            .classed('xAxis', true);
        this.selection.append('g')
            .classed('yTopAxis', true);
        this.selection.append('g')
            .classed('yBottomAxis', true);
        
		this.selection.append('defs')
         .append('pattern')
         .attr('id', 'locked2')
         .attr('patternUnits', 'userSpaceOnUse')
         .attr('width', 8)
         .attr('height', 8)
         .classed('projectedPattern', true)
         .append('image')
         .attr('xlink:href', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAARUlEQVQYV43OwQ0AIAgEQamSGqlSsyaYqIDy4TPcIarazUxaMZgScAtiP5NANKbQk/ytEJ4orI7QBTO0wQot+EIT/iDgAHBpKBOOUGgeAAAAAElFTkSuQmCC')
        ...