Currently delving into d3 and experimenting with transforming a static bubble chart into a dynamic one that adjusts by removing or adding bubbles based on JSON changes.
I am aiming to have the JSON file refreshed every 5 seconds to update the bubble chart. I attempted to implement setInterval() with the code snippet below, although it's not functioning as intended...
var inter = setInterval(function() {
updateData();
}, 5000);
function updateData() {
d3.json("sample.json", function(error, data) {
if (error) throw error;
//receiving the json file
root = d3.hierarchy(classes(data))
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
console.log(root);
bubble(root);
node = svg.selectAll(".node")
.data(root.children);
node.exit().remove();
//insertion of new elements from the file
node.enter().append("g")
.attr("class", "node")
node.append("title")
.text(function(d) { return d.data.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) {
return color(d.data.packageName);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.className.substring(0, d.r / 3); });
});
}
//==============================================================================
// updates end here
d3.select(self.frameElement).style("height", diameter + "px");
// Helper function definitions
// Fetches a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
Verifying root in the console produced no changes
In addition, my knowledge about AJAX is limited. Is it mandatory to incorporate AJAX to update the JSON data?
If required, how can the POST method be utilized to refresh the entire JSON file?