JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-family: Roboto;}
#priceWithMilestones {position: relative;}
.title {position: absolute; top: 0; text-align: center; width: 100%; }
.legend {position: absolute; top: 400px; right: 0; }
</style>
<div id="priceWithMilestones">
<div class="title"><h1>Marketcap Dominance</h1></div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var tokenPricesArray = [
    {"date":"18-Sep-18", "bitcoin_dominance":"55.55"},
    {"date":"19-Sep-18", "bitcoin_dominance":"65.55"},
];

// Milestones vs. Price
		
		// Set the dimensions of the canvas / graph
		var margin = {
			top: 20,
			right: 30,
			bottom: 30,
			left: 40
		},
		width = 825 - margin.left - margin.right,
		height = 450 - margin.top - margin.bottom;

		var paddingForText = 15;

		// Parse the date
		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.bitcoin_dominance);
			});

		// Adds the svg canvas
		var svg = d3.select("#priceWithMilestones")
			.append("svg")
			.style("background-color", "#ffffff")
			//.attr("width", width + margin.left + margin.right)
			//.attr("height", height + margin.top + margin.bottom)
			.attr("preserveAspectRatio", "xMinYMin meet")
			.attr("viewBox", "0 0 825 450")
			.attr("id", "priceWithEverything")
			.append("g")
			.attr("transform",
				"translate(" + margin.left + "," + margin.top + ")");
				
		var aspect = width / height,
			chart = d3.select('#priceWithMilestones');
		d3.select(window)
		  .on("resize", function() {
			var targetWidth = chart.node().getBoundingClientRect().width;
			chart.attr("width", targetWidth);
			chart.attr("height", targetWidth /...