CODEWITHSUNDEEP
javascriptjqueryjsond3.js
torrho
torrho

Reputation: 1883

Using the Force-Directed Graph Example from bl.ocks.org

I'm not a javascript, jquery, json expert in the slightest.

My goal is to create a graph of a set of data I have using the force-directed graph example from bl.ock.us.
1) I wrote a python script to generate the json format. 2) Seeing how others used jsfiddler to test their force-directed graph example, I made my own jsfiddler for my example

The problem

The graph does not show in my example! I believe my json formatted data is correct. I don't know why it will not work. The only difference I see between the reference example in (2) above and my example is the ordering of the data and the quantity of data.

The ordering of data in the reference example is: 

{ "nodes":[{"name": "nodeName1","group":1}, 
           {"name": "nodeName2","group":1}, 
           ...,
           {"name": "nodeNameN","group":1}]
 ,"links":[{"source":"nodeNameX", "target":"nodeNameY", "value":3}]}

The ordering of the data in my json format is:

{ "nodes": [{ "group":1, "name":"nodeName1"},
              ....,
             { "group":M, "name":"nodeNameK"}],
  "links": [{"value": 1, "source": "nodeNameU", "target": "nodeNameV"}]

The only major difference I see is the ordering of the keys in the json data. Does this matter? Again, I am a total json, javascript noob here.

StackOverflow References

stackoverflow reference 1

stackoverflow reference 2

Upvotes: 1

Views: 79

Answers (1)

Cleared
Cleared

Reputation: 2580

Looking at the console output in your browser you can see that d3 is unknown, so you need to include the d3-library. In JSFiddle, add https://d3js.org/d3.v3.js to external resoruces.

But after this you still get an error saying

Cannot read property 'weight' of undefined

From experience, the reason for this might be that you in links has a sourceor target that do not exists in nodes.

Update: I did a quick check, and in your links you have a target name AppendixJ but this cant be found in nodes.

Here is an updated fiddle with d3-added as external resource and the link containing AppendixJ removed

Upvotes: 2

Related Questions