d3.js flare.json using my created Json w/ collapsible tree

Question

I created my own Json file to use with the collapsible tree in d3. I have three extra fields in the file for each child. I created one for one root node that has three children. Each of those children have leaves, and ends there, so a total of three levels.

I am stuck as being able to load the json. I have ran the code with the original flare.json, so all else is working. I have the same json pasted below. Thank you!

UPDATE: I was able to deal with this by copy/pasting the json into the html to create a variable as in this question: How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js? It works, though not ideal as I have a large json list.

Here is a pastebin link of my html code: http://pastebin.com/njdfrwhf Thanks!

  {
"name": "checkD",
"children": [
     {
     "name": "XX.YY.IP1",
     "children": [
      {"name": "xxx.yyy.1", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.2", "distance": 1.8, "CC": "US", "m":0},
      {"name": "xxx.yyy.3", "distance": 4.5, "CC": "US", "m":0},
      {"name": "xxx.yyy.4", "distance": 2.5, "CC": "US", "m":0},
      {"name": "xxx.yyy.5", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.6", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.7", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.8", "distance": 3, "CC": "US", "m":1},
      {"name": "xxx.yyy.9", "distance": 1, "CC": "US", "m":1},
      {"name": "xxx.yyy.10", "distance": 5, "CC": "US", "m":1}
      ]
    },
     {
     "name": "XX.YY.IP2",
     "children": [
      {"name": "xxx.yyy.1", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.2", "distance": 1.8, "CC": "US", "m":1},
      {"name": "xxx.yyy.3", "distance": 2, "CC": "US", "m":1},
      {"name": "xxx.yyy.4", "distance": 4.3, "CC": "US", "m":1},
      {"name": "xxx.yyy.5", "distance": 5, "CC": "US", "m":0},
      {"name": "xxx.yyy.6", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.7", "distance": 1.3, "CC": "US", "m":0},
      {"name": "xxx.yyy.8", "distance": 3, "CC": "US", "m":1},
      {"name": "xxx.yyy.9", "distance": 4, "CC": "US", "m":1},
      {"name": "xxx.yyy.10", "distance": .5, "CC": "US", "m":1}
      ]
     },
     {
     "name": "XX.YY.IP3",
     "children": [
      {"name": "xxx.yyy.1", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.2", "distance": 1.8, "CC": "US", "m":0},
      {"name": "xxx.yyy.3", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.4", "distance": 4.3, "CC": "US", "m":0},
      {"name": "xxx.yyy.5", "distance": 5, "CC": "US", "m":0},
      {"name": "xxx.yyy.6", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.7", "distance": 1.3, "CC": "US", "m":0},
      {"name": "xxx.yyy.8", "distance": 3, "CC": "US", "m":0},
      {"name": "xxx.yyy.9", "distance": 4, "CC": "US", "m":0},
      {"name": "xxx.yyy.10", "distance": .5, "CC": "US", "m":0}
      ]
     }
 ]
}

Problem you are facing is that you are not able to load the json file from your server? — Unknown User, Apr 19 '14 at 06:43
That could be a reason. I inititally tried loading the file by using the file name only ("test3.json") (its in the same directory as the html file), then secondly by using the full http: "localhost:8888/test3.json" I assume it is not a file format issue, I made sure it is pure text, and the format of the {[: etc.. are all fine as a local variable. — KBA, Apr 19 '14 at 12:51

elsherbini · Accepted Answer · 2014-04-19T15:05:41.990

0

When you load a file with d3.json, it uses an http request. If the file is local, most modern browsers will refuse to GET the file, because that would be a security risk to users of their browsers (GET c:\allmypasswords.txt)

Firefox is more permissive with requesting local files from locally run HTML, so you can try running your code there. The alternative is to serve the JSON file with a server, either by hosting it on the web or running a server locally.

EDIT It seems the issue is actually the JSON. You have two values that contain leading decimals. When I added a 0 in front of the decimal it worked. Weird.

edited Apr 19 '14 at 15:05

answered Apr 19 '14 at 00:31

elsherbini

1,596
13
23

Thank you for your reply. I am running a server `code` python -m SimpleHTTPServer 8888 & `code` Then put the URL in my browser: http://localhost:8888/file.html I changed loading the file from test.json to: d3.json("http://localhost:8888/test3.json", function(error, flare) { but I am still getting the same error: TypeError: 'undefined' is not an object (evaluating 'root.x0 = height / 2'). But when I revert back to using the local variable w/ the json contents, it works. I put the code in pastebin: http://pastebin.com/njdfrwhf Thanks for your help – KBA Apr 19 '14 at 05:49
I think the issue might be the JSON file itself, I've edited my answer above. – elsherbini Apr 19 '14 at 15:06
thanks a lot, that made it finally work! I tested and could also read the file in locally (but running the python http server) – KBA Apr 20 '14 at 05:05

d3.js flare.json using my created Json w/ collapsible tree

1 Answers1

Linked