function updateBars(divId, jobData, year, occCode)
{
    // write code to update the bar chart created to the specified year
    // you should use two transitions, one to update the bar values
    // and the other to reorder the bars
    // Make sure to transition the axes, too!

    var svg = d3.select(divId).append("svg")
        .attr("width", barW+barMargin.left+barMargin.right)
        .attr("height", barH+barMargin.top+barMargin.bottom)
        .append("g")
        .attr("class", "main")
        .attr("transform",
              "translate(" + barMargin.left + "," + barMargin.top + ")")

        var csData = extractJobsPct(jobData, year);

        barX.range([0,barW])
        .domain(csData.map(function(d) { return d.area_title; }));
        barY.range([barH,0])
        .domain([0,d3.max(extractJobsPct(jobData, null),
                  function(d) { return +d.jobs_1000; })]);

        svg.selectAll("rect")
        .data(csData)
        .enter().append("rect")
        .style("fill", "blue")
        .attr("class", "bar")
        .attr("x", function(d) { return barX(d.area_title); })
        .attr("y", function(d) { return barY(+d.jobs_1000); })
        .attr("width", barX.bandwidth())
        .attr("height", function(d) { return barH - barY(+d.jobs_1000); })

        barXAxis = d3.axisBottom(barX);

        svg.append("g")
        .attr("transform", "translate(0," + barH +")")
        .attr("class", "x axis")
        .call(barXAxis)

        var barYAxis = d3.axisLeft(barY);

        svg.append("g")
        .attr("class", "y axis")
        .call(barYAxis)

        svg.append("g")
        .attr("transform", "translate(-30," + (barH/2) + ") rotate(-90)")
        .append("text")
        .style("text-anchor", "middle")
        .text("Jobs Per 1000")

        svg.append("text")
        .attr("x", barW/2)
        .attr("y", barH + 115)
        .text("State")


}