WOT - No of Chars (User-Driven)

So far, this is the main implementation.

by Nivaldo

HTML

<p class="one">click here to show normal without zeros</p>
<p class="two">click here to show cumulative without zeros</p>
<p class="three">click here to show cumulative with zeros</p>

CSS

body {
    font: 11px sans-serif;
    background-color: antiquewhite;
}
svg {
    background-color: white;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 10px;
}

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;

// NEXT STEP IS TO UPDATE CHART IN-PLACE OBSERVING OBJECT CONSTANCY!!!

var data = [
    {"val":1,"key":"Pr"},
    {"val":6,"key":"1"},
    {"val":7,"key":"2"},
    {"val":4,"key":"3"},
    {"val":1,"key":"4"},
    {"val":0,"key":"5"},
    {"val":0,"key":"6"},
    {"val":2,"key":"7"},
    {"val":2,"key":"8"},
    {"val":2,"key":"9"},
    {"val":0,"key":"10"},
    {"val":1,"key":"11"},
    {"val":0,"key":"12"},
    {"val":6,"key":"13"},
    {"val":4,"key":"14"},
    {"val":4,"key":"15"},
    {"val":2,"key":"16"},
    {"val":3,"key":"17"},
    {"val":0,"key":"18"},
    {"val":0,"key":"19"},
    {"val":0,"key":"20"},
    {"val":0,"key":"21"},
    {"val":0,"key":"22"},
    {"val":0,"key":"23"},
    {"val":1,"key":"24"},
    {"val":1,"key":"25"},
    {"val":1,"key":"26"},
    {"val":0,"key":"27"},
    {"val":0,"key":"28"},
    {"val":0,"key":"29"},
    {"val":4,"key":"30"},
    {"val":4,"key":"31"},
    {"val":4,"key":"32"},
    {"val":9,"key":"33"},
    {"val":2,"key":"34"},
    {"val":1,"key":"35"},
    {"val":0,"key":"36"},
    {"val":0,"key":"37"},
    {"val":0,"key":"38"},
    {"val":2,"key":"39"},
    {"val":6,"key":"40"},
    {"val":1,"key":"41"},
    {"val":0,"key":"42"},
    {"val":0,"key":"43"},
    {"val":0,"key":"44"},
    {"val":0,"key":"45"},
    {"val":1,"key":"46"},
    {"val":6,"key":"47"},
    {"val":0,"key":"48"},
    {"val":0,"key":"49"},
    {"val":0,"key":"50"},
    {"val":2,"key":"51"},
    {"val":0,"key":"52"},
    {"val":0,"key":"53"}
];

function update(supressZero,showCumulative) {
    var dataset = data;
    var mDataset = [];
    var sVal = 0;
    //var supressZero = false;
    dataset.forEach(function(d) { 
        // get and modify the property values
        if ( showCumulative ) 
            sVal = sVal + d.val;
        else
   ...