D3.js group chart

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

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

JavaScript

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

//("%m/%d/%Y %H:%M:%S %p")("1/2/2014 8:22:05 AM")

var data = [{
  "date": "1-May-12 09:00:00",
  "Monday": 58.0,
  "Tuesday": 38.8
}, {
  "date": "1-May-12 10:00:00",
  "Monday": 53.3,
  "Tuesday": 22.8
}, {
  "date": "1-May-12 11:00:00",
  "Monday": 55.7,
  "Tuesday": 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("%d-%b-%y %H:%M:%S");

var cities = [{
  "id": "Monday",
  "values": [{
    "date": "1-May-12 09:00:00",
    "temperature": 14
  }, {
    "date": "1-May-12 10:00:00",
    "temperature": 52
  }, {
    "date": "1-May-12 11:00:00",
    "temperature": 13
  }]
}, {
  "id": "Tuesday",
  "values": [{
    "date": "1-May-12 09:00:00",
    "temperature": 12
  }, {
    "date": "1-May-12 10:00:00",
    "temperature": 52
  }, {
    "date": "1-May-12 11:00:00",
    "temperature": 32
  }]
}];



var keys = d3.keys(data[0]).slice(1);

//
x.domain(d3.extent(data, function(d) {
  return parseTime(d.date);
}));

y.domain([
  d3.min(cities, function(c) {
    return d3.min(c.values, function(d) {
      return d.temperature;
    });
  }),
  d3.max(cities, function(c) {
    return d3.max(c.values, function(d) {
      return d.temperature;
    });
  })
]);

z.domain(cities.map(function(c) {
  return c.id;
}));
// define the line
var valueline = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { 
      return x(parseTime(d.date));
     })
   ...