NVD3 not formatting dates correctly

Question

I'm trying to modify the stacked area chart example for NVD3. I can draw the chart with my own data and everything works fine. The data parsing seems to not be working correctly, however. Like in the NVD3 example, I've converted my dates to Unix time, like in the NVD3 examples, and these are the first values in the data. The second values are the counts. The data draws fine, but the dates are all put as 01/17/1970. An example can be seen here.

My data looks like:

var data = [
{'values': [[1403236800, 573], [1403323200, 632], [1403409600, 691],
    [1403496000, 882], [1403582400, 898], [1403668800, 869], [1403755200, 853],
    [1403841600, 787], [1403928000, 596], [1404014400, 505], [1404100800, 877],
    [1404187200, 813], [1404273600, 816], [1404360000, 754], [1404446400, 765],
    [1404532800, 531], [1404619200, 501], [1404705600, 786], [1404792000, 840],
    [1404878400, 963], [1404964800, 857], [1405051200, 909], [1405137600, 620],
    [1405224000, 694], [1405310400, 879], [1405396800, 926], [1405483200, 895],
    [1405569600, 1044], [1405656000, 1201], [1405742400, 869], [1405828800, 757],
    [1405915200, 1048], [1406001600, 972], [1406088000, 889], [1406174400, 941],
    [1406260800, 641], [1406347200, 477], [1406433600, 538], [1406520000, 780],
    [1406606400, 873], [1406692800, 757], [1406779200, 427], [1406865600, 37]],
    'key': 'Stream1'},
{'values': [[1403236800, 782], [1403323200, 843], [1403409600, 791],
    [1403496000, 1020], [1403582400, 1059], [1403668800, 1062], [1403755200, 1231],
    [1403841600, 1235], [1403928000, 801], [1404014400, 689],
    [1404100800, 1095], [1404187200, 908], [1404273600, 972], [1404360000, 924],
    [1404446400, 775], [1404532800, 381], [1404619200, 488], [1404705600, 895],
    [1404792000, 1081], [1404878400, 1035], [1404964800, 923],
    [1405051200, 1036], [1405137600, 736], [1405224000, 803], [1405310400, 985],
    [1405396800, 1186], [1405483200, 1095], [1405569600, 1328],
    [1405656000, 1229], [1405742400, 1218], [1405828800, 787], [1405915200, 1164],
    [1406001600, 1100], [1406088000, 1197], [1406174400, 927], [1406260800, 803],
    [1406347200, 670], [1406433600, 588], [1406520000, 850], [1406606400, 780],
    [1406692800, 699], [1406779200, 488], [1406865600, 37]],
    'key': 'Stream2'},
{'values': [[1403236800, 211], [1403323200, 211], [1403409600, 294], 
[1403496000, 367], [1403582400, 373], [1403668800, 361], [1403755200, 404],
    [1403841600, 450], [1403928000, 309], [1404014400, 245], [1404100800, 328],
    [1404187200, 431], [1404273600, 329], [1404360000, 348], [1404446400, 361],
    [1404532800, 184], [1404619200, 127], [1404705600, 236], [1404792000, 277],
    [1404878400, 333], [1404964800, 347], [1405051200, 301], [1405137600, 248],
    [1405224000, 253], [1405310400, 328], [1405396800, 369], [1405483200, 330],
    [1405569600, 444], [1405656000, 429], [1405742400, 313], [1405828800, 322],
    [1405915200, 346], [1406001600, 408], [1406088000, 376], [1406174400, 293],
    [1406260800, 249], [1406347200, 246], [1406433600, 212], [1406520000, 304],
    [1406606400, 316], [1406692800, 283], [1406779200, 180], [1406865600, 13]],
'key': 'Stream3'},
{'values': [[1403236800, 209], [1403323200, 303], [1403409600, 236],
    [1403496000, 341], [1403582400, 310], [1403668800, 361], [1403755200, 342],
    [1403841600, 335], [1403928000, 196], [1404014400, 197], [1404100800, 361],
    [1404187200, 368], [1404273600, 360], [1404360000, 345], [1404446400, 313],
    [1404532800, 174], [1404619200, 205], [1404705600, 294], [1404792000, 345],
    [1404878400, 382], [1404964800, 326], [1405051200, 436], [1405137600, 274],
    [1405224000, 251], [1405310400, 330], [1405396800, 365], [1405483200, 408],
    [1405569600, 517], [1405656000, 542], [1405742400, 438], [1405828800, 451],
    [1405915200, 511], [1406001600, 521], [1406088000, 376], [1406174400, 363],
    [1406260800, 282], [1406347200, 235], [1406433600, 268], [1406520000, 352],
    [1406606400, 425], [1406692800, 371], [1406779200, 210], [1406865600, 17]],
    'key': 'Stream4'},
{'values': [[1403236800, 251], [1403323200, 368], [1403409600, 356],
    [1403496000, 469], [1403582400, 456], [1403668800, 515], [1403755200, 509],
    [1403841600, 422], [1403928000, 290], [1404014400, 328], [1404100800, 467],
    [1404187200, 437], [1404273600, 505], [1404360000, 410], [1404446400, 434],
    [1404532800, 309], [1404619200, 330], [1404705600, 458], [1404792000, 423],
    [1404878400, 478], [1404964800, 507], [1405051200, 484], [1405137600, 319],
    [1405224000, 422], [1405310400, 475], [1405396800, 412], [1405483200, 511],
    [1405569600, 536], [1405656000, 551], [1405742400, 434], [1405828800, 451],
    [1405915200, 511], [1406001600, 503], [1406088000, 449], [1406174400, 433],
    [1406260800, 300], [1406347200, 272], [1406433600, 297], [1406520000, 454],
    [1406606400, 381], [1406692800, 400], [1406779200, 212], [1406865600, 18]],
    'key': 'Stream5'}];

The Javascript is:

var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};

var chart;
nv.addGraph(function() {
  chart = nv.models.stackedAreaChart()
                .useInteractiveGuideline(true)
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(keyColor)
                .transitionDuration(300);

  chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .tickFormat(d3.format(',f'));

  d3.select('#chart1')
    .datum(data)
    .transition().duration(1000)
    .call(chart)
    .each('start', function() {
        setTimeout(function() {
            d3.selectAll('#chart1 *').each(function() {
              console.log('start',this.__transition__, this)
              if(this.__transition__)
                this.__transition__.duration = 1;
            })
          }, 0)
      })

  nv.utils.windowResize(chart.update);
 });

  return chart;
});

I've also tried to modify things as found in the answer here as shown below, but this doesn't work either.

var chart;
nv.addGraph(function() {
  chart = nv.models.stackedAreaChart()
                .useInteractiveGuideline(true)
                .x(function(d) { return new Date(d[0]); })
                .y(function(d) { return d[1] })
                .color(keyColor)
                .transitionDuration(300);

  chart.xScale = d3.time.scale();
  chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .tickFormat(d3.format(',f'));

Answer 1

apparently, d3 uses 13 digits unix timestamp (including microseconds) and you have 10 digits unix timestamp. try doing this:

.tickFormat(function(d) { return d3.time.format('%x')(new Date(d*1000)) });

Answer 2

The "problem" is with the data. I changed the date formatting from assuming "%m/%d/%Y" to "%H:%M:%S". Here is the code change:

chart.xAxis.tickFormat(function (d) {
    // changed from %x to %X
    // see https://github.com/mbostock/d3/wiki/Time-Formatting#user-content-format
    return d3.time.format('%X')(new Date(d))
});

I generated a FIDDLE for you to check.