Advanced Dynamic SVG Bubble Chart

Advanced Dynamic SVG Bubble Chart

by Avinashullal

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<select>
    <OPTION selected value=Select>Select</OPTION>
    <OPTION value=Proprietary>Proprietary</OPTION>
    <OPTION value=Regulatory>Regulatory</OPTION>
    <OPTION value=Tailored>Tailored</OPTION>
</select>
<br />
<br />
<div id="Bubble_Block"></div>

CSS

.MainTable {
    background-color:#eee;
    border: 1px solid #000;
    padding: 10px;
}
table td {
    padding : 20px;
}
text {
    font: 10px Segoe UI;
}

JavaScript

var json = jQuery.parseJSON('{"name": "flare","children" : [{"name": "Custom","children" : [{"name": "CMO","size": 3},{"name": "Compliance","size": 10},{"name": "EHS Consulting","size": 14},{"name": "CRO","size": 3},{"name": "Chemicals","size": 9},{"name": "Stability","size": 9}]},{"name": "Generic","children" : [{"name": "Animal Services","size": 15},{"name": "Stability","size": 9},{"name": "Chemicals","size": 9},{"name": "CMO","size": 3},{"name": "Real Estate","size": 11},{"name": "Regulatory","size": 10}]},{"name": "Proprietary","children" : [{"name": "Animal Breeding","size": 15},{"name": "Animal Services","size": 15},{"name": "CRO","size": 3},{"name": "Medical Affairs","size": 15},{"name": "Packaging","size": 9},{"name": "Real Estate","size": 11},{"name": "Regulatory","size": 10},{"name": "Chemicals","size": 9},{"name": "Stability","size": 9}]},{"name": "Tailored","children" : [{"name": "Analytical Testing","size": 18},{"name": "3PL","size": 3},{"name": "Animal Breeding","size": 15},{"name": "Animal Services","size": 15},{"name": "Medical Affairs","size": 15},{"name": "Packaging","size": 9},{"name": "Real Estate","size": 11},{"name": "Regulatory","size": 10},{"name": "Chemicals","size": 9},{"name": "Stability","size": 9}]}]}');

var $table;
var $wrap;
var ti;

var r = 350,
    format = d3.format(",d"),
    fill = d3.scale.category20c();

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

$(document).ready(function () {
    $table = $('<table/>').addClass('MainTable');
    $('select').children('option').map(function (i, e) {
        // alert(e.innerText);
        if (e.innerText != "Select") {
            $wrap = $('<div/>').attr('id', e.innerText);
            // $table.append($('<tr>'));
            Create_Table_Div();
            draw_Bubble(e.innerText, e.index);
        }
    });
    $('select').change(function () {
        // alert($(this).val());
        $("svg").remove();
        var sld = $(this).val();
        //...