(function() {


    var cv = d3wb.config()
        .attr("margin", "20 50 50 70")
        .attr("debug", false)
        .data(["data.json"])
        .toCanvas()

    d3.queue()
        .defer(d3.json, cv.data[0])
        .await(function(error, data) {

            hodMinMax = d3.extent(data['histogram_hod'], function(d) {
                return d
            })

            var scaleY = d3.scaleLinear()
                .range([cv.height, 0])
                .domain(hodMinMax)

            var scaleX = d3.scaleLinear()
                .range([0, cv.width])
                .domain([0, 23])

            cv.selectAll("rects")
                .data(data['histogram_hod']).enter()
                .append("rect")
                .attr("class", "rects")
                .attr("height", function(d) {
                    return cv.hei - scaleY(d)
                })
                .attr("width", 25)
                .attr("x", function(d, i) {
                    return scaleX(i)
                })
                .attr("y", function(d) {
                    return scaleY(d)
                })
                .attr("fill", "steelblue")

            cv.call(
                d3wb.add.yAxis(scaleY)
                .color(d3wb.color.foreground))
            cv.call(
                d3wb.add.xAxis(scaleX)
                .y(cv.hei)
                .color(d3wb.color.foreground))
            cv.call(
                d3wb.add.xAxisLabel("Hour of day")
                .color(d3wb.color.foreground)
                .orientation("bottom"))
            cv.call(
                d3wb.add.yAxisLabel("Value")
                .color(d3wb.color.foreground))
            cv.selectAll(".rects").call(wbCooltip()
                .selector(function(d) {
                    return d
                }))
        })
})()