d3 data lines on chart disoriented

Question

I'm not sure what else is needed to be implemented in order for the lines to straighten out. I've added a function to sort the date in the data array and thought would do the trick.

data = data.sort(sortByDateAscending);
   console.log(JSON.stringify(data))

Yet the data lines on the chart still render a bit crazy, do I need to format the time object into a specific format?

Any help is appreciated. Here is a jsfiddle, thanks in advance. https://jsfiddle.net/xvkmtvha

Answer 1

You should create the dataGroup with the sorted data array.

data = data.sort(sortByDateAscending); //Sort data array first

var dataGroup = d3.nest()
  .key(function(d) {
    return d.Brand;
  })
  .entries(data); //Apply sorted data

 var data = [{ "Brand": "Lexus", "Time": "2017-05-08 16", "Count": 8263 }, { "Brand": "Toyota", "Time": "2017-05-08 09", "Count": 25382 }, { "Brand": "Toyota", "Time": "2017-05-08 06", "Count": 17543 }, { "Brand": "Toyota", "Time": "2017-05-08 10", "Count": 25758 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 12", "Count": 2052 }, { "Brand": "Acura", "Time": "2017-05-08 10", "Count": 9 }, { "Brand": "Acura", "Time": "2017-05-08 07", "Count": 4 }, { "Brand": "Lexus", "Time": "2017-05-08 12", "Count": 11653 }, { "Brand": "Toyota", "Time": "2017-05-08 21", "Count": 16199 }, { "Brand": "Honda", "Time": "2017-05-08 23", "Count": 179 }, { "Brand": "Lexus", "Time": "2017-05-08 13", "Count": 11334 }, { "Brand": "Honda", "Time": "2017-05-08 17", "Count": 600 }, { "Brand": "Lexus", "Time": "2017-05-08 05", "Count": 7365 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 18", "Count": 2147 }, { "Brand": "Acura", "Time": "2017-05-08 14", "Count": 8 }, { "Brand": "Acura", "Time": "2017-05-08 18", "Count": 3 }, { "Brand": "Lexus", "Time": "2017-05-08 20", "Count": 7694 }, { "Brand": "Chrysler", "Time": "2017-05-08 03", "Count": 1173 }, { "Brand": "Lexus", "Time": "2017-05-08 17", "Count": 8579 }, { "Brand": "Toyota", "Time": "2017-05-08 20", "Count": 21008 }, { "Brand": "Acura", "Time": "2017-05-08 16", "Count": 10 }, { "Brand": "Chrysler", "Time": "2017-05-08 07", "Count": 2430 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 07", "Count": 2795 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 06", "Count": 2614 }, { "Brand": "Lexus", "Time": "2017-05-08 08", "Count": 11712 }, { "Brand": "Honda", "Time": "2017-05-08 05", "Count": 188 }, { "Brand": "Honda", "Time": "2017-05-08 10", "Count": 623 }, { "Brand": "Chrysler", "Time": "2017-05-08 08", "Count": 2255 }, { "Brand": "Toyota", "Time": "2017-05-08 07", "Count": 21790 }, { "Brand": "Acura", "Time": "2017-05-08 11", "Count": 9 }, { "Brand": "Toyota", "Time": "2017-05-08 22", "Count": 12093 }, { "Brand": "Honda", "Time": "2017-05-08 15", "Count": 560 }, { "Brand": "Chrysler", "Time": "2017-05-08 09", "Count": 1903 }, { "Brand": "Lexus", "Time": "2017-05-08 04", "Count": 6166 }, { "Brand": "Lexus", "Time": "2017-05-08 02", "Count": 5636 }, { "Brand": "Chrysler", "Time": "2017-05-08 12", "Count": 1714 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 10", "Count": 2288 }, { "Brand": "Chrysler", "Time": "2017-05-08 20", "Count": 285 }, { "Brand": "Acura", "Time": "2017-05-08 13", "Count": 7 }, { "Brand": "Chrysler", "Time": "2017-05-08 14", "Count": 1432 }, { "Brand": "Toyota", "Time": "2017-05-08 17", "Count": 22696 }, { "Brand": "Lexus", "Time": "2017-05-08 15", "Count": 8459 }, { "Brand": "Toyota", "Time": "2017-05-08 15", "Count": 21139 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 16", "Count": 1622 }, { "Brand": "Chrysler", "Time": "2017-05-08 22", "Count": 302 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 03", "Count": 2195 }, { "Brand": "Toyota", "Time": "2017-05-08 03", "Count": 8151 }, { "Brand": "Acura", "Time": "2017-05-08 12", "Count": 6 }, { "Brand": "Acura", "Time": "2017-05-08 15", "Count": 8 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 21", "Count": 1702 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 20", "Count": 2004 }, { "Brand": "Toyota", "Time": "2017-05-08 23", "Count": 9162 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 00", "Count": 1917 }, { "Brand": "Toyota", "Time": "2017-05-08 18", "Count": 24969 }, { "Brand": "Honda", "Time": "2017-05-08 03", "Count": 79 }, { "Brand": "Lexus", "Time": "2017-05-08 09", "Count": 11751 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 05", "Count": 2218 }, { "Brand": "Lexus", "Time": "2017-05-08 03", "Count": 5742 }, { "Brand": "Toyota", "Time": "2017-05-08 11", "Count": 26282 }, { "Brand": "Lexus", "Time": "2017-05-08 00", "Count": 4583 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 23", "Count": 1731 }, { "Brand": "Lexus", "Time": "2017-05-08 07", "Count": 10854 }, { "Brand": "Chrysler", "Time": "2017-05-08 13", "Count": 1670 }, { "Brand": "Lexus", "Time": "2017-05-08 11", "Count": 11539 }, { "Brand": "Honda", "Time": "2017-05-08 08", "Count": 515 }, { "Brand": "Toyota", "Time": "2017-05-08 13", "Count": 25338 }, { "Brand": "Honda", "Time": "2017-05-08 20", "Count": 605 }, { "Brand": "Chrysler", "Time": "2017-05-08 23", "Count": 696 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 04", "Count": 2077 }, { "Brand": "Acura", "Time": "2017-05-08 09", "Count": 6 }, { "Brand": "Chrysler", "Time": "2017-05-08 17", "Count": 442 }, { "Brand": "Honda", "Time": "2017-05-08 02", "Count": 44 }, { "Brand": "Toyota", "Time": "2017-05-08 14", "Count": 23355 }, { "Brand": "Lexus", "Time": "2017-05-08 23", "Count": 4717 }, { "Brand": "Honda", "Time": "2017-05-08 16", "Count": 618 }, { "Brand": "Chrysler", "Time": "2017-05-08 00", "Count": 946 }, { "Brand": "Chrysler", "Time": "2017-05-08 11", "Count": 1636 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 19", "Count": 2161 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 01", "Count": 2199 }, { "Brand": "Honda", "Time": "2017-05-08 07", "Count": 403 }, { "Brand": "Honda", "Time": "2017-05-08 18", "Count": 771 }, { "Brand": "Honda", "Time": "2017-05-08 12", "Count": 553 }, { "Brand": "Chrysler", "Time": "2017-05-08 21", "Count": 249 }, { "Brand": "Chrysler", "Time": "2017-05-08 06", "Count": 2285 }, { "Brand": "Lexus", "Time": "2017-05-08 06", "Count": 9152 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 11", "Count": 2248 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 02", "Count": 2351 }, { "Brand": "Chrysler", "Time": "2017-05-08 16", "Count": 612 }, { "Brand": "Honda", "Time": "2017-05-08 09", "Count": 515 }, { "Brand": "Lexus", "Time": "2017-05-08 10", "Count": 11559 }, { "Brand": "Toyota", "Time": "2017-05-08 12", "Count": 25999 }, { "Brand": "Lexus", "Time": "2017-05-08 19", "Count": 8963 }, { "Brand": "Honda", "Time": "2017-05-08 14", "Count": 559 }, { "Brand": "Acura", "Time": "2017-05-08 08", "Count": 13 }, { "Brand": "Chrysler", "Time": "2017-05-08 10", "Count": 1660 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 09", "Count": 2579 }, { "Brand": "Toyota", "Time": "2017-05-08 00", "Count": 7609 }, { "Brand": "Toyota", "Time": "2017-05-08 05", "Count": 12576 }, { "Brand": "Acura", "Time": "2017-05-08 17", "Count": 14 }, { "Brand": "Honda", "Time": "2017-05-08 13", "Count": 626 }, { "Brand": "Honda", "Time": "2017-05-08 22", "Count": 256 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 13", "Count": 1931 }, { "Brand": "Chrysler", "Time": "2017-05-08 02", "Count": 1351 }, { "Brand": "Lexus", "Time": "2017-05-08 18", "Count": 9252 }, { "Brand": "Lexus", "Time": "2017-05-08 14", "Count": 10184 }, { "Brand": "Chrysler", "Time": "2017-05-08 19", "Count": 333 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 22", "Count": 1508 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 08", "Count": 2884 }, { "Brand": "Toyota", "Time": "2017-05-08 19", "Count": 24708 }, { "Brand": "Honda", "Time": "2017-05-08 04", "Count": 91 }, { "Brand": "Toyota", "Time": "2017-05-08 08", "Count": 24665 }, { "Brand": "Chrysler", "Time": "2017-05-08 18", "Count": 438 }, { "Brand": "Toyota", "Time": "2017-05-08 16", "Count": 20871 }, { "Brand": "Toyota", "Time": "2017-05-08 04", "Count": 9447 }, { "Brand": "Toyota", "Time": "2017-05-08 01", "Count": 7178 }, { "Brand": "Lexus", "Time": "2017-05-08 01", "Count": 5186 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 17", "Count": 1793 }, { "Brand": "Lexus", "Time": "2017-05-08 22", "Count": 4946 }, { "Brand": "Chrysler", "Time": "2017-05-08 15", "Count": 902 }, { "Brand": "Lexus", "Time": "2017-05-08 21", "Count": 6131 }, { "Brand": "Honda", "Time": "2017-05-08 00", "Count": 102 }, { "Brand": "Honda", "Time": "2017-05-08 19", "Count": 705 }, { "Brand": "Honda", "Time": "2017-05-08 21", "Count": 388 }, { "Brand": "Honda", "Time": "2017-05-08 06", "Count": 332 }, { "Brand": "Honda", "Time": "2017-05-08 01", "Count": 67 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 15", "Count": 1597 }, { "Brand": "Chrysler", "Time": "2017-05-08 04", "Count": 1341 }, { "Brand": "Chrysler", "Time": "2017-05-08 01", "Count": 1304 }, { "Brand": "Honda", "Time": "2017-05-08 11", "Count": 625 }, { "Brand": "Chrysler", "Time": "2017-05-08 05", "Count": 1719 }, { "Brand": "Toyota", "Time": "2017-05-08 02", "Count": 7867 }, { "Brand": "General Motors Truck Company (GMC)", "Time": "2017-05-08 14", "Count": 1691 }]; data.forEach(function(d) { d.Time = d3.timeParse("%Y-%m-%d %H")(d.Time) //d.Time = d3.timeFormat("%m/%d/%Y %H:%M:%S %p") var formatTime = d3.timeFormat("%m/%d/%Y %H:%M:%S %p"); formatTime(d.Time); }); function sortByDateAscending(a, b) { // Dates will be cast to numbers automagically: return a.Time - b.Time; } data = data.sort(sortByDateAscending); var dataGroup = d3.nest() //d3 method that groups data by Brand .key(function(d) { return d.Brand; }) .entries(data); //var color = d3.scale.category10(); var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = { top: 50, right: 20, bottom: 50, left: 50 }, xScale = d3.scaleTime().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { //set up x-axis based on data return d.Time; }), d3.max(data, function(d) { return d.Time; })]), yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { //set up y-axis based on data return d.Count; }), d3.max(data, function(d) { return d.Count; })]), xAxis = d3.axisBottom() .scale(xScale), yAxis = d3.axisLeft() .scale(yScale) vis.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") .call(xAxis); vis.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(" + (MARGINS.left) + ",0)") .call(yAxis); var lineGen = d3.line() .x(function(d) { return xScale(d.Time); }) .y(function(d) { return yScale(d.Count); }) .curve(d3.curveLinear); var color = d3.scaleOrdinal(d3.schemeCategory10); // set the colour scale dataGroup.forEach(function(d, i) { //iterate over the dataGroup and create line graph for each brand vis.append('svg:path') .attr('d', lineGen(d.values)) .style("stroke", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr('stroke-width', 2) .attr("id", 'tag' + d.key.replace(/\\s+/g, '')) // assign ID .attr('fill', 'none'); lSpace = WIDTH / dataGroup.length; //define the legend space based on number of brands vis.append("text") .attr("x", (lSpace / 2) + i * lSpace) .attr("y", HEIGHT) .style("fill", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr("class", "legend") .on('click', function() { var active = d.active ? false : true, opacity = active ? 0 : 1; // Hide or show the elements based on the ID d3.select("#tag" + d.key.replace(/[ )(]/g, '')) .style("opacity", opacity); // Update whether or not the elements are active d.active = active; }) .text(d.key); // text label for the x axis vis.append("text") .attr("transform", "translate(" + (WIDTH / 2) + " ," + (HEIGHT + 30) + ")") .style("text-anchor", "middle") .text("Date"); // text label for the y axis vis.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - MARGINS.left) //set y to "5" .attr("x", 10 - (HEIGHT / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Count"); }); 

 .axis path { fill: none; stroke: #777; shape-rendering: crispEdges; } .axis text { font-family: Lato; font-size: 13px; } .legend { font-size: 14px; font-weight: bold; cursor: pointer; 

 <title>D3 Test</title> <script src="https://d3js.org/d3.v4.js"></script> <body> <svg id="visualisation" width="1000" height="600"></svg> </body>