BarChart experiment with D3 (Final)

http://bost.ocks.org/mike/bar/3/

by Anton

HTML

<textarea rows="4" cols="48">Here's some text to analyse char frequency.</textarea>
<svg class="chart"></svg>

CSS

.chart {
    margin-top: 10px;
    background-color: #f0f0f0;
}

.chart rect {
    fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

.axis text {
  font: 10px sans-serif;
  fill: #444;
}

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

JavaScript

var textarea = document.getElementsByTagName('TEXTAREA')[0];

textarea.addEventListener('input', function() {
    updateChart(this.value.toUpperCase());
}, false);

updateChart(textarea.value.toUpperCase());

// Called on change in the textarea
function updateChart(input) {
    var freq = calcFreq(input);
    drawFreqChart(freq);
}

// Analyse the text in textarea
function calcFreq(input) {
    var freq = [];
    
    for(var i = 0; i < input.length; i++) {
        // Only for latin letters
        if(input[i].match(/[A-Za-z]/)) {
            var foundFlag = false;
            for(var j = 0; j < freq.length; j++) {
                if(freq[j].key === input[i]) {
                    freq[j].value++;
                    foundFlag = true;
                    break;
                }
            }
            
            if(!foundFlag) {
                freq[freq.length] = {
                    key: input[i],
                    value: 1
                };
            }
        }
    }
    
    freq = freq.sort(function(obj1, obj2) { return obj1.key > obj2.key ? 1 : -1;});
    
    return freq;
}

/* Actual charting code */
function drawFreqChart(freq) {
    var margin = {top: 10, right: 10, bottom: 20, left: 30},
        width = 400 - margin.left - margin.right,
        height = 250 - margin.top - margin.bottom;
    
    var x = d3.scale.ordinal()
        .domain(freq.map(function(obj) { return obj.key; }))
        .rangeRoundBands([0, width], .1);
    
    var y = d3.scale.linear()
        .domain([0, d3.max(freq, function(obj) { return obj.value; })])
        .range([height, 0]);
    
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
    
    var chart = d3.select(".chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g") // Needed to handle the margins
           ...