var range = 100;

var dataset =
[
    [ "bananas", 0, "yellow" ],
    [ "grapes", 0, "green" ],
    [ "dates", 0, "blue" ],
    [ "oranges", 0, "red" ],
    [ "tuna", 0, "purple" ]
];

for (var i = 0; i < dataset.length; ++i)
{
    var val = Math.round(Math.random() * range);
    dataset[i][1] = (val <= 10.0) ? 20 : val;
}

var chartWidth = 540;
var chartHeight = 300;
var legendWidth = 150;
var legendHeight = 100;
var padding = 20;

var svg = d3.select("body")
    .append("svg")
    .attr("width", chartWidth + legendWidth + padding)
    .attr("height", chartHeight);

// draw legend
var legendOffsetX = 5;
var legendOffsetY = 5;
var markWidth = 25;
var markHeight = 25;
var markPadding = 5;

var legend = svg.append("g")
    .attr("transform", 
          "translate(" + legendOffsetX + "," + legendOffsetY + ")")
    .attr("id", "legend");

var legendMarks = legend.selectAll(".legend-icon")
    .data(dataset)
    .enter()
    .append("g")
    .attr("class", "legend-icon");

// I think I'm finally getting the fluent hang of this...
legendMarks.append("rect")
    .attr("x", function(d, i) {
        return legendOffsetX;
    })
    .attr("y", function(d, i) {
        return legendOffsetY + 
               (markHeight + markPadding) * i;
    })
    .attr("width", markWidth)
    .attr("height", markHeight)
    .attr("fill", function(d) {
        return d[2];
    });

legendMarks.append("text")
    .attr("transform", function(d, i) {
        var x = legendOffsetX + markWidth + markPadding;
        var y = legendOffsetY + (markHeight + markPadding) * i;
        y += 20;
        return "translate(" + x + "," + y + ")";
    })
    .text(function(d) {
        return d[0];
    })
    .attr("style", "font-family: arial;");

var maxVal = d3.max(dataset, function(d) { return d[1]; });
var yScale = d3.scale.linear()
    .domain([0, maxVal])
    .range([chartHeight - padding, padding]);

var barPadding = 10;
var chart = svg.append("g").attr("id", "chart")
    .attr("transform",
          "translate(" + (legendWidth + padding) + "," + 0 + ")");
          
chart.selectAll(".chart-bar")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return i * chartWidth / dataset.length;
    })
    .attr("y", function(d) { return chartHeight - padding - yScale(d[1]); })
    .attr("width", chartWidth / dataset.length - barPadding)
    .attr("height", function(d) { return yScale(d[1]); })
    .attr("fill", function(d) {
        return d[2];
    })
    .attr("class", "chart-bar");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10);

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