data.tsv

initialize.js

var d3 = require("d3");

function snapshotChart (elem) {
    const size = {
        width: window.innerWidth,
        height: d3.min([window.innerHeight, 300])
    };

    // Define scales
    const scaleX = d3.scaleTime()
        // .clamp(true)
        .range([0, size.width]);

    const scaleY = d3.scaleBand()
        .rangeRound([0, size.height])
        .paddingInner(0.05)
        .paddingOuter(0.05);

    // Define axis
    const xAxis = d3.axisBottom(scaleX);

    // Define zoom
    const zoom = d3.zoom()
        .duration(500)
        // .scaleExtent([0.5, 100])
        .on('zoom', () => {
            const scale = d3.event.transform.rescaleX(scaleX);
            xAxis.scale(scale);
            svg.select('.x.axis').call(xAxis);

            svg.selectAll(".snapshot")
                .attr("x", (d) => { return scale(d.from) })
                .attr("width", (d) => { return d3.max([scale(d.to) - scale(d.from), 1]) })

            // Redraw?
            // tx = d3.event.translate[0]
            // ty = d3.event.translate[1]
            // tx = Math.min(1, Math.max(tx, width - Math.round(x(maxDays) - x(1)), width - Math.round(x(maxDays) - x(1)) * d3.event.scale))
            // zoom.translate([tx, ty])
            //
            // svg.select('.x.axis')
            //     .call(xAxis)
            //
            // svg.selectAll('.line')
            //     .attr("d", (d)->
            //         line(d.temps))
            //     .style("stroke", (d)-> color(d.name))
            //
            // svg.selectAll('circle.dot')
            //     .attr('cy', (d)-> y(d.temp))
            //     .attr('cx', (d)-> x(d.day))
            //     .attr('r', 5)
        });

    const svg = d3.select(elem).append("svg")
        .attr("width", size.width)
        .attr("height", size.height)
        .append("g")
        .call(zoom);

    // zoom panel
    svg.append("rect")
        .attr('class', 'zoom-panel')
        .attr("width", size.width)
        .attr("height", size.height)
        .call(zoom);

    // x axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + size.height + ")")
        .call(xAxis);

    return function display(data){

        // Update X scale
        const min_time = d3.min(data, (d) => { return d.from });
        const max_time = d3.max(data, (d) => { return d.to });
        scaleX.domain([min_time, max_time]);

        // Update Y scale
        const link_ids = d3.map(data, (d) => { return d.link_id }).keys();
        scaleY.domain(link_ids);

        zoom.scaleExtent([1, 10]);

        svg.selectAll('.x.axis')
            .transition()
            .duration(500)
            .call(xAxis);

        const snapshots = svg.selectAll(".snapshot")
            .data(data, (d) => { return (d.price > 10 ? d.price : null); });

        snapshots.enter().append("rect")
            .attr("class", "snapshot")
            .attr("x", (d) => { return scaleX(d.from) })
            .attr("y", (d) => { return scaleY(d.link_id) })
            .attr("width", (d) => { return d3.max([scaleX(d.to) - scaleX(d.from), 1]) })
            .attr("height", scaleY.bandwidth())
            .style("fill", (d) => { return (d.price == -1 ? '#fefefe' : '#ff0000')});

        snapshots.exit().remove();

        // zoom.rescaleX(xAxis);
    };
}

document.addEventListener('DOMContentLoaded', () => {
    // do your setup here
    console.log('Initialized app');

    d3.tsv('data.tsv', (d) => {
        return {
            link_id: +d.link_id,
            from: Date.parse(d.from),
            to: Date.parse(d.to),
            price: +d.price
        };
    }, (error, data) => {

        snapshotChart("#chart")(data.filter((d) => { return d.price > 0 && d.to > d.from }));
    });
});