JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>

CSS

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

.line {
	fill: none;
	stroke: #444;
	stroke-width: 2px;
}

JavaScript

var myData = "date,City1,City2,City3,City4\n\
20100101,85328,19658,33384,37822\n\
20110101,73527,20295,31127,37130\n\
20120101,71092,20394,31038,34788\n\
20130101,75263,19520,30751,33868";

var margin = { top: 50, right: 50, bottom: 50, left: 50 },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;
    
var format = d3.format(',.');
var parseDate = d3.time.format('%Y%m%d').parse;

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

var xAxis = d3.svg.axis()
  .scale(x)
  .orient('bottom');

var y = d3.scale.linear()
  .range([height, 0]);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left')
  .tickFormat(format);

var color = d3.scale.category10();

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

var svg = d3.select('body').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 + ')');

var tooltip = d3.tip()
  .attr('class', 'tooltip')
  .offset([-10, 0])
  .html(function (d) {
    return '<strong>Population ' + (d.date).getFullYear() + ':</strong> ' + format(d.population) + ' people';
  });

svg.call(tooltip);

var data = d3.csv.parse(myData);

color.domain(d3.keys(data[0]).filter(function(key) { return (key !== 'date'); }));

data.forEach(function(d) {
  d.date = parseDate(d.date);
});

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, population: +d[name]};
    })
  };
});

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
  0, d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.population; }); })
]);

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);

var city = svg.selectAll('.region')
.data(cities)
.enter().append('g')
.attr('class', 'region');

city.append('path')
 ...