json to D3 graph

[Richard]

Dear fellow Web2py user,

I am trying to get a json variable into a D3 graph. This was successfull with a simple list of dictionaries within the python/JS vairable. But nof I want to get the famous flare data structure into my view.

In the controller I have:

def view_dendo():

    import json

    flare= [{ 'name': 'flare', 'children': [ {   'name': 'analytics',   'children': [  {     'name': 'cluster',     'children': [      {'name':'graph', 'size': 3938},      {'name': 'CommunityStructure', 'size': 3812},     ]    },    {     'name': 'graph',     'children': [      {'name':'BetweennessCentrality', 'size': 3534},      {'name': 'LinkDistance', 'size': 5731},      {'name': 'MaxFlowMinCut', 'size': 7840},      {'name':'ShortestPaths', 'size': 5914},      {'name': 'SpanningTree', 'size': 3416}     ]    },    {     'name': 'CommunityStructure' } ]  } ] }]

 

    return dict(flare=XML(json.dumps(flare)))

In the View I have:

  var flare =  {{=flare}}  ;    

    

  var nodes = cluster.nodes( flare ),

      links = cluster.links(nodes);

The view doesn't matter yet because the Chrome console comes with the message:

Uncaught SyntaxError: Unexpected token }

Comming from web2py.js

When I place the requested variable between [] :   var flare = [ {{=flare}} ] ;   

The message is the same but does not ref to web2py.js

Checking the Chrome console the dictionary is in the view indeed with 2 }  at the end     ...ructure"}]}}] ; 

I checked the python json.dumps documentation and changed the  []  in () in the dictionary in the controller.

This resulted in the same error however not with a double }} at the end  ....ze": 3416}]}]}} ;

[Andrew W]

What else is in your view? Is the code inside a <script>?
What if you just returned dict( flare=flare) in your controller?

[Richard]

Andrew,

When I respond with flare=flare I get the & issue, solved by XML()

Uncaught SyntaxError: Unexpected token & 

My script starts with:

<script>

var width = 960,

    height = 2200;

var cluster = d3.layout.cluster()

    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()

    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")

    .attr("width", width)

    .attr("height", height)

    .append("g")

    .attr("transform", "translate(40,0)");

  var flare = {{=flare}} ;    

    

  var nodes = cluster.nodes( flare ),

      links = cluster.links(nodes);

  var link = svg.selectAll(".link")

      .data(links)

    .enter().append("path")

      .attr("class", "link")

      .attr("d", diagonal);

Hope you can give me a crucial hint.

[Andrew W]

This may not be the crucial hint, but I noticed that your flare is a list (array).  If you checkout the structure at:
https://github.com/mbostock/d3/wiki/Cluster-Layout you see that its a dict (or object).

Try removing the [] around your flare definition.

Secondly:   Where I have used XML(json... in the controller  it has been to produce a standaoone .json output from web2py, I then create an independent view that then uses the d3.json function to read the json output.   That is the approach that mostly matches the majority of d3 examples.   This works if you want to separate your data sources (thinking independent data api)  from your presentation views.

The other approach is to use the variables, which you've done.  There may be more than one way to do this but this has worked for me:
1.  Change your flare definition to be a dict. remove the []
2.  Change your controller output to be return locals().
3.  In your view , in the <script> add:
    {{from gluon.serializers import json}}
    var flare = {{=XML(json(flare))}}





   

I think web2py is a good data provider for d3 apps

[Andrew W]

P..S.   The above uses the approach of the generic.json files.  Refer to:
http://web2py.com/books/default/chapter/29/10/services?search=serializers
and the generic.json code.