step 2

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis--x path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 1. format date for data file   
var parseTime = d3.timeParse("%Y%m%d");

// 2. func => map date to px 
// 2.1 create a func for time
var x = d3.scaleTime()
// 2.2 set px range 
					.range([0, width]);
  
  
  
  
// 3. func => map temperature to px 
// 2.1 create a func for numeric 
    y = d3.scaleLinear()
// 2.2 set px range     
      		.range([height, 0]);
      
  
  
  
// 3. func => map city names to color 
// 2.1 create a func for color 
// 2.2  and get 10 default colors for use       
    z = d3.scaleOrdinal(d3.schemeCategory10);

// 4. func => tranform data points into points of lines
var line = d3.line()
// 4.1 keep lines smooth
    .curve(d3.curveBasis)
// 4.2 match data points to points (x, y) of line
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

</script>

https://d3js.org/d3.v4.min.js