relative completion with text tween

by rolfsf

HTML

<a href="#" id="update1">Set 1</a>
<a href="#" id="update2">Set 2</a>

<div id="overview-graph"></div>

CSS

.chart-bg{fill:#f8f8f8;stroke:#dfdfdf}
.range{fill:#CCC;shape-rendering:geometricPrecision}
.measure{fill:#a7c573;shape-rendering:geometricPrecision}
.marker{stroke:#666;stroke-width:1px;shape-rendering:geometricPrecision}
.value{font-size:0.75em;font-weight:300;fill:#58702f}

JavaScript

var sets1 = [
 
            {"title": "Set-1", "count": 17, "measures": [10, 13, 16, 14]},
            {"title": "Set-2", "count": 23, "measures": [12, 18, 19, 23]},
            {"title": "Set-3", "count": 25, "measures": [19, 22, 23, 20]},
            {"title": "Set-4", "count": 4, "measures": [4, 4, 4, 4]},
            {"title": "Set-5", "count": 8, "measures": [5, 7, 8, 6]}
];

var sets2 = [
 
            {"title": "Set-1", "count": 17, "measures": [6, 2, 16, 17]},
            {"title": "Set-2", "count": 23, "measures": [15, 10, 19, 23]},
            {"title": "Set-3", "count": 25, "measures": [25, 12, 23, 18]},
            {"title": "Set-4", "count": 4, "measures": [3, 4, 2, 4]},
            {"title": "Set-5", "count": 8, "measures": [2, 7, 5, 6]}
];
  
d3.select("#update1")
    .style("cursor", "pointer")
    .on("click",function() {updateChart(sets1);});

d3.select("#update2")
    .style("cursor", "pointer")
    .on("click",function() {updateChart(sets2);});

function updateChart(data){
    d3  .select('#overview-graph')
        .datum(data)
        .call(relativeCompletionChart()
    //options
    );
}

d3  .select('#overview-graph')
    .datum(sets1)
    .call(relativeCompletionChart()
    //options
    );


function relativeCompletionChart() {
    var width = 1200,
        margin = {top: 16, right: 16, bottom: 16, left: 16},
        onSetMouseOver = null,
        onSetClick = null;

    function chart(selection) {
        selection.each(function(data) {
            var titleColWidth = 0.3*width,
                setHeight = 24,
                barHeight = 22,
                setCount = data.length,
                colCount = data[0].measures.length,
                colWidth = (width - titleColWidth)/colCount,
                rangeWidth = colWidth - 4,
                height = ((setHeight * setCount) + margin.top + margin.bottom);
            

            var svg = d3.select(this)
                        .append("svg")
                       ...