D3 Examples - Router

xxxxxxxxxx
 
•<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://viz.hpccsystems.com/v1.10.0/dist-amd/hpcc-viz.js"></script>
    <script src="https://viz.hpccsystems.com/v1.10.0/dist-amd/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "https://viz.hpccsystems.com/v1.10.0/dist-amd",
                "font-awesome": "https://viz.hpccsystems.com/v1.10.0/dist-amd/font-awesome/css/font-awesome.min"
            }
        });
    </script>
</head>
<body>
    <div id="div" style="width:100%; height:100vh">
    </div>
    <script>
        require(["d3", "./Query", "src/layout/Grid", "src/map/GMapLayered", "src/chart/Column"], function (d3, Query, Grid, GMapLayered, Column) {
            var main = new Grid()
            ;
            var map = new GMapLayered()
                .centerLat(0)
                .centerLong(0)
                .zoom(1)
            ;
            var column = new Column()
                .columns(["Route", "Leg 1", "Layover", "Leg 2"])
                .orientation("vertical")
                .stacked(true)
                .yAxisType("time")
                .yAxisTypeTimePattern("%Y-%m-%dT%H:%M")
            ;
            var formatter = d3.time.format("%Y-%m-%dT%H:%M");
            main
                .target("div")
                .setContent(0, 0, map)
                .setContent(1, 0, column)
                .render()
            ;
            Query.send("ATL", "ORK", "20160407").then(function (response) {
                map
                    .layers(response.layers)
                    .render()
                ;
                column
                    .data(response.flights.map(function (row, idx) {
                        var leg1ArriveDate = new Date(2016, 3, 7 + row.l1_arrivedayindicator, 0, row.l1_arrivetimeinmins, 0);
                        var leg1DepartDate = new Date(leg1ArriveDate.getTime() - (row.l1_flightdistance * 60 * 60 * 1000 / 500));
                        var leg2ArriveDate = new Date(2016, 3, 7 + row.l1_arrivedayindicator, 0, row.l2_arrivetimeinmins, 0);
                        var leg2DepartDate = new Date(leg2ArriveDate.getTime() - (row.l2_flightdistance * 60 * 60 * 1000 / 500));
                        return [
                            (response.flights.length - idx) + "# " + row.l1_departstationcode + "->" + row.l1_arrivestationcode + "->" + row.l2_arrivestationcode,
                            [formatter(leg1DepartDate), formatter(leg1ArriveDate)],
                            [formatter(leg1ArriveDate), formatter(leg2DepartDate)],
                            [formatter(leg2DepartDate), formatter(leg2ArriveDate)]];
                    }))
                    .render()
            });
        });
    </script>
</body>
</html>
    