Reusable Bar Char

by Igor Cuckovic

HTML

<svg></svg>

CSS

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

JavaScript

//http://bost.ocks.org/mike/chart/
//simple bar chart example: http://bl.ocks.org/3885304

var data = [{
    "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",
    "frequency": 0.00747
}, {
    "letter": "L",
   ...