-
MikeSeptember 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]); }); }
You must be logged in to reply to this topic.
© 2024 — vizuly.io