How to create weighted tree with JSON

← Back to discussions

In Progress

Posted in: Product Support

naruka17

August 11, 2016 at 8:50 am #6377

Hi,
I want to create same chart with JSON data. Could you please help me to create it. What JSON format is required to create same chart?

Thanks
Chetan

vizuly

August 11, 2016 at 11:29 am #6381

Hello Chetan,

Take a look at this for JSON format for the Flare data in this example: http://bl.ocks.org/mbostock/4063550

For the tree you will also want to set the appropriate “Key” and “Value” properties so it can access the appropriate data in the JSON payload.

– Tom

naruka17

August 16, 2016 at 9:31 am #6413

thanks for your reply.
Just want to know, What type of changes needs to be done. For example
1. nest object which required to read levels of excel/csv sheet. Do we required it for JSON. If not then how it will link with tree.
2. Calculated column which required for weighted like in your example federal, state and local.

vizuly

August 16, 2016 at 10:18 am #6414

Hello Chetan,

Your best bet is to use your debugger to inspect the nest object at the end of the prepData function in weightedtree_test.js. Take a look at that object structure and determine what you need to do do your JSON data to match it.

Sorry I can’t be more specific in my answer, but there are a lot of details to the data structure that I am sure I would miss something.

– Tom

P.S. If you want more personalized service I am happy to help you through paid support via http://www.brightpoitninc.com. Or I am sure this is something other D3 developers could easily help with.

Chuckytah

August 23, 2016 at 6:48 am #6420

Hello naruka17,

did you find any solution? Can you share it?

Mike

September 3, 2016 at 8:56 am #6432

I was trying to do the same thing. Didn’t get there, here is a description of my attempts

I used console.log(nest) and console.log(data) in the loadData() function and initialize() to try and see the form of the data. I was hoping it would be simple like in the references example above. I went am using a slightly different referenced example, but I believe both examples from blocks use the same data.

I updated the code below to try and sway the example code for flare.json

I copied this file and put it into the data folder:
https://bl.ocks.org/mbostock/raw/4063550/flare.json

Then in loadData I tried this, I could see the object was being read in, but kept throwing errors.

I was tring to change the properties in the initialize function to make it appropriate for the new data


function loadData() {

       d3.json("data/flare.json", function(error, flare) {
            if (error) throw error;

        //data=JSON.parse(flare); I tried this but took it out
        data=flare;

        initialize();

    });

}

Then in the initilize function I tried to follow the comments to update the properties to the new data set


function initialize() {

// removed code here just to show the parts I was editing
    console.log(data)
    viz.data(data) 
// flare.json is hierarchial array. should this be viz.data(function(d){return d})                                                         // Expects hierarchical array of objects.
        .width(600)                                                     // Width of component
        .height(600)                                                    // Height of component

        .children(data.children)                     
// Denotes the property that holds child object array
//flare.json has the nested array inside of "children" I also tried d.children
        .key(data.name)                              // Unique key
        .value(data.size)                   // The property of the datum that will be used for the branch and node size
        .fixedSpan(-1)                                                  
// fixedSpan > 0 will use this pixel value for horizontal spread versus auto size based on viz width
        .label(data.name)
        .on("measure",onMeasure)                                        // Make any measurement changes
        .on("mouseover",onMouseOver)                                    // mouseover callback - all viz components issue these events
        .on("mouseout",onMouseOut)                                      // mouseout callback - all viz components issue these events
        .on("click",onClick);                                           // mouseout callback - all viz components issue these events

Mike

September 3, 2016 at 3:59 pm #6433

I figured out how to load my own json file. used flare.json from the bl.ocks example.

Two main things

1. You have to modify the flare.json file to have “size” at every level, this was the point of the original aggregate function. So something like this (I didn’t do all the math):


{
    "name": "flare",
    "size": 65000,
    "children": [{
        "name": "analytics",
        "size": 48716,
        "children": [{
            "name": "cluster",
            "children": [{
                "name": "AgglomerativeCluster",
                "size": 3938
            }, {
                "name": "CommunityStructure",
                "size": 3812
            }, {
                "name": "HierarchicalCluster",
                "size": 6714
            }, {
                "name": "MergeEdge",
                "size": 743
            }]
        }, {
            "name": "graph",
            "size": 26435,

2. Since you don’t have to prep the data if it is already in the right format I updated the load function to do all the work – If you look at the HTML file, this is the function called in the script at the end of the HTML file, just copied and pasted initialize() into load and consolidated the functions. You should be able to use this to swap the data out for flare.jon and then modify flare.json to use the weightedtree.js


function loadData() {

        d3.json("data/flare.json", function(error, flare) {
            if (error) throw error;

        data=flare;

        viz = vizuly.viz.weighted_tree(document.getElementById("viz_container"));

    //Here we create three vizuly themes for each radial progress component.
    //A theme manages the look and feel of the component output.  You can only have
    //one component active per theme, so we bind each theme to the corresponding component.
    theme = vizuly.theme.weighted_tree(viz).skin(vizuly.skin.WEIGHTED_TREE_AXIIS);

    //Like D3 and jQuery, vizuly uses a function chaining syntax to set component properties
    //Here we set some bases line properties for all three components.

    // You need to update the childredn, key, value, and label properties here. You would need to add "size" at every level in flare.json
    viz.data(data)                                                      // Expects hierarchical array of objects.
        .width(600)                                                     // Width of component
        .height(600)                                                    // Height of component
        .children(function(d){return d.children})                     // Denotes the property that holds child object array
        .key(function(d){return d.name})                             // Unique key
        .value(function(d){return d.size})                  // The property of the datum that will be used for the branch and node size
        .fixedSpan(-1)                                                  // fixedSpan > 0 will use this pixel value for horizontal spread versus auto size based on viz width
        .label(function(d){return d.name})
        .on("measure",onMeasure)                                        // Make any measurement changes
        //.on("mouseover",onMouseOver)                                    // mouseover callback - all viz components issue these events
        //.on("mouseout",onMouseOut)                                      // mouseout callback - all viz components issue these events
        .on("click",onClick);                                           // mouseout callback - all viz components issue these events

    //We use this function to size the components based on the selected value from the RadiaLProgressTest.html page.
    changeSize(d3.select("#currentDisplay").attr("item_value"));

    // Open up some of the tree branches.
    //I commented these out because the data is different and may not have the same branches to open

    //viz.toggleNode(data.values[2]);
   // viz.toggleNode(data.values[2].values[0]);
   // viz.toggleNode(data.values[3]);

    });

}

vizuly

September 6, 2016 at 6:15 am #6434

Great job Mike!

Thanks for posting this!

– Tom

Viewing 5 reply threads

You must be logged in to reply to this topic.

Search Forums

Premium Support