JSFiddle - React, Tailwind, and code Playground

HTML

<button id='saveButton'>Export my D3 visualization to PNG</button>
<div>
		<div class="chart" id="priceWithMilestones"></div>
	</div>	
<script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
	 <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.chart {
		margin-bottom: 20px;
	}
	
	.info {
		margin-top:20px;
	}
	
	.description {
		margin-bottom: 20px;
	}
	
	.token_amount {
		margin-top:20px;
		margin-bottom: 20px;
	}
	
	.axis path,
    .axis line 
    {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
	
	#priceOverTimeChart path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
	}

	#priceOverTimeChart .axis path,
	#priceOverTimeChart .axis line {
		fill: none;
		stroke: grey;
		stroke-width: 1;
		shape-rendering: crispEdges;
	}
	
	#priceOverTimeChart text {
		fill: black;
	}
	
	#tracTop1000Holders .line {
	  fill: none;
	  stroke: steelblue;
	  stroke-width: 2px;
	}

	#tracTop1000Holders .area {
	  fill: lightsteelblue;
	}
	
	#blockDifficultyChart .line {
	  fill: none;
	  stroke: steelblue;
	  stroke-width: 2px;
	}

	#blockDifficultyChart .area {
	  fill: lightsteelblue;
	}
	
	.arc text {
	  font: 10px sans-serif;
	  text-anchor: middle;
	}

	.arc path {
	  stroke: #fff;
	}
	
	.inner-content {
		margin-bottom: 40px;
		padding-top: 20px;
	}
	
	#priceWithMilestones .line {
	  fill: none;
	  stroke: #14da9e;
	  stroke-width: 2px;
	}
	
	.pie {
	  margin: 20px;
	}

	svg {
		float: left;
	}

	.legend {
	  float: left;
	  font-family: "Verdana";
	  font-size: .7em;
	}

	.pie text {
	  font-family: "Verdana";
	  fill: #000;
	}

	.pie .name-text{
	  font-size: .8em;
	}

	.pie .value-text{
	  font-size: 3em;
	}
	
	#tracVsEthPrice svg {
    font-family: Sans-Serif, Arial;
	}
	
	#tracVsEthPrice .line {
	  stroke-width: 2;
	  fill: none;
	}

	#tracVsEthPrice .axis path {
	  stroke: black;
	}

	#tracVsEthPrice .text {
	  font-size: 12px;
	}

	#tracVsEthPrice .title-text {
	  font-size: 12px;
	}

JavaScript

// Set the dimensions of the canvas / graph
		var margin = {
				top: 30,
				right: 20,
				bottom: 30,
				left: 50
			},
			width = 900 - margin.left - margin.right,
			height = 570 - margin.top - margin.bottom;

		var paddingForText = 15;

		// Parse the date / time
		var parseDate = d3.timeParse("%d-%b-%y");

		// Set the ranges
		var x = d3.scaleTime().range([0, width]);
		var y = d3.scaleLinear().range([height, 0]);

		// Define the axes
		var xAxis = d3.axisBottom(x).ticks(3);

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

		// Define the line
		var valueline = d3.line()
			.x(function(d) {
				return x(d.date);
			})
			.y(function(d) {
				return y(d.close);
			});

		// Adds the svg canvas
		var svg = d3.select("#priceWithMilestones")
			.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform",
				"translate(" + margin.left + "," + margin.top + ")");

		data = [{
				date: '25-Jan-18',
				close: 0.236430,
				notes: null
			},{
				date: '26-Jan-18',
				close: 0.287161,
				notes: null
			},{
				date: '27-Jan-18',
				close: 0.405800,
				notes: null
			},{
				date: '28-Jan-18',
				close: 0.428571,
				notes: null
			},{
				date: '29-Jan-18',
				close: 0.379257,
				notes: null
			},{
				date: '30-Jan-18',
				close: 0.359370,
				notes: null
			},
			{
				date: '31-Jan-18',
				close: 0.372653,
				notes: null
			},
			{
				date: '01-Feb-18',
				close: 0.320754,
				notes: null
			},
			{
				date: '02-Feb-18',
				close: 0.272361,
				notes: null
			},
			{
				date: '03-Feb-18',
				close: 0.308462,
				notes: null
			},
			{
				date: '04-Feb-18',
				close: 0.245565,
				notes: null
			},
			{
				date: '05-Feb-18',
				close: 0.162323,
				notes: null
			},
			{
				date: '06-Feb-18',
				close: 0.226905,
				notes: null
			},
			{
				date: '07-Feb-18',
				close: 0.201115,
				notes: null
			},
			{
				date: '08-Feb-18',
				close:...