Aircraft routes visulizations

<!doctype html>
<html lang="en">

<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>

Modified http://dc-js.github.io/dc.js/js/d3.js to a secure url

Modified http://dc-js.github.io/dc.js/js/crossfilter.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://dc-js.github.io/dc.js/js/dc.js to a secure url

https://dc-js.github.io/dc.js/js/d3.js

https://dc-js.github.io/dc.js/js/crossfilter.js

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://dc-js.github.io/dc.js/js/dc.js

https://code.jquery.com/jquery-2.1.3.min.js