JSFiddle - React, Tailwind, and code Playground

HTML

<body></body>

CSS

h1{
			margin-bottom: 0;
		}
		
		p{
			margin-top: 0;
		}
		
		svg {
		  font: 10px sans-serif;
		}
		
		g.context g.brush rect.background{
			fill: rgba(0,0,0,.1);
		}
		
		g.context g.axis path{
			stroke-opacity: 0;
		}
		
		g.context g.axis line{
			stroke-opacity: .1;
		}
		
		g path.chart{
			fill: rgb(127,201,127);
		}

		g path.chart{
			fill: rgb(190,174,212);
		}

		g.Happy path.chart{
			fill: rgb(253,192,134);
		}
		
		
		

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

		.brush .extent {
		 	stroke: #fff;
		 	fill-opacity: .125;
		 	shape-rendering: crispEdges;
		}

		g.context rect.background{
   			fill:rgb(200,200,255);
   			visibility: visible !important;
		}​

JavaScript

var margin = {top: 10, right: 40, bottom: 150, left: 60},
      	width = 940 - margin.left - margin.right,
      	height = 500 - margin.top - margin.bottom,
      	contextHeight = 50;
      	contextWidth = width * .5;
      
var svg = d3.select("body").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", (height + margin.top + margin.bottom));
 var z = d3.scale.ordinal().range(["blue", "red", "orange", "green"]);

//var data = [{"Year":"2011","Happy":"63.4","Sad":"42.7","Angry":"12.2","Surprised":"44.2"},{"Year":"2012","Happy":"75.4","Sad":"32.7","Angry":"78.2","Surprised":"82.2"},{"Year":"2013","Happy":"73.4","Sad":"20.7","Angry":"92.2","Surprised":"75.4"}];
 var parseDate=d3.time.format("%Y-%m-%d %H:%M:%S").parse;
 //var parseDate=d3.time.format("%Y").parse;
var data = [
{"Year":"2011-10-01 20:46:04","Happy":63.4,"Sad":42.7,"Angry":12.2,"Surprised":44.2},
{"Year":"2012-10-01 17:02:04","Happy":75.4,"Sad":32.7,"Angry":78.2,"Surprised":82.2},
{"Year":"2013-10-01 19:55:44","Happy":73.4,"Sad":20.7,"Angry":92.2,"Surprised":75.4}];
function n(error, data) {
    var maxDataPoint = 0;
data.forEach(function(d) {
    // D3 needs a date object, let's convert it just one time
	//d.Year = new Date(d.Year,0,1);
    d.Year=parseDate(d.Year);
			
});
    
	var countries = [];
	var charts = [];
			
	/* Loop through first row and get each country 
	and push it into an array to use later */
	for (var prop in data[0]) {
	if (data[0].hasOwnProperty(prop)) {
		if (prop != 'Year') {
		countries.push(prop);
			}
				}
			};
			
var countriesCount = countries.length;
var startYear = data[0].Year.year;
var endYear = data[data.length - 1].Year.year;
var chartHeight = height * (1 / countriesCount);
			

for(var i = 0; i < countriesCount; i++){
charts.push(new Chart({
		data: data.slice(),
			id: i,
			name: countries[i],
			width: width,
			height: height * (1 / countriesCount),
			maxDataPoint: maxDataPoint,
			svg: svg,
			margin:...