Invalid value for<path> attribute in d3.js - d3.js

Question

I am a complete newbie in d3.js and I was working around with some code but it's failing to create the path. Can someone help me to figure out what I am doing wrong?
Link for jsfiddle: http://jsfiddle.net/p8S7p/154/
var data = [
{
data: [
[
1420815600000,
2
],
[
1420826400000,
2
],
[
1420837200000,
2
],
[
1420848000000,
2
],
],
parameter: "t1"
},
{
data: [
[
1420815600000,
2
],
[
1420826400000,
2
],
[
1420837200000,
2
],
[
1420848000000,
2
],
],
parameter: "t2"
}
];
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) { return x(d[0]); })
.y(function (d) {
return y(d[1]);
});
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 cities = [];
for (var i = 0; i < data.length; i++) {
var t = {};
t["name"] = data[i].parameter;
t["values"] = [];
for (var j = 0; j < data[i].data.length; j++) {
var m = {};
m["date"] = data[i].data[j][0];
m["temperature"] = data[i].data[j][1];
t["values"].push(m);
}
cities.push(t);
}
x.domain(d3.extent(data[0].data, function (d) {
return d[0];
}));
y.domain([
d3.min(cities, function (c) {
return d3.min(c.values, function (v) {
return v.temperature;
});
}),
d3.max(cities, function (c) {
return d3.max(c.values, function (v) {
return v.temperature;
});
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.values);
});
Its meant to be dates on x -axis. How should I parse milliseconds dates to D3 time format?

Answer 1

In your code
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) { return x(d[0]); }) //this is incorrect why d[0]
.y(function (d) {
return y(d[1]); //this is incorrect why d[1]
});
should have been
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) { return x(d.date); })
.y(function (d) {
return y(d.temperature);
});
Coz that's how you have parsed your data here
var cities = [];
for (var i = 0; i < data.length; i++) {
var t = {};
t["name"] = data[i].parameter;
t["values"] = [];
for (var j = 0; j < data[i].data.length; j++) {
var m = {};
m["date"] = data[i].data[j][0];//storing this in date
m["temperature"] = data[i].data[j][1];//storing it in temperature
t["values"].push(m);
}
cities.push(t);
}
Working code here
Hope this helps!