D3 Examples - Aircraft routes visulizations

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
​
    <link rel="stylesheet" type="text/css" href="dc.css">
    <link rel="stylesheet" type="text/css" href="leaflet.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="main.css">
<div class="container-fluid">
        <div class="row">
        <div class="title"><p><strong>Arrival</strong></p></div>
            <div class="col-xs-8 col-md-4">
                <div class="dc-chart" id="chart-ring-year"></div>
            </div>
            <div class="col-xs-8 col-md-4">
                <div class="dc-chart" id="chart-ring-month"></div>
            </div>
            <div class="col-xs-8 col-md-4">
                <div class="dc-chart" id="chart-ring-day"></div>
            </div>
        </div>
        
        <div class="row">
        <div class="col-xs-12">
        <div id="test1">
        <div class="title"><p><strong>Arrival Airport Code</strong></p></div>
            <td>&nbsp;<a class="reset" href="javascript:airportChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>&nbsp;</td>
        <td>
        <div id="airport-chart-invert">
            <a class="reset" href="javascript:" style="display: none;">invert</a>           
        </div>
        </td>
        </div>
        </div>
        </div>
                <div class="row">
                <div class="col-xs-12">
                <div id="test">
        <div class="title"><td><strong>Arrival Center (ARTCC)</strong></td></div>
                                    <td><a class="reset" href="javascript:centerChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>&nbsp;</td>
                                    <td>
                                    <div id="center-chart-invert">
                                        <a class="reset" href="javascript:" style="display: none;">invert</a>
                                    </div>
                                    </td>               
                </div>
                </div>
                </div> 
        <div class="row">
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="date-zoom-chart">
                            <div class="title"><strong>Date</strong></div>
                                <a class="reset" href="javascript:void(0)" onclick="dateZoomChart.filterAll(); dateBrushChart.filterAll(); dc.redrawAll();" style="display: none;">reset</a><br />
                            
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="date-brush-chart">
                            </div>
                        </div>
                        
                            
                        
                    </div>
                </div>
                
         <div class="row">
                    <div class="col-xs-12">
                        <div id="starttime-chart">
                            <br>
                            <div class="title"><strong>Arrival Time</strong></div>
                            <a class="reset" href="javascript:startTimeChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                            <div class="clearfix"></div>
                        </div>
                    </div>   
                    </div>
​
        <div class="row">
            <p><strong>Departure</strong></p>
            <div class="col-xs-8 col-md-4">
            <div class="dc-chart" id="chart-ring-dyear"></div>
            </div>
            <div class="col-xs-8 col-md-4">
            <div class="dc-chart" id="chart-ring-dmonth"></div>
            </div>
            <div class="col-xs-8 col-md-4">
            <div class="dc-chart" id="chart-ring-dday"></div>
            </div>
        </div>
​
​
        <div class="row">
                    <div class="col-xs-12">
                        <div id="dtest1">
                            
                                        <td><strong>Departure Airport Code</strong></td>
                                        <td>&nbsp;<a class="reset" href="javascript:dairportChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>&nbsp;</td>
                                        <td>
                                            <div id="dairport-chart-invert">
                                                <a class="reset" href="javascript:" style="display: none;">invert</a>
                                            </div>
                                        </td>
                                
                        </div>
                    </div>
                <//div>
                <div class="row">
                    <div class="col-xs-12">
                        <div id="dtest">
                            
                                        <td><strong>Departure Center (ARTCC)</strong></td>
                                        <td><a class="reset" href="javascript:dcenterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>&nbsp;</td>
                                        <td>
                                            <div id="dcenter-chart-invert">
                                                <a class="reset" href="javascript:" style="display: none;">invert</a>
                                            </div>
                                        </td>
​
                                
                        </div>
                    </div>
                </div> 
        <div class="row">
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="ddate-zoom-chart">
                                <div class="title"><strong>Date</strong></div>
                                <a class="reset" href="javascript:void(0)" onclick="ddateZoomChart.filterAll(); ddateBrushChart.filterAll(); dc.redrawAll();" style="display: none;">reset</a><br />
                            
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="ddate-brush-chart">
                            </div>
                        </div>
                        
                            
                        
                    </div>
                </div>
                
         <div class="row">
                    <div class="col-xs-12">
                        <div id="dstarttime-chart">
                            <br>
                            <strong>Departure Time</strong>
                            <a class="reset" href="javascript:dstartTimeChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                            <div class="clearfix"></div>
                        </div>
                    </div>   
                    </div>
</div>          
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
​
            function parseflightDate(d) {
                var pieces = d.split("/");
                return new Date(pieces[2], pieces[0] - 1, pieces[1]);
                                        }
