range bands

by Igor Cuckovic

HTML

<div id="container1"></div>

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JavaScript

var data1 = [{
    "letter": "A",
        "frequency": 0.08167
}, {
    "letter": "B",
        "frequency": 0.01492
}, {
    "letter": "C",
        "frequency": 0.0278
}, {
    "letter": "D",
        "frequency": 0.04253
}, {
    "letter": "E",
        "frequency": 0.12702
}, {
    "letter": "F",
        "frequency": 0.02288
}, {
    "letter": "G",
        "frequency": 0.02022
}, {
    "letter": "H",
        "frequency": 0.06094
}, {
    "letter": "I",
        "frequency": 0.06973
}, {
    "letter": "J",
        "frequency": 0.00153
}, {
    "letter": "K",
        "frequency": 0.00747
}, {
    "letter": "L",
        "frequency": 0.04025
}, {
    "letter": "M",
        "frequency": 0.02517
}, {
    "letter": "N",
        "frequency": 0.06749
}, {
    "letter": "O",
        "frequency": 0.07507
}, {
    "letter": "P",
        "frequency": 0.01929
}, {
    "letter": "Q",
        "frequency": 0.00098
}, {
    "letter": "R",
        "frequency": 0.05987
}, {
    "letter": "S",
        "frequency": 0.06333
}, {
    "letter": "T",
        "frequency": 0.09056
}, {
    "letter": "U",
        "frequency": 0.02758
}, {
    "letter": "V",
        "frequency": 0.01037
}, {
    "letter": "W",
        "frequency": 0.02465
}, {
    "letter": "X",
        "frequency": 0.0015
}, {
    "letter": "Y",
        "frequency": 0.01971
}, {
    "letter": "Z",
        "frequency": 0.00074
}];

//console.log(JSON.stringify(data))


var data2 = [{
    "letter": "A",
        "frequency": 0.18167
}, {
    "letter": "B",
        "frequency": 0.21492
}, {
    "letter": "C",
        "frequency": 0.3278
}, {
    "letter": "D",
        "frequency": 0.44253
}, {
    "letter": "E",
        "frequency": 0.22702
}, {
    "letter": "F",
        "frequency": 0.12288
}, {
    "letter": "G",
        "frequency": 0.32022
}, {
    "letter": "H",
        "frequency": 0.46094
}, {
    "letter": "I",
        "frequency": 0.06973
}, {
    "letter": "J",
        "frequency": 0.00153
}, {
    "letter": "K",
     ...