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

by gdicerbo

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

CSS

body {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .x.axis path {
      display: none;
    }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

JavaScript

var myData = "date	Max	Avg	Min\n\
00	7794.7	5314.096708	1535.3	\n\
01	7690	5232.355967	1523	\n\
02	7692	5192.382716	1461	\n\
03	7687	5232.343621	3408	\n\
04	7761	5319.041152	2854	\n\
05	8207	5648.473251	744	\n\
06	9011	6186.205761	0	\n\
07	9224	6550.037037	27	\n\
08	9794	6937.81893	1214	\n\
09	10358	7232.059671	1712	\n\
10	10462	7308.934156	2256	\n\
11	10506	7413.687243	3918	\n\
12	10370	7439.539095	4216	\n\
13	11478	7482.201646	4295	\n\
14	11781	7452.057613	4036	\n\
15	11873	7426.141975	3926	\n\
16	11839	7306.835391	0	\n\
17	10441	7132.014403	2316	\n\
18	9656	6843.154321	933	\n\
19	9242	6575.325103	4106	\n\
20	9055	6357.518519	4029	\n\
21	8715	6048.569959	3973	\n\
22	8259	5760.36214	3824	\n\
23	7929	5509.144033	1657	\n";

    var margin = {
        top: 20,
        right: 80,
        bottom: 30,
        left: 50
      },
      width = 900 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%H").parse;
    
    var x = d3.time.scale()
    .range([0, width]);

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

    var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(d3.time.hour, 2)
    .tickFormat(d3.time.format("%I%p"))


    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.temperature);
      });

    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 data = d3.tsv.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 =...