JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style> 

.title {
	font: 15px sans-serif;
}

.legend {
	font: 10px sans-serif;
}
.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.x.axis.path {
	display: none;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 1.2px;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.title {
	font: 15px sans-serif;
}

.legend {
	font: 10px sans-serif;
}
.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.x.axis.path {
	display: none;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 1.2px;
}

JavaScript

var margin = {top: 20, right: 20, bottom: 30, left: 40};
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	var timeFormat = d3.timeFormat("%m-%Y");
	var parseDate = d3.timeParse("%Y:%m");

	var x = d3.scaleTime()
		.range([0, width]);

	var y = d3.scaleLinear()
		.range([height, margin.top]);

	var center = d3.scaleLinear()
		.range([0, width]);

	var color = d3.scaleOrdinal()
		.range(["#BBCDA3", "#055C81", "#B13C3D", "#CCB40C"]);

	var labels = ["Production and Income", "Employment, Unemployment, and Hours", "Consumption and Housing", "Sales, Orders, and Inventories"];

	var xAxis = d3.axisBottom(x).ticks(10);
	var yAxis = d3.axisLeft(y).ticks(10);

	var centerLine = d3.axisTop(center).ticks(0);


	d3.json("cfnai.json", function(error, data) {

		data = data.slice(data.length - 125, data.length );

		var keys = d3.keys(data[0]);

		var keys = keys.filter(function(key) { 
			if (key !== "id" && key !== "diffusion" && key !== "date" && key !== "cfnai" && key !== "cfnai_ma3") {
				return key; 
			}  
		});


		data.forEach(function(d) {
			var y0_positive = 0;
			var y0_negative = 0;

			d.components = keys.map(function(key) {
				if (d[key] >= 0) {
					return {key: key, y1: y0_positive, y0: y0_positive += d[key] };
				} else if (d[key] < 0) {
					return {key: key, y0: y0_negative, y1: y0_negative += d[key] };
				}
			})
		})

		var y_min = d3.min(data, function(d) { return d.cfnai - 0.1 });
		var y_max = d3.max(data, function(d) { return d.cfnai + 0.1 });

		var datestart = d3.min(data, function(d) { return parseDate(d.date); });
		var dateend = d3.max(data, function(d) { return parseDate(d.date); });



		x.domain([datestart, dateend]);
		y.domain([y_min, y_max]);
		color.domain(keys);

		var cfnai_ma3 = d3.line()
			.x(function(d) { return x(parseDate(d.date)); })
			.y(function(d) { return y(d.cfnai_ma3); });

		var svg = d3.select("body").append("svg")
									.attr("width", width + margin.left +...