JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<button id="moveLeft">Move Left</button>
<button id="moveRight">Move Right</button>
    Chrome
<div id="chrome"></div>

CSS

#chrome {
	position: relative;
	float: left;
	width: 640px;
	height: 150px;
	background: skyblue;
}

#firefox {
	position: relative;
	float: left;
	width: 300px;
	height: 400px;
	
	background: pink;
}

.baseLines {
	stroke: black;
	stroke-width: 5;
}

.bars {
	fill: green;
}

JavaScript

/*********************************
			DRAW STUFF
*********************************/
//SET STUFF UP
var chrome = d3.select("#chrome");
var marginX = 20;
var cheight = chrome.node().clientHeight,
    cwidth = chrome.node().clientWidth,
	width = cwidth - marginX*2,
	height = cheight - marginX*2;

var svg1 = d3.select("#chrome").append("svg")
        .attr("width", cwidth)
        .attr("height", cheight)
		// graph range
        .append("g")
		.attr("transform", "translate("+ [marginX, marginX] +")")
		// plot area
		.append("g")
        .datum([width/3, height/2])
	.attr("transform", function(d) {
        return "translate("+ d +")";
    });

var yGroup1 = svg1.append("g")
	.attr("class", "yGroups")
	.attr("id", "yGroup1")

//MAKE BASE LINES
var xRange = width/3,
	leftLine = yGroup1.append("line")
	.attr("class", "baseLines")
	.attr("id", "baseLine1")
	.attr({"x2": xRange});

//MAKE LINE LABELS
yGroup1.append("text")
	.attr("class", "lineLabels")
	.attr("id", "lineLabel1")
	.text(0)
	.attr("dx", "-1em")
	.attr("dy", "0.35em");

//MAKE BARS
var barWidth = 40;
var barHeight = 50;
var data = [{
            "id": "cBarTop", 
            "x": xRange*0.25, 
            "y": -barHeight,
    		stroke: "none"
        },{
            "id": "cBarBot",
            "x": xRange / 2,
            "y": 0,
            stroke: "none"
        }]
    var cBar = svg1.selectAll("rect").data(data);
    cBar.enter().append("rect");
    cBar.attr({
            "class": "bars", 
            "id": attr("id"), 
            "x":attr("x"), 
            "width": barWidth, 
            "y": attr("y"), 
            "height": barHeight,
        	stroke: attr("stroke")
        });

function attr(a){
    // set up a closure on a
	return function(d){return d[a]};
}

/*********************************
			ANIMATIONS
*********************************/
var aniDuration = 700;
var aniEase = "linear";

var leftButton = d3.select("#moveLeft");
var rightButton = d3.select("#moveRight");
leftButton.on("click",...