Realtime D3 bubble chart (circle pack)

Question

I'm trying to create a realtime bubble chart in d3.js The chart itself is simple as the data displayed is a non-nested array. It's just bubbles of different size.

The initial bubble chart with initial data fetched from an MVC controller via ajax is created like this:

var canvas = d3.select("#dynD3")
    .append("svg")
    .attr("width", 800)
    .attr("height", 500)
    .append("g")
    .attr("transform", "translate(50, 50)");

var pack = d3.layout.pack()
    .size([800, 450])
    .padding(10);

d3.json("/Nice/d3_getCoolBubble", function (data) {

  var nodes = pack.nodes(data);
  console.log(data);

  var node = canvas.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

  node.append("circle")
    .attr("class", function (d) { return d.children ? "noupdate" : "update" })
    .attr("id", function (d) { return d.name; })
    .attr("r", function (d) { return d.r })
    .attr("fill", function (d) { return d.children ? "#fff" : "steelblue" })
    .attr("stroke", function (d) { return d.children ? "#fff" : "#000" })
    .attr("stroke-width", "2");

  node.append("text")
    .text(function (d) { return d.children ? "" : d.name; });

Appended to the creation of the initial bubbles is a call to the

        tick()

function. This function should take care of fetching new data from the MVC controller and then performing the transitions. After the transitions have finished, the method calls itself again:

    function tick() {

        $.ajax({
            type: "GET",
            async: false,
            url: "/Nice/d3_getCoolBubble",
            data: {},
            success: function (result) {

                console.log(result);

                var update = canvas.selectAll(".update");

                update.transition()
                    .duration(5000)
                    .attr("transform", function (d) {
                        return "translate(" + d.x + "," + d.y + ")";
                    })
                    .each("end", tick);
            }
        });
    };
});

I'd be glad if someone had a good link, example or hint on how to perform the update. I guess it must be something like

• fetch new data
• calculate new model
• add / remove nodes that are new / no longer in the newly fetched data
• start transitions for all existing nodes

Thanks for any hints!

Answer 1

IE decided to AUTO-CACHE the standard "d3.json()" request. So I switched for an explicit jQuery ajax request with 'cache: false'. In its basic form, the update now works, though the code might still exhibit some of my legastheny towards d3.

I thought I'd use it to visualize the number of users watching a tv channel in our intranet tv site but I think I'll switch to a line chart.. nevertheless, here's the code:

function dynamicBubbles() {

// call redraw every 5 sec
setInterval(function() {
    redraw();
}, 5000);

var width = 960;
var height = 500;

// construct SVG container
var chart = d3.select("#dynD3").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(50, 50)");

// define our pack
var pack = d3.layout.pack()
    .size([width, height - 50])
    .padding(10);

function redraw() {

// get data from MVC controller
return $.ajax({
    type: "GET",
    async: true,
    cache: false,
    url: "/Nice/d3_getCoolBubble",
    data: { },
    success: function (data) {

        // asign new data to existing layout
        var node = chart.selectAll(".node")
            .data(pack.nodes(data), function (d) { return d.name });

        // access brand new data
        node.enter().append("g")
                .classed("node", true)
                .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
            .append("circle")
                .attr("fill", function (d) { return d.children ? "#fff" : "steelblue" })
                .attr("stroke", function (d) { return d.children ? "#fff" : "#ADADAD" })
                .attr("stroke-width", "1")
                .transition()
                .attr("r", function (d) { return d.r });

        node.transition()
            .duration(2000)
            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });


        node.select("circle")
            .transition()
            .duration(2000)
            .attr("r", function (d) { return d.r; })

        node.append("text")
            .text(function (d) { return d.name; });

    }
});