JavaScript
var set1 = [
{"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 set2 = [
{"title": "Set-1", "count": 12, "measures": [6, 2, 10, 10]},
{"title": "Set-2", "count": 29, "measures": [20, 10, 3, 28]},
{"title": "Set-3", "count": 8, "measures": [5, 2, 3, 8]},
{"title": "Set-4", "count": 8, "measures": [3, 4, 2, 4]},
{"title": "Set-5", "count": 8, "measures": [2, 7, 5, 6]},
{"title": "Set-6", "count": 25, "measures": [2, 23, 25, 6]}
];
d3.selectAll("a")
.on("click",function() {
if(this.id === "update1"){
updateChart(set1);
}else{ updateChart(set2)}
});
function updateChart(data){
d3 .select('#overview-graph')
.datum(data)
.call(relativeCompletionChart()
//options
);
}
updateChart(set1);
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).selectAll("svg")
.data([data]);
var svgEnter = svg.enter().append("svg")
...