Bubble Chart Update - several nuances

http://stackoverflow.com/questions/23825126/how-to-update-bubble-chart-in-d3-js

by Nivaldo

HTML

<div id="chart"></div>
<button id="dataset1">Dataset 1</div>
<button id="dataset2">Dataset 2</div>
<button id="dataset3">Dataset 3</div>
<button id="dataset4">Dataset 4</div>

JavaScript

var diameter = 300,
    format = d3.format(",d");

var color = d3.scale.ordinal()
    .domain(["Sqoop", "Pig", "Apache", "a", "b", "c", "d", "e", "f", "g"])
    .range(["steelblue", "pink", "lightgreen", "violet", "orangered", "green", "orange", "skyblue", "gray", "aqua"]);

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(10);

var svg = d3.select("#chart").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var root = {

    "children": [{
        "name": "ASP.NET",
        "size": 10
    }, {
        "name": "WPF",
        "size": 20
    }, {
        "name": "JAVASCRIPT",
        "size": 30
    }, {
        "name": "C#.NET",
        "size": 40
    }, {
        "name": "HTML",
        "size": 15
    }, {
        "name": "D3.JS",
        "size": 60
    }, {
        "name": "VB.NET",
        "size": 50
    }, {
        "name": "LINUX",
        "size": 45
    }, {
        "name": "C",
        "size": 70
    }, {
        "name": "C++",
        "size": 65
    }]
};

var root2 = {
    "children": [{
        "name": "WPF",
        "size": Math.random() * 50
    },

    {
        "name": "Hop",
        "size": 65
    }]
};

var root3 = {

    "children": [


    {
        "name": "C++",
        "size": 65
    }]
};

var root4 = {

    "children": [{
        "name": "ASP.NET",
        "size": 10
    }, {
        "name": "WPF",
        "size": 20
    }, {
        "name": "JAVASCRIPT",
        "size": 30
    }, {
        "name": "C#.NET",
        "size": 40
    }, {
        "name": "HTML",
        "size": 15
    }, {
        "name": "D3.JS",
        "size": 60
    }, {
        "name": "VB.NET",
        "size": 50
    }, {
        "name": "LINUX",
        "size": 45
    }, {
        "name": "C",
        "size": 70
    }, {
        "name": "C++",
        "size": 65
    }, {
        "name": "HTL",
        "size": 15
    }, {
        "name": "3.JS",
        "size": 60
    }, {
      ...