JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="charts_container" id="chart-container" >
		<svg width="100%" id="chart_area"></svg>
</div>

CSS

.chartTitle{
  font-size:20px;
}



path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axes path,
.axes line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

JavaScript

var myData = [
	{"date":20111001,"New_York":63.4,"San_Francisco":62.7,"Austin":72.2},
	{"date":20111002,"New_York":58,"San_Francisco":59.9,"Austin":67.7},
	{"date":20111003,"New_York":53.3,"San_Francisco":59.1,"Austin":69.4},
	{"date":20111004,"New_York":55.7,"San_Francisco":58.8,"Austin":68},
	{"date":20111005,"New_York":64.2,"San_Francisco":58.7,"Austin":72.4},
	{"date":20111006,"New_York":58.8,"San_Francisco":57,"Austin":77},
	{"date":20111007,"New_York":57.9,"San_Francisco":56.7,"Austin":82.3},
	{"date":20111008,"New_York":61.8,"San_Francisco":56.8,"Austin":78.9},
	{"date":20111009,"New_York":69.3,"San_Francisco":56.7,"Austin":68.8},
	{"date":20111010,"New_York":71.2,"San_Francisco":60.1,"Austin":68.7},
	{"date":20111011,"New_York":68.7,"San_Francisco":61.1,"Austin":70.3},
	{"date":20111012,"New_York":61.8,"San_Francisco":61.5,"Austin":75.3},
	{"date":20111013,"New_York":63,"San_Francisco":64.3,"Austin":76.6},
	{"date":20111014,"New_York":66.9,"San_Francisco":67.1,"Austin":66.6},
	{"date":20111015,"New_York":61.7,"San_Francisco":64.6,"Austin":68},
	{"date":20111016,"New_York":61.8,"San_Francisco":61.6,"Austin":70.6},
	{"date":20111017,"New_York":62.8,"San_Francisco":61.1,"Austin":71.1},
	{"date":20111018,"New_York":60.8,"San_Francisco":59.2,"Austin":70},
	{"date":20111019,"New_York":62.1,"San_Francisco":58.9,"Austin":61.6},
	{"date":20111020,"New_York":65.1,"San_Francisco":57.2,"Austin":57.4},
	{"date":20111021,"New_York":55.6,"San_Francisco":56.4,"Austin":64.3}
]



	function LineChart(data,chartContainerID,chartAreaId,chartTitle,colorArray){

		this.data = data;
		this.chartContainer = document.getElementById(chartContainerID)
		this.chartArea = document.getElementById(chartAreaId);
		this.chartTitle = chartTitle;
		this.colors = colorArray;

    this.parseTime = d3.timeParse("%Y%d%m");
    this.data.forEach((d)=> {
      d.date = this.parseTime(d.date);
    });

		this.vanillaEmpty = function(el){
			while(el.firstChild)
 ...