map.html

<!DOCTYPE html>
<meta charset="utf-8">
	
<head>
    <link rel="stylesheet" href="style.css">
    <title>Netherlands Map</title>
</head>
<body>
<h1>Tourism of the Netherlands</h1>
<h2>
	<label for="year">Please select a year: 2015</label>
	<input type="range" min=2015 max=2020 step=1 id="year" value=2019 oninput="selected_year.value = year.value">
  <output name="selected_year" id="selected_year">2019</output>
  </h2>
  <h3>
    Note: Data updated to September 2020
    </h3>
<div id="slider"></div>
<svg id="visualisation" width="1000" height="1000"></svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script type="text/javascript" src="nldataset2019.json"></script>
<script src="index.js"></script>

</body>