d3.json('zchampions.json', function(error, champions)
{
    // setup
    if (error)
    {
        throw error;
    }

    var dataset = new Dataset(champions);

    // create svg
    var margin = { top: 20, right: 120, bottom: 100, left: 120 };
    var width = 1000 - margin.right - margin.left;
    var height = 700 - margin.top - margin.bottom;
    var svg = d3.select('body')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    // create scales
    var yScale = d3.scale.linear()
        .domain([ 0, dataset.max ])
        .range([ height, 0 ]);

    // define axes
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left')
        .ticks(10);

    // draw bar chart
    var bars = svg.selectAll('rect')
        .data(dataset.getNodes())
        .enter()
        .append('rect')
        .attr('x', function(d, i) {
            return i * width / dataset.n + 10;
        })
        .attr('y', function(d) {
            return yScale(d.count);
        })
        .attr('width', width / dataset.n - 10)
        .attr('height', function(d) { 
            return height - yScale(d.count);
        })
        .attr('fill', function(d) {
            return d.color;
        })
        .attr('data', function(d) {
            return d.count;
        });

    svg.append('g')
        .attr('id', 'left-axis-identify')
        .attr('class', 'axis')
        .attr('transform', 'translate(' + -10 + ',0)')
        .call(yAxis);

    svg.selectAll('.data-text')
        .data(dataset.getNodes())
        .enter()
        .append('text')
        .attr('class', 'data-text')
        .text(function(d) {
            return d.count;
        })
        .attr('x', function(d, i) {
            var barCenter = (width / dataset.n - 10) / 2;
            return i * width / dataset.n + 10 + barCenter;
        })
        .attr('y', function(d) {
            return yScale(d.count) + 30;
        })
        .attr('font-family', 'sans-serif')
        .attr('font-size', '15px')
        .attr('fill', 'white')
        .attr('text-anchor', 'middle');

    // re-use legend
    var legendGroup = svg.append('g')
        .attr('id', 'legend-group')
        .attr('transform', 'translate(' + (width * 0.90) + ', 0)');

    var legend = new Legend(legendGroup);
    legend.draw(dataset.getNodes());
});