67

I am learning d3. There are certain ways of loading the data in d3 js. But all of them seem to make a HTTP GET. In my scenario, I already have the json data in a string. How can I use this string instead of making another http request? I tried to look for documentation for this but found none.

This works:

d3.json("/path/flare.json", function(json) {
    //rendering logic here
}

Now, if I have:

//assume this json comes from a server (on SAME DOMAIN)
var myjson = '{"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]}';

How do I use already computed 'myjson' in d3 & avoid a async call to server? Thanks.

Ravi
  • 3,719
  • 6
  • 28
  • 40
  • What is it that you want to do with the object? Also, why would you hard-code that as a string instead of as a plain JavaScript object? – Pointy Jun 07 '12 at 15:36
  • 1
    @Pointy The server returns it as a model attribute in the response. So I have the string. For eg, the json I have corresponds to the code in http://mbostock.github.com/d3/ex/bubble.html Thats the logic that goes in there – Ravi Jun 07 '12 at 15:41
  • See also http://stackoverflow.com/questions/20940854/how-to-load-data-from-an-internal-json-array-rather-than-from-an-external-resour – Cees Timmerman Apr 09 '14 at 07:52

3 Answers3

83

Simply replace d3.json call with

json = JSON.parse( myjson );

IE: 

var myjson = '{"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]}';

// d3.json("/path/flare.json", function(json) { #delete this line

    json = JSON.parse( myjson ); //add this line

    //rendering logic here

//} #delete this line

UPDATE 09/2013

Original code has changed. So varname json should be root:

// d3.json("flare.json", function(error, root) { #delete this line

    root = JSON.parse( myjson ); //add this line

    //rendering logic here

//} #delete this line
Luca Rainone
  • 16,138
  • 2
  • 38
  • 52
  • 3
    Got that part. Can you let me know how to use this parsed 'json' object to render the graph (without making a GET reqeust) found here http://mbostock.github.com/d3/ex/bubble.html The example uses *d3.json("../data/flare.json", function(json)* which makes a http call. Any pointers to docs/examples will help too. Thanks. – Ravi Jun 07 '12 at 15:47
  • 7
    @Ravi replace line `14` with `json = JSON.parse( myjson );` and delete line `33`. Try it – Luca Rainone Jun 07 '12 at 15:57
  • Tried it. Worked perfectly! Now I see what is happening... Thank you!! – Ravi Jun 07 '12 at 16:02
  • Thanks, I had similar situation. Of course obvious now that it works but your guidance was helpful since I am still getting my bearings with d3. – David Mann Oct 14 '12 at 14:55
  • 1
    wait, how exactly is the variable `json` being passed to d3 library? Can you explain what is happening here? – Adrian Apr 26 '13 at 21:28
  • The original comment wasn't clear, but the new variable "json" takes the place of the "graph" variable in the callback 'function(error, graph)'. – bpodgursky Aug 05 '13 at 08:18
  • All this code does is it tells you how to parse a json string to a json object. If you want to see how to tie that data with d3, see @dardo's answer below. – iheartcsharp Dec 15 '16 at 16:18
3

The answer from chumkiu worked great for me but needed a couple of tweaks - in the latest version of the d3 bubble chart, you need to define root rather than json, as in

 root = JSON.parse( myjson );

Alternatively, you could replace "root" with "json" in the rest of the code of course. :-)

For anyone coming to this answer with questions about d3 node-link trees that utilize local data sets, this answer worked great for me - many thanks to the contributors on this page.

John Sharp
  • 41
  • 2
2

According to this example:

http://phrogz.net/JS/d3-playground/#StockPrice_HTML

Here they are storing the graph data within the variable $data, and setting it via the .data($data) function.

I'd apply this method to whatever graph you are using.

dardo
  • 4,870
  • 4
  • 35
  • 52
  • This might work; They have a similar example here: https://github.com/mbostock/d3/wiki/Selections#wiki-data – Adrian Apr 26 '13 at 21:32