D3.js line chart with legend

HTML

<script src="https://d3js.org/d3.v4.min.js">
</script>
<div id="chart"></div>

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

//https://bl.ocks.org/andrew-reid/64a6c1892d1893009d2b99b8abee75a7

        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
        }];

w = 960;
h = 500;

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


var x = d3.scaleTime()
  .range([0, width]);

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

var z = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

/*
       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": 20111001,
            "temperature": 34
          }, {
            "date": 20111004,
            "temperature": 42
          }, {
            "date": 20111005,
            "temperature": 23
          }]
        }, {
          "id": "San Francisco",
          "values": [{
            "date": 20111003,
            "temperature": 22
          }, {
            "date": 20111004,
            "temperature": 52
          }, {
            "date": 20111005,
           ...