​
            function parseflightTime(someTime, dDate) {
                var pieces = someTime.split(":");
                return new Date(dDate.getFullYear(), dDate.getMonth(), dDate.getDate(), pieces[0], pieces[1]);
                                                        }
  
    
    var yearRingChart = dc.pieChart("#chart-ring-year"),
        monthRingChart = dc.pieChart("#chart-ring-month"),
        dayRingChart = dc.pieChart("#chart-ring-day");
    var dateZoomChart = dc.barChart('#date-zoom-chart');
    var dateBrushChart = dc.barChart('#date-brush-chart');
    var startTimeChart = dc.barChart('#starttime-chart');
    var airportChart = dc.barChart('#test1');
    var airportChartInvert = document.getElementById("airport-chart-invert");
    var centerChart = dc.barChart('#test');
    var centerChartInvert = document.getElementById("center-chart-invert");
    
    var dyearRingChart = dc.pieChart("#chart-ring-dyear"),
        dmonthRingChart = dc.pieChart("#chart-ring-dmonth"),
        ddayRingChart = dc.pieChart("#chart-ring-dday");
    var ddateZoomChart = dc.barChart('#ddate-zoom-chart');
    var ddateBrushChart = dc.barChart('#ddate-brush-chart');
    var dstartTimeChart = dc.barChart('#dstarttime-chart');
    var dairportChart = dc.barChart('#dtest1');
    var dairportChartInvert = document.getElementById("dairport-chart-invert");
    var dcenterChart = dc.barChart('#dtest');
    var dcenterChartInvert = document.getElementById("dcenter-chart-invert");
