d3.js Chart breaks after moving json data to external file

Question

I'm working on a d3.js, crossfilter.js and dc.js tutorial. Everything worked until I removed the json data from the page code to call it from an exteranl file named data.json. I recieve an error:TypeError: newData is undefined n1 = newData.length; in crossfilter.js line 552 I'm stumped but I think I'm close. Thank you for your help.

/*
var data = [
        {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
        {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
        {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
        {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
        {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
        {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
        ];

*/

var data = d3.json('data/data.json', function (error,data) {

var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
    d.Year=d.date.getFullYear();
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

hitslineChart
    .width(500).height(200)
    .dimension(dateDim)
    .group(hits)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .brushOn(false)
    .yAxisLabel("Hits per day");

var yearRingChart = dc.pieChart("#chart-ring-year"); var yearDim = ndx.dimension(function(d) {return +d.Year;}); var year_total = yearDim.group().reduceSum(function(d) {return d.http_200+d.http_302;});

yearRingChart .width(150).height(150) .dimension(yearDim) .group(year_total) .innerRadius(30);

var status_200=dateDim.group().reduceSum(function(d) {return d.http_200;});
var status_302=dateDim.group().reduceSum(function(d) {return d.http_302;});
var status_404=dateDim.group().reduceSum(function(d) {return d.http_404;});

hitslineChart

.width(500).height(200) .dimension(dateDim) .group(status_200,"200") .stack(status_302,"302") .stack(status_404,"404")
.renderArea(true) .x(d3.time.scale().domain([minDate,maxDate])) .brushOn(false) .legend(dc.legend().x(50).y(10).itemHeight(13).gap(5)) .yAxisLabel("Hits per day");

var datatable   = dc.dataTable("#dc-data-table");
  datatable
    .dimension(dateDim)
    .group(function(d) {return d.Year;})
    // dynamic columns creation using an array of closures
    .columns([
        function(d) { return d.date.getDate() + "/" + (d.date.getMonth() + 1) + "/" + d.date.getFullYear(); },
        function(d) {return d.http_200;},
        function(d) {return d.http_302;},
        function(d) {return d.http_404;},        
        function(d) {return d.total;}
    ]);

dc.renderAll();

});

Charlie L Charlie L · Accepted Answer · 2014-11-21T00:15:51

I haven't used D3 too much, but it seems like the error is saying that your 'data' variable is undefined. From reading the docs, it seems like 'd3.json' makes an http request and doesn't work with relative paths. I'd check to see if the error variable in your callback has some information in it. Hope this helps.

d3.json(url[, callback])

Creates a request for the JSON file at the specified url with the mime type "application/json". If a callback is specified, the request is immediately issued with the GET method, and the callback will be invoked asynchronously when the file is loaded or the request fails; the callback is invoked with two arguments: the error, if any, and the parsed JSON. The parsed JSON is undefined if an error occurs. If no callback is specified, the returned request can be issued using xhr.get or similar, and handled using xhr.on.

The comments to the first answer on this post suggest that you can do this in Firefox but not Chrome. Loading local JSON file

d3.js Chart breaks after moving json data to external file

1 Answers

d3.json(url[, callback])