My D3.js code is not showing seconds in the time axis? - d3.js

Question

I am going to draw a line chart using d3.js. I am plotting time in the x axis and speed in the y axis of different vehicle ids. But one thing I am not getting seconds from my data. the code is rounding seconds to minute. So I am getting wrong chart. I am trying to draw something like http://bl.ocks.org/mbostock/3884955.
Here is my code
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)
.orient("bottom").ticks(d3.time.minutes,5).tickFormat(d3.time.format("%H:%M:%S"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.time); })
.y(function(d) { return y(d.speed); });
/* var points = popchart.selectAll(".point")
.data(data)
.enter().append("svg:circle")
.attr("stroke", "black")
.attr("fill", function(d, i) { return color(i) })
.attr("cx", function(d, i) { return x(d.time) })
.attr("cy", function(d, i) { return y(d.speed) })
.attr("r", function(d, i) { return 3 }); */
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "time"; }));
var ids = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {time: d.time, speed: +d[name]};
})
};
});
x.domain([d3.min(data,function(d){return d.time}),d3.max(data,function(d){return d.time})]);
y.domain([
d3.min(ids, function(c) { return d3.min(c.values, function(v) { return v.speed; }); }),
d3.max(ids, function(c) { return d3.max(c.values, function(v) { return v.speed; }); })
]);
var svg = d3.select("#chart").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 + ")");
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("Speed (mph)");
var id = svg.selectAll(".id")
.data(ids)
.enter().append("g")
.attr("class", "id");
id.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
id.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.speed) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
Though I am picking time in %H:%M:%S format the second is not coming in the chart. Why is this happening?

Answer 1

The reason you are getting loop is only one, Your data is not sorted according to time values as i am suspecting.In Your code you add the following for sorting the data according to time. And use this sorted data to draw the line chart.
Here is the code
data=data.sort(function(a, b) {
return d3.ascending(a.time,b.time);
});
Then pass this sorted data to draw the line chart. You are done

Answer 2

I forked your plunker, it seems as though some of the tabs in your tsv were actually spaces.
This was, for starters, causing massive problems in your plunk,
so for testing I've changed it to a csv, and moved your script into script.js so that it's a little more testable.
I'll try to have another look soon, but this should make it easier for others to debug also. Let us know if this is more like what you wanted
Plunk: http://plnkr.co/edit/bxncPdugtRTaWTdztraC?p=preview
d3.csv("data.csv", function(error, data) {
...
}