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) {   
    for (var i = 0; i < data.length; i++){
      if (data[i].date === d.date){
        return '<strong>Population ' + (d.date).getFullYear() + '</strong><br/> City 1: ' + format(data[i].City1) + ' people <br/> City 2: ' + format(data[i].City2) + ' people <br/> City 4: ' + format(data[i].City3) + ' people <br/> City 4: ' + format(data[i].City4) + ' 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,...