Render D3 graph from a string of JSON instead of a JSON file

First, lets look at what d3.json does.

d3.json("/assets/flare.json", function(root) {    // code that uses the object 'root'});

This loads the file /assets/flare.json from the server, interprets the contents as JSON and passes the resulting object as the root argument to the anonymous function.

Where you already have a JSON object, you don't need to use the d3.json function - you can just use the object directly.

var root = {   "name": "flare",   "children": [     ...   ]};// code that uses the object 'root'

If the object is represented as a string, then you can use JSON.parse to get the object:

var myString = '{"name": "flare","children": [ ... ] }';var root = JSON.parse(mystring);// code that uses the object 'root'

Second, lets look at what d3.layout.cluster expects of your data. As per the docs:

... the default children accessor assumes each input data is an object with a children array ...

In other words, you data needs to be of the form:

var mystring = '{    "name": "Product",    "children": [        {            "name": "id",            "type": "number",            "description": "Product identifier",            "required": true        },        ...        {            "name": "stock",            "type": "object",            "children": [                {                    "name: "warehouse",                    "type": "number"                },                {                    "name": "retail",                    "type": "number"                }            ]        }    ]}

d3.json actually takes URL as an argument, so instead of giving it the path to the file, I would suggest to delegate data management to the controller (especially, if in future you would need to load it from DB), so to simplify things:

1. Create a method in your controller, which would actually open the file and return its content:

class YourFlareController < ApplicationController    def load        @data = File.read("app/assets/json/flare.json")        render :json => @data    endend

1. Make sure you have a route in your routes.rb

get "yourflare/load"

1. And now in your javascript you can simply call

d3.json("http://host/yourflare/load", function(root) {