relative size - updating

by rolfsf

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<ul class="filter-switch">
    <li class="active"><a href="#">data1</a></li>
    <li><a href="#">data2</a></li>
</ul> 

<div class="relative-size-chart" id="overview-graph"></div>

CSS

body { font-family: helvetica, arial, "san-serif"}

.filter-switch li {
    list-style-type: none;
}

.filter-switch .active a {     
        font-weight: bold; 
        text-decoration: none; 
        color: #000;
}

.relative-size-chart .chart-bg{fill:#f8f8f8;stroke:#dfdfdf}
.relative-size-chart .cluster-line{stroke-width:2px;stroke:#FFF}
.relative-size-chart .centerline{stroke:#F15727;stroke-width:1px}
.relative-size-chart .bubble{fill:#639dea;stroke-width:5px;stroke:#3681e4;pointer-events:all}
.relative-size-chart .bubble.empty{stroke:#CCC;fill:#999}
.relative-size-chart .bubble.empty:hover{cursor:default}
.relative-size-chart .cluster-value{font-size:2em;font-weight:700}
.relative-size-chart .cluster-name{font-size:1em;font-weight:400}
.relative-size-chart .total-cluster{fill:#F15727}
.relative-size-chart text{fill:#FFF;text-anchor:middle;pointer-events:none}
.relative-size-chart text.header{fill:#000;font-size:.75em;font-weight:700;text-transform:uppercase}
.relative-size-chart .total-value{font-size:2.25em;font-weight:700}
.relative-size-chart .total-name{font-size:1em;font-weight:400}

JavaScript

/**
 *  Relative Size Chart for d3.js
 */

function relativeSizeChart() {
    var width = 1200,
        margin = 0,
        padding = 16,
        r = d3.scale.linear(),
        
        onTotalMouseOver = null,
        onTotalClick = null,
        onClusterMouseOver = null,
        onClusterClick = null,
        
        val = function(d){return d;};
        totalFormat = function(d){return d;};
        clusterFormat = function(d){return d;};
        clusterFormat2 = function(d){return d;};

    function chart(selection) {
        selection.each(function(data) {
            //console.log(data);

            var clusterCount = data.Clusters.length,
                totalColWidth = 0.3*width,
                colWidth = (width - totalColWidth)/clusterCount,
                height = colWidth + 2*padding,
                maxRadius = (colWidth - 10)/2;


            var svg = d3.select(this).selectAll("svg")
                        .data([data]);

            var svgEnter = svg
                    .enter().append("svg")
                        .attr('class', function(d){
                            if( onTotalMouseOver !== null || onTotalClick !== null ||onClusterMouseOver !== null || onClusterClick !== null){
                                return 'clickable';
                            }else{
                                return 'static';
                            }
                        })
                        .attr("width", width)
                        .attr("height", height);
                        
            svgEnter.append('g')
                    .attr('class', 'background');
            var background = svg.selectAll('g.background');

            svgEnter.append('g')
                    .attr('class', 'headers')

            var headers = svg.selectAll('g.headers').selectAll('text.header')
                             .data(data.Headers, function(d) { return d; });            
            svgEnter.append('g')
                    .attr('class',...