Bar chart

by Cyril Cherian

HTML

<body></body>

CSS

.d3-canvas {
    background-color: #F1EEFF;
}
.icongray {
    fill: #5B5852;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

JavaScript

var data = [{
        "date": new Date("2015-01-01"),
            "start": 0,
            "end": 60
    }, {
        "date": new Date("2015-01-02"),
            "start": 720,
            "end": 780
    }, {
        "date": new Date("2015-01-03"),
            "start": 1300,
            "end": 1440
    }]

    var do_the_plot = function (width, height) {
        margin = {
            "left": 45,
                "right": 25,
                "top": 25,
                "bottom": 25
        };
        image_width = width - margin.left - margin.right;
        image_height = height - margin.top - margin.bottom;
        svg = setup_svg(width, height);
        draw_it(svg);
    }

    log_int = function (label, the_int) {
        console.log(label, the_int);
        return the_int;
    }

    minutes_in_day = 1440;

    // Set up an svg element for us.  Return it.
    setup_svg = function (width, height) {
        num_days = 3
        canvas = d3.select("body")
            .append("svg")
            .attr({
            "width": width,
                "height": height,
                "class": "d3-canvas",
        });
        inside = canvas.append("g")
            .attr({
            "transform": "translate(" + margin.left + "," + margin.top + ")"
        })
        return inside;
    }

    // Draw some rectangles representing reading sessions.
    draw_it = function (svg, reading_sessions) {
        var y_values = [0, 180, 360, 540, 720, 900, 1080, 1260, 1440]
        var y_display = ["midnight", "3:00", "6:00", "9:00", "noon", "15:00", "18:00", "21:00", "midnight"]
        // Assume data is a list of {day, start, stop}, day an int
        // (zero-based, days since start), start and stop minutes (int).
        x_scale = d3.scale.ordinal()
        //.domain([0, num_days])
        // domain was incorrect
        .domain(data.map(function (d) {
            return d.date;
        })) // Use from data.
        .rangeRoundBands([0, image_width]);
        y_scale =...