D3.js Template

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>
<svg width="960" height="500"></svg>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

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

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

JavaScript

var $this = $('.chart');

        var data = [{
          "date": "20111001",
          "New York": 63.4,
          "San Francisco": 58.8
        }, {
          "date": "20111002",
          "New York": 58.0,
          "San Francisco": 38.8
        }, {
          "date": "20111003",
          "New York": 53.3,
          "San Francisco": 22.8
        }, {
          "date": "20111004",
          "New York": 55.7,
          "San Franciscok": 38.8
        }];



        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 + ")");

        var parseTime = d3.timeParse("%Y%m%d");

        var x = d3.scaleTime().range([0, width]),
          y = d3.scaleLinear().range([height, 0]),
          z = d3.scaleOrdinal(d3.schemeCategory10);

        var line = d3.line()
          .curve(d3.curveBasis)
          .x(function(d) {
            return x(d.date);
          })
          .y(function(d) {
            return y(d.temperature);
          });

        console.log("data", data);


        var cities = data.map(function(id) {
          console.log("id", data);


          return {
            id: id,
            values: data.map(function(d) {
              return {
                date: d.date,
                temperature: d[id]
              };
            })
          };
        });

        var cities = [{
          "id": "New York",
          "values": [{
            "date": 20111003,
            "temperature": 34
          }, {
            "date": 20111004,
            "temperature": 42
          }, {
            "date": 20111005,
            "temperature": 23
          }]
        }, {
          "id": "San Francisco",
          "values": [{
           ...