Unable to load json file in html using d3.js
I want to load data from a json file in an HTML file and use D3 to
visualize it. I am able to view the data in the browser if the file is
loaded on its own. The file is also received correctly verified by the 200
status. But the contents of the file are interpreted as null.
Here are the contents of the json file -
[{"totdistance": [["1987", "20926761"], ["1988", "81974990"], ["1989",
"93470285"], ["1990", "116938068"], ["1991", "128179520"], ["1992",
"123889922"], ["1993", "113169123"], ["1994", "119145135"], ["1995",
"132070386"], ["1996", "145689003"], ["1997", "158173093"], ["1998",
"164900616"], ["1999", "180094162"], ["2000", "191005263"], ["2001",
"186583998"], ["2002", "185726579"], ["2003", "189239126"], ["2004",
"203622782"], ["2005", "200373825"]],
"routes": [["1987", "45399"], ["1988", "180871"], ["1989", "195588"],
["1990", "216314"], ["1991", "219896"], ["1992", "199066"], ["1993",
"176756"], ["1994", "177851"], ["1995", "194508"], ["1996", "203001"],
["1997", "206304"], ["1998", "203071"], ["1999", "209496"], ["2000",
"219160"], ["2001", "209979"], ["2002", "196111"], ["2003", "189519"],
["2004", "195939"], ["2005", "197853"]], "code": "HP", "name": "America
West Airlines Inc. (Merged with US Airways 9/05. Stopped reporting
10/07.)", "avgdelay": [["1987", "16"], ["1988", "8"], ["1989", "11"],
["1990", "12"], ["1991", "12"], ["1992", "7"], ["1993", "11"], ["1994",
"15"], ["1995", "17"], ["1996", "23"], ["1997", "17"], ["1998", "29"],
["1999", "25"], ["2000", "28"], ["2001", "18"], ["2002", "9"], ["2003",
"13"], ["2004", "25"], ["2005", "18"]]}]
Here is the code that tries to load the file and read its contents -
d3.json("flights.json", function(flights) {
But I get error on the console that flights is null.
I have tried running this code on a webserver using IE, Firefox and
Chrome. But no solution.
I am using this as a starting point -
https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/nations/index.html
Here is the error - Uncaught TypeError: Cannot call method 'map' of null
The json is valid as per http://jsonlint.com/
Thanks for any help to fix this issue.
No comments:
Post a Comment