WOT - No of Chars
by Nivaldo
CSS
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
JavaScript
//Width and height
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = 900 - margin.left - margin.right;
var height = 120 - margin.top -margin.bottom;
var w = width;
var h = height;
// UPDATE CHART BETWEEN NORMAL (DATASET) AND CUMMULATIVE (cumDATASET)
// VIA SOME UI SELECTOR
var dataset = [
{"val":5,"key":"Pr"},
{"val":10,"key":"1"},
{"val":5,"key":"2"},
{"val":3,"key":"3"},
{"val":0,"key":"4"},
{"val":3,"key":"5"},
{"val":3,"key":"6"},
{"val":2,"key":"7"},
{"val":1,"key":"8"},
{"val":0,"key":"9"},
{"val":5,"key":"10"},
{"val":6,"key":"11"},
{"val":3,"key":"12"},
{"val":3,"key":"13"},
{"val":0,"key":"14"},
{"val":5,"key":"15"},
{"val":4,"key":"16"},
{"val":0,"key":"17"},
{"val":2,"key":"18"},
{"val":1,"key":"19"},
{"val":0,"key":"20"},
{"val":0,"key":"21"},
{"val":0,"key":"22"},
{"val":0,"key":"23"},
{"val":5,"key":"24"},
{"val":4,"key":"25"},
{"val":2,"key":"26"},
{"val":2,"key":"27"},
{"val":0,"key":"28"},
{"val":4,"key":"29"},
{"val":3,"key":"30"},
{"val":1,"key":"31"},
{"val":0,"key":"32"},
{"val":0,"key":"33"},
{"val":2,"key":"34"},
{"val":2,"key":"35"},
{"val":2,"key":"36"},
{"val":1,"key":"37"},
{"val":3,"key":"38"},
{"val":3,"key":"39"},
{"val":0,"key":"40"},
{"val":0,"key":"41"},
{"val":0,"key":"42"},
{"val":2,"key":"43"},
{"val":1,"key":"44"},
{"val":0,"key":"45"},
{"val":0,"key":"46"},
{"val":1,"key":"47"},
{"val":0,"key":"48"},
{"val":0,"key":"49"},
{"val":0,"key":"50"},
{"val":1,"key":"51"},
{"val":5,"key":"52"},
{"val":4,"key":"53"}
];
var cumDataset = [];
var sVal = 0;
dataset.forEach(function(d) {
// get and modify the property values
sVal = sVal + d.val;
//var val = d.val + 1;
var key = d.key;
// add the modified property values to the new array
cumDataset.push({"val":...