​
​
d3.csv("sample.csv", function(data){ 
        
    var flightdata =data;
        
         var dateFormat = d3.time.format('%m/%d/%Y');
         var yearFormat = d3.time.format('%Y');
         var monthNameFormat = d3.time.format("%B");
         var dayNameFormat = d3.time.format("%A");      
        
        flightdata.forEach( function(d) { 
                                    d.date = parseflightDate(d.Year);
                                    d.starttime = parseflightTime(d.Atime, d.date);
                                    d.Year = dateFormat.parse(d.Year);
                                    d.day = dayNameFormat(d.Year);
                                    d.month = monthNameFormat(d.Year);
                                    d.Spent= +d.Spent;
                                    d.ddate = parseflightDate(d.dYear);
                                    d.dstarttime = parseflightTime(d.Dtime, d.ddate);
                                    d.dYear = dateFormat.parse(d.dYear);
                                    d.dday = dayNameFormat(d.dYear);
                                    d.dmonth = monthNameFormat(d.dYear);
                                     
                                    });
​
                                    
        console.log(flightdata);
​
        var dataCount;
        var ndx = crossfilter(flightdata),
        date = ndx.dimension(function(d){return d.date}),
        startTime = ndx.dimension(function (d) { return d.starttime.getHours() + d.starttime.getMinutes() / 60; }),
        dateDim = ndx.dimension(function(d){return d.date}),
        yearDim = ndx.dimension(function (d){return yearFormat(d.Year);}),        
        nameDim = ndx.dimension(function (d){return d.Aname;}),
        airportCode2 = ndx.dimension(function (d) { return d.Aname; }),
        acenterDim = ndx.dimension(function (d){return d.Acenter;}),
        acenter1Dim = ndx.dimension(function (d){return d.Acenter;}),
        monthDim = ndx.dimension(function (d){return d.month;}),
        dayDim = ndx.dimension(function (d) {return d.day;});
        
        ddate = ndx.dimension(function(d){return d.ddate}),
        dstartTime = ndx.dimension(function (d) { return d.dstarttime.getHours() + d.dstarttime.getMinutes() / 60; }),
        ddateDim = ndx.dimension(function(d){return d.ddate}),
        dyearDim = ndx.dimension(function (d){return yearFormat(d.dYear);}),        
        dnameDim = ndx.dimension(function (d){return d.Dname;}),
        dairportCode2 = ndx.dimension(function (d) { return d.Dname; }),
        dcenterDim = ndx.dimension(function (d){return d.Dcenter;}),
        dcenter1Dim = ndx.dimension(function (d){return d.Dcenter;}),
        dmonthDim = ndx.dimension(function (d){return d.dmonth;}),
        ddayDim = ndx.dimension(function (d) {return d.dday;});
        
            
                
        var spendPerYear = yearDim.group().reduceSum(function (d) { return d.Spent;}),
        startTimeGroup = startTime.group(Math.floor),
        spendPerDate = date.group(d3.time.day),
        spendPerMDate = date.group(d3.time.month),
        spendPerDay = dayDim.group().reduceSum(function (d) { return d.Spent;}),
        spendPerMonth = monthDim.group().reduceSum(function (d) { return d.Spent;}),
        spendPerName = nameDim.group().reduceSum(function (d) { return d.Spent;}),
        airportCodeGroup2 = airportCode2.group().reduceSum(function (d) { return d.Spent;}),
        spendPerAcenter1 = acenterDim.group().reduceSum(function (d) { return d.Spent;}),
        spendPerAcenter = acenterDim.group().reduceSum(function (d) { return d.Spent;});
        
        spendPerdYear = dyearDim.group().reduceSum(function (d) { return d.Spent;}),
        dstartTimeGroup = dstartTime.group(Math.floor),
        spendPerdDate = ddate.group(d3.time.day),
        spendPerdMDate = ddate.group(d3.time.month),
        spendPerdDay = ddayDim.group().reduceSum(function (d) { return d.Spent;}),
        spendPerdMonth = dmonthDim.group().reduceSum(function (d) { return d.Spent;}),
        spendPerdName = dnameDim.group().reduceSum(function (d) { return d.Spent;}),
        dairportCodeGroup2 = dairportCode2.group().reduceSum(function (d) { return d.Spent;}),
        spendPerDcenter1 = dcenterDim.group().reduceSum(function (d) { return d.Spent;}),
        spendPerDcenter = dcenterDim.group().reduceSum(function (d) { return d.Spent;});
        
        
        var goodAirports = [];
        spendPerName.all().forEach(function (d, i) { goodAirports.push(d.key.toString()) });
               
        var allCenters = [];
        spendPerAcenter1.all().forEach(function (d, i) { allCenters.push(d.key.toString()) });
        
        
        var gooddAirports = [];
        spendPerdName.all().forEach(function (d, i) { gooddAirports.push(d.key.toString()) });
               
        var alldCenters = [];
        spendPerDcenter1.all().forEach(function (d, i) { alldCenters.push(d.key.toString()) });
       
            
    yearRingChart.width(200).height(200)
        .dimension(yearDim)
        .group(spendPerYear)
        .innerRadius(50);
        
    monthRingChart.width(200).height(200)
        .dimension(monthDim)
        .group(spendPerMonth)
        .innerRadius(50);
        
    dayRingChart.width(200).height(200)
        .dimension(dayDim)
        .group(spendPerDay)
        .innerRadius(50);
        
        
    airportChart
        .width(1600)
        .height(180)
        .margins({ top: 10, right: 50, bottom: 35, left: 40 })
        .dimension(airportCode2)
        .group(airportCodeGroup2)
        .elasticY(true)
        .gap(1)
        .x(d3.scale.ordinal().domain(goodAirports))
        .xUnits(dc.units.ordinal)
        .renderlet(function (chart) {
            chart.selectAll("g.x text")
            .attr('dx', '-20')
            .attr('dy', '-3')
            .attr('transform', "rotate(-65)");
        });
​
    airportChart.yAxis().tickFormat(d3.format(".0f"));
​
    airportChartInvert.onclick = function () {
        var goodAirports2 = goodAirports.slice();
        var badAirports = airportChart.filters();
        airportChart.filterAll();
        badAirports.forEach(function (d, i) {
            goodAirports2.splice(goodAirports2.indexOf(d), 1);
        });
        airportChart.filter([goodAirports2]);
        dc.redrawAll();
    };
      
    centerChart.width(1600).height(180)
        .margins({ top: 10, right: 50, bottom: 35, left: 40 })
        .dimension(acenter1Dim)
        .group(spendPerAcenter1)
        .elasticY(true)
        .gap(1)
        .x(d3.scale.ordinal())
        .xUnits(dc.units.ordinal);
        
    centerChartInvert.onclick = function () {
        var allCenters2 = allCenters.slice();
        var badCenters = centerChart.filters();
        centerChart.filterAll();
        badCenters.forEach(function (d, i) {
        allCenters2.splice(allCenters2.indexOf(d), 1);
        });
        centerChart.filter([allCenters2]);
        dc.redrawAll();
        };
        
     dateZoomChart.width(1600)
        .height(180)
        .margins({ top: 10, right: 50, bottom: 30, left: 40 })
        .dimension(date)
        .group(spendPerDate)
        .mouseZoomable(true)
        .elasticY(true)
        .centerBar(true )
        .gap(1)
        .rangeChart(dateBrushChart)
        .x(d3.time.scale()
            .domain([date.bottom(1)[0].date, date.top(1)[0].date]))
        .renderHorizontalGridLines(true)
        .renderTitle(false);
    dateZoomChart.yAxis().tickFormat(d3.format(".0f"));
​
    dateBrushChart.width(1600).height(60)
        .margins({ top: 10, right: 50, bottom: 20, left: 40 })
        .dimension(date)
        .group(spendPerMDate)
        .gap(1)
        .elasticY(true)
        .x(d3.time.scale()
            .domain([date.bottom(1)[0].date, date.top(1)[0].date]))
        .renderHorizontalGridLines(true)
        .round(d3.time.month.round)
        .alwaysUseRounding(true)
        .xUnits(d3.time.months);
    dateBrushChart.yAxis().ticks(0);
    
    startTimeChart.width(800).height(180)
        .margins({ top: 10, right: 50, bottom: 30, left: 40 })
        .dimension(startTime)
        .group(startTimeGroup)
        .elasticY(true)
        .gap(1)
        .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.linear()
            .domain([0, 24]))
        .renderHorizontalGridLines(true);
    startTimeChart.yAxis().tickFormat(d3.format(".0f"));
    
    
    
    
    
    
     dyearRingChart.width(200).height(200)
        .dimension(dyearDim)
        .group(spendPerdYear)
        .innerRadius(50);
        
    dmonthRingChart.width(200).height(200)
        .dimension(dmonthDim)
        .group(spendPerdMonth)
        .innerRadius(50);
        
    ddayRingChart.width(200).height(200)
        .dimension(ddayDim)
        .group(spendPerdDay)
        .innerRadius(50);
        
        
    dairportChart
        .width(1600)
        .height(180)
        .margins({ top: 10, right: 50, bottom: 35, left: 40 })
        .dimension(dairportCode2)
        .group(dairportCodeGroup2)
        .elasticY(true)
        .gap(1)
        .x(d3.scale.ordinal().domain(gooddAirports))
        .xUnits(dc.units.ordinal)
        .renderlet(function (chart) {
            chart.selectAll("g.x text")
            .attr('dx', '-20')
            .attr('dy', '-3')
            .attr('transform', "rotate(-65)");
        });
​
    dairportChart.yAxis().tickFormat(d3.format(".0f"));
​
    dairportChartInvert.onclick = function () {
        var gooddAirports2 = gooddAirports.slice();
        var baddAirports = dairportChart.filters();
        dairportChart.filterAll();
        baddAirports.forEach(function (d, i) {
            gooddAirports2.splice(gooddAirports2.indexOf(d), 1);
        });
        dairportChart.filter([gooddAirports2]);
        dc.redrawAll();
    };
      
    dcenterChart.width(1600).height(180)
        .margins({ top: 10, right: 50, bottom: 35, left: 40 })
        .dimension(dcenter1Dim)
        .group(spendPerDcenter1)
        .elasticY(true)
        .gap(1)
        .x(d3.scale.ordinal())
        .xUnits(dc.units.ordinal);
        
    dcenterChartInvert.onclick = function () {
        var alldCenters2 = alldCenters.slice();
        var baddCenters = dcenterChart.filters();
        dcenterChart.filterAll();
        baddCenters.forEach(function (d, i) {
        alldCenters2.splice(alldCenters2.indexOf(d), 1);
        });
        dcenterChart.filter([alldCenters2]);
        dc.redrawAll();
        };
        
     ddateZoomChart.width(1600)
        .height(180)
        .margins({ top: 10, right: 50, bottom: 30, left: 40 })
        .dimension(ddate)
        .group(spendPerdDate)
        .mouseZoomable(true)
        .elasticY(true)
        .centerBar(true )
        .gap(1)
        .rangeChart(ddateBrushChart)
        .x(d3.time.scale()
            .domain([ddate.bottom(1)[0].date, ddate.top(1)[0].date]))
        .renderHorizontalGridLines(true)
        .renderTitle(false);
    ddateZoomChart.yAxis().tickFormat(d3.format(".0f"));
​
    ddateBrushChart.width(1600).height(60)
        .margins({ top: 10, right: 50, bottom: 20, left: 40 })
        .dimension(ddate)
        .group(spendPerdMDate)
        .gap(1)
        .elasticY(true)
        .x(d3.time.scale()
            .domain([ddate.bottom(1)[0].date, ddate.top(1)[0].date]))
        .renderHorizontalGridLines(true)
        .round(d3.time.month.round)
        .alwaysUseRounding(true)
        .xUnits(d3.time.months);
    ddateBrushChart.yAxis().ticks(0);
    
    dstartTimeChart.width(800).height(180)
        .margins({ top: 10, right: 50, bottom: 30, left: 40 })
        .dimension(dstartTime)
        .group(dstartTimeGroup)
        .elasticY(true)
        .gap(1)
        .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.linear()
            .domain([0, 24]))
        .renderHorizontalGridLines(true);
    dstartTimeChart.yAxis().tickFormat(d3.format(".0f"));
​
    dc.renderAll();
    
    });
    </script>
    </html>
    