JSFiddle - React, Tailwind, and code Playground

by jpraden

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json-editor/1.1.0/jquery-json-editor.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 Page Template</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		<style>

	</head>
	<body>
		<div>
			<div class="btn-group pull-right">
  				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   						 Messages per hour <span class="caret"></span>
 				</button>
  				<ul class="dropdown-menu" role="menu">
   					<li><a class="m" value="2014-02-19" href="#">2014-02-19</a></li>
    				<li><a class="m" value="2014-02-20" href="#">2014-02-20</a></li>
    				<li><a class="m" value="2014-02-21" href="#">2014-02-21</a></li>
    				<li><a class="m" value="2014-02-22" href="#">2014-02-22</a></li>
    				<li><a class="m" value="2014-02-23" href="#">2014-02-23</a></li>
  				</ul>
			</div>

		<div id="mbars">
		</div>
	    </div>
	<script type="text/javascript">
  d3.json("mperday.json",function(json){
			dataset = json;

			//Data, stacked
			stack(dataset);

			dataset = json;
    		</script>
	</body>
</html>

CSS

.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

.dot {
  stroke: #000;
}


.legend {
	            padding: 5px;
	            font: 10px sans-serif;
	            background: yellow;
	            box-shadow: 2px 2px 1px #888;
            }

JavaScript

var w = 600;                        //width
		var h = 500;                        //height
		var padding = {top: 40, right: 40, bottom: 40, left:40};
		var dataset;
		//Set up stack method
		var stack = d3.layout.stack();

		d3.json("mperday.json",function(json){
			dataset = json;

			//Data, stacked
			stack(dataset);

			var color_hash = {
				    0 : ["Invite","#1f77b4"],
					1 : ["Accept","#2ca02c"],
					2 : ["Decline","#ff7f0e"]

			};


			//Set up scales
			var xScale = d3.time.scale()
				.domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
				.rangeRound([0, w-padding.left-padding.right]);

			var yScale = d3.scale.linear()
				.domain([0,				
					d3.max(dataset, function(d) {
						return d3.max(d, function(d) {
							return d.y0 + d.y;
						});
					})
				])
				.range([h-padding.bottom-padding.top,0]);

			var xAxis = d3.svg.axis()
						   .scale(xScale)
						   .orient("bottom")
						   .ticks(d3.time.days,1);

			var yAxis = d3.svg.axis()
						   .scale(yScale)
						   .orient("left")
						   .ticks(10);



			//Easy colors accessible via a 10-step ordinal scale
			var colors = d3.scale.category10();

			//Create SVG element
			var svg = d3.select("#mbars")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			// Add a group for each row of data
			var groups = svg.selectAll("g")
				.data(dataset)
				.enter()
				.append("g")
				.attr("class","rgroups")
				.attr("transform","translate("+ padding.left + "," + (h - padding.bottom) +")")
				.style("fill", function(d, i) {
					return color_hash[dataset.indexOf(d)][1];
				});

			// Add a rect for each data value
			var rects = groups.selectAll("rect")
				.data(function(d) { return d; })
				.enter()
				.append("rect")
				.attr("width", 2)
				.style("fill-opacity",1e-6);


			rects.transition()
			     .duration(function(d,i){
			    	 return 500 * i;
			     })
			     .ease("linear")
			    .attr("x",...