Boise Code Camp - Spring 2014 - Building Advanced d3.js Chart

CSS

/* Removes the really ugly black bar of an axis. Go ahead remove the styling.*/
path {
    fill : none;
    stroke : black;
    stroke-width : 0.5px;
}
rect {
    fill : steelblue;
}
rect.hover {
    fill : lightblue;
}
text {
    font-family : sans-serif;
}

JavaScript

// Code campe attendee favorite genres
// {'genre' : number of listeners}
var data = [{
    genre: 'swiss yodeling',
    votes: 20
}, {
    genre: 'jazz metal',
    votes: 12
}, {
    genre: 'brostep',
    votes: 10
}, {
    genre: 'tuvan throat signing',
    votes: 30
}, {
    genre: 'acid house',
    votes: 42
}];

function BarChart(configurations) {
    var xScale, yScale, xRange, yRange, xDomain, yDomain;

    var canvasDim = {
        height: 500,
        width: 500
    };
    
    var margins = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 160
    };

    function chart(selection) {
        createDomains();
        createRanges();
        createScales();

        var svg = selection.append('svg')
            .attr('width', canvasDim.width)
            .attr('height', canvasDim.height);

        svg.call(createAxes).call(createRects);
    }

    return chart;

    function createRects(selection) {
        selection.append("g")
            .attr("id", "data-layer")
            .selectAll('rect').data(function (datum) {
            return datum;
        })
            .enter()
            .append('rect')
            .attr('width', function (datum) {
            return xScale(datum.votes);
        })
            .attr('height', yScale.rangeBand())
            .attr('x', margins.left)
            .attr('y', function (datum) {
            return yScale(datum.genre);
        });
    }

    function createDomains() {
        xDomain = d3.extent(data.map(function (datum) {
            return datum.votes;
        }));
        yDomain = data.map(function (datum) {
            return datum.genre;
        });
    }

    function createScales() {
        xScale = d3.scale.linear().domain(xDomain).range(xRange);
        yScale = d3.scale.ordinal().domain(yDomain).rangeBands(yRange, .3, .3);
    }

    function createRanges() {
        xRange = [margins.left, canvasDim.width - margins.right];
        yRange = [margins.top, canvasDim.height -...