var margin = {top: 20, right: 30, bottom: 50, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var xScale = d3.scale.ordinal()
    .rangeRoundBands([0, width],.15);

var yScale = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

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

var tooltip = d3.select("body").append("div")
    .style("position", "absolute")
    .style("padding", "0 10px")
    .style("background", "white")
    .style("opacity", 0);

var chart1 = d3.select(".chart1")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")");

// Force a given string of data to a number
function typecheck(d) {
    d.makes = +d.makes;
    d.attempts = +d.attempts;
    return d;
}

// Chart 1 - Three Point Makes
d3.tsv("data.tsv", typecheck, function(error, data) {
    xScale.domain(data.map(function(d) {return d.year}));
    yScale.domain([0, d3.max(data, function (d) { return d.makes; })]);

    chart1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(90)")
        .style("text-anchor", "start");

    chart1.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    chart1.selectAll(".bar")
        .data(data)
        .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.year); })
            .attr("y", function(d) { return yScale(d.makes); })
            .attr("height", function(d) { return height - yScale(d.makes) })
            .attr("width", xScale.rangeBand())
            .style("fill", '#d33682')

        .on("mouseover", function(d) {
            d3.select(this)
                .transition().duration(100)
                .style("fill", '#b58900');

            tooltip.transition()
                .style("opacity", .9);

            tooltip.html(d.makes)
                .style("left", (d3.event.pageX + 5) + "px")
                .style("top", (d3.event.pageY - 25) + "px")
        })
        .on("mouseout", function(d) {
            d3.select(this)
                .transition().duration(250)
                .style("fill", '#d33682');

            tooltip.transition()
                .style("opacity", 0);
        })

});