2

I'm working on a team project and the d3 map is rendering correctly on everyone else's computer but mine. Here's my map code snippet:

var g = svg.append("g");

// as written, the function(error, us) callback won't fire until the d3.json finishes
d3.json("json/usa_map.json", function(error, us) {
  g.selectAll("path")
    .data(us.features)
    .enter()

It breaks on us.features and it says there is no method "features" on undefined. Here is my geoJson snippet:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GEO_ID": "0400000US04", "STATE": "04", "NAME": "Arizona", "LSAD": "", "CENSUSAREA": 113594.084000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -112.538593, 37.000674 ], [ -112.534545, 37.000684 ], [ -112.368946, 37.001125 ], [ -112.357690, 37.001025 ], [ -111.412784, 37.001478 ], [ -111.405869, 37.001481 ], [ -111.405517, 37.001497 ], [ -111.189888, 37.000959 ], ...

So as you can see... I have a property called "features".

Also, my map works on firefox but not chrome. Any idea what is going on?

The error message that gets passed in the callback:

SyntaxError: Unexpected token { {stack: (...), message: "Unexpected token {"}

P Varga
  • 19,174
  • 12
  • 70
  • 108
Jwan622
  • 11,015
  • 21
  • 88
  • 181
  • 1
    Maybe you should check for `error` from your ajax request first? – Oleg May 01 '15 at 17:58
  • 1
    What is your method of serving the file? Are you accessing the URL : "file:///myd3.html" or are you running a local server and using "http://localhost.../myd3.html" – cmonkey May 01 '15 at 17:58
  • Can you upload the file somewhere so different people can test with different browser. Just in case the file is ready for being published =) – kwoxer May 02 '15 at 19:53

1 Answers1

1

This means the server's response to json/usa_map.json in this case cannot be parsed as valid JSON. I cannot speculate why, but if you look at the response in the Chrome Dev Tools' Network tab it will probably be obvious.

P Varga
  • 19,174
  • 12
  • 70
  • 108