|
/*jslint browser: true, devel: true */ |
|
var d3, queue, vis, params, topojson; |
|
(function () { |
|
"use strict"; |
|
vis = {}; |
|
var width, height, |
|
chart, svg, g, active, background, |
|
path, |
|
defs, style, |
|
slider, step, maxStep, running, sv, timer, |
|
button; |
|
|
|
|
|
|
|
// general design from |
|
// http://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/ |
|
vis.init = function (params) { |
|
vis.params = params || {}; |
|
|
|
chart = d3.select(vis.params.chart || "#chart"); // placeholder div for svg |
|
width = vis.params.width || 600; |
|
height = vis.params.height || 600; |
|
active = d3.select(null); |
|
|
|
svg = chart.selectAll("svg") |
|
.data([{width: width, height: height}]).enter() |
|
.append("svg"); |
|
svg.attr({ |
|
width: function (d) { return d.width; }, |
|
height: function (d) { return d.height; } |
|
}); |
|
|
|
background = svg.selectAll("rect.background") |
|
.data([{}]).enter() |
|
.append("rect") |
|
.classed("background", true); |
|
|
|
|
|
g = svg.selectAll("g.all") |
|
.data([{}]).enter() |
|
.append("g") |
|
.classed("all", true); |
|
|
|
// vis.init can be re-ran to pass different height/width values |
|
// to the svg. this doesn't create new svg elements. |
|
|
|
style = svg.selectAll("style") |
|
.data([{}]).enter() |
|
.append("style") |
|
.attr("type", "text/css"); |
|
// this is where we can insert style that will affect the svg directly. |
|
|
|
defs = svg.selectAll("defs").data([{}]).enter() |
|
.append("defs"); |
|
// this is used if it's necessary to define gradients, patterns etc. |
|
|
|
// the following will implement interaction around a slider and a |
|
// button. repeat/remove as needed. |
|
// note that this code won't cause errors if the corresponding elements |
|
// do not exist in the HTML. |
|
slider = d3.select(vis.params.slider || ".slider"); |
|
|
|
if (slider[0][0]) { |
|
maxStep = slider.property("max"); |
|
step = slider.property("value"); |
|
slider.on("change", function () { |
|
vis.stop(); |
|
step = this.value; |
|
vis.draw(vis.params); |
|
}); |
|
running = vis.params.running || 0; // autorunning off or manually set on |
|
} else { |
|
running = -1; // never attempt auto-running |
|
} |
|
button = d3.select(vis.params.button || ".button"); |
|
if (button[0][0] && running > -1) { |
|
button.on("click", function () { |
|
if (running) { |
|
vis.stop(); |
|
} else { |
|
vis.start(); |
|
} |
|
}); |
|
} |
|
|
|
vis.loaddata(vis.params); |
|
}; |
|
|
|
function ready(error, firs, world, wnames, trafficdelays) { |
|
if (error) { |
|
console.error(error); |
|
} |
|
|
|
vis.firs = firs; |
|
vis.world = world; |
|
vis.wnames = wnames; |
|
vis.trafficdelays = trafficdelays; |
|
if (running > 0) { |
|
vis.start(); |
|
} else { |
|
vis.draw(vis.params); |
|
} |
|
} |
|
|
|
vis.loaddata = function (params) { |
|
if (!params) { params = {}; } |
|
|
|
// if `params.refresh` is set/true forces the browser to reload the file |
|
// and not use the cached version due to URL being different (but the filename is the same) |
|
var topo = (params.topo || "ectrl-firs.json") + (params.refresh ? ("#" + Math.random()) : ""); |
|
var world = (params.world || "world-50m.json") + (params.refresh ? ("#" + Math.random()) : ""); |
|
var names = (params.worldnames || "world-country-names.tsv") + (params.refresh ? ("#" + Math.random()) : ""); |
|
var trafficdelays = (params.trafficdelays || "En-Route_Traffic_FAB_FIR.csv") + (params.refresh ? ("#" + Math.random()) : ""); |
|
|
|
queue() |
|
.defer(d3.json, topo) |
|
.defer(d3.json, world) |
|
.defer(d3.tsv, names) |
|
.defer(d3.csv, trafficdelays) |
|
.await(ready); |
|
}; |
|
|
|
vis.play = function () { |
|
if (i === maxStep && !running) { |
|
step = -1; |
|
vis.stop(); |
|
} |
|
|
|
if (i < maxStep) { |
|
step = step + 1; |
|
running = 1; |
|
d3.select(".stop").html("Pause").on("click", vis.stop(params)); |
|
slider.property("value", sv); |
|
vis.draw(params); |
|
} else { |
|
vis.stop(); |
|
} |
|
}; |
|
|
|
vis.start = function (params) { |
|
timer = setInterval(function () { vis.play(params); }, 50); |
|
}; |
|
|
|
vis.stop = function (params) { |
|
clearInterval(timer); |
|
running = 0; |
|
d3.select(".stop").html("Play").on("click", vis.start(params)); |
|
}; |
|
|
|
var zoom = d3.behavior.zoom() |
|
.scaleExtent([1, 8000]) |
|
.on("zoom", zoomed); |
|
|
|
function zoomed() { |
|
g.style("stroke-width", 1.5 / d3.event.scale + "px"); |
|
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); |
|
// console.log("g.attr('transform') [zoomed]: " + g.attr("transform")); |
|
// console.log("center [zoomed]: " + path.projection().center()); |
|
// console.log("translate [zoomed]: " + path.projection().translate()); |
|
// console.log("rotate [zoomed]: " + path.projection().rotate()); |
|
// console.log("scale [zoomed]: " + path.projection().scale()); |
|
} |
|
|
|
// If the drag behavior prevents the default click, |
|
// also stop propagation so we don’t click-to-zoom. |
|
function stopped() { |
|
if (d3.event.defaultPrevented) d3.event.stopPropagation(); |
|
} |
|
|
|
function reset() { |
|
active.classed("active", false); |
|
active = d3.select(null); |
|
svg.transition() |
|
.duration(750) |
|
.call(zoom.translate([0, 0]).scale(1).event); |
|
// console.log("center: " + path.projection().center()); |
|
} |
|
|
|
function clicked(d) { |
|
if (active.node() === this) { |
|
return reset(); |
|
} |
|
active.classed("active", false); |
|
active = d3.select(this).classed("active", true); |
|
|
|
var bounds = path.bounds(d), |
|
dx = bounds[1][0] - bounds[0][0], |
|
dy = bounds[1][1] - bounds[0][1], |
|
x = (bounds[0][0] + bounds[1][0]) / 2, |
|
y = (bounds[0][1] + bounds[1][1]) / 2, |
|
scale = .9 / Math.max(dx / width, dy / height), |
|
translate = [width / 2 - scale * x, height / 2 - scale * y]; |
|
|
|
svg.transition() |
|
.duration(750) |
|
.call(zoom.translate(translate).scale(scale).event); |
|
// console.log("center [clicked]: " + path.projection().center()); |
|
} |
|
|
|
vis.draw = function (params) { |
|
// make stuff here! |
|
var pars = params || {}, |
|
scale = pars.scale || 600, |
|
cLon = pars.centerLon || 10, |
|
cLat = pars.centerLat || 51.5, |
|
projection = d3.geo.albers() |
|
.center([cLon, cLat]) |
|
.rotate([4.4, 0]) |
|
.parallels([50, 60]) |
|
.scale(scale) |
|
.translate([width / 2, height / 2]), |
|
firs = topojson.feature(vis.firs, vis.firs.objects.firs).features, |
|
|
|
tooltip = d3.select("#tooltip").classed("hidden", true), |
|
countryname = d3.select("#countryname").append("tspan"), |
|
graticule = d3.geo.graticule(), |
|
|
|
land = topojson.feature(vis.world, vis.world.objects.land), |
|
countries = topojson.feature(vis.world, vis.world.objects.countries).features, |
|
borders = topojson.mesh(vis.world, vis.world.objects.countries, function (a, b) { return a.id !== b.id; }), |
|
country, fir, |
|
fabs = [ |
|
{"id": "BALTICFAB", "name": "Baltic FAB"}, |
|
{"id": "BLUMEDFAB", "name": "BLUE MED FAB"}, |
|
{"id": "DANUBEFAB", "name": "DANUBE FAB"}, |
|
{"id": "DKSEFAB", "name": "DK-SE FAB"}, |
|
{"id": "FABCE", "name": "FAB CE (SES RP2)"}, |
|
{"id": "FABEC", "name": "FABEC"}, |
|
{"id": "NEFAB", "name": "NEFAB"}, |
|
{"id":"SWFAB", "name": "SW FAB"}, |
|
{"id":"UKIRELANDFAB", "name": "UK-Ireland FAB"} |
|
]; |
|
|
|
function idxForName(target) { |
|
return function(idx, item, i) { |
|
return item.name === target ? i : idx; |
|
}; |
|
} |
|
|
|
var rateById = {}; |
|
vis.trafficdelays.forEach(function(d) { |
|
var obj_idx = fabs.reduce(idxForName(d.ENTITY_NAME), -1); |
|
if (obj_idx === -1) { |
|
console.log(d); |
|
console.log("FAB name NOT found!!!!"); |
|
} |
|
else { |
|
//console.log(d); |
|
if (d.YEAR === "2015") { |
|
fabs[obj_idx].rate = d.FLT_ERT_1 == 0 ? 0 : d.DLY_ERT_1 / d.FLT_ERT_1; |
|
fabs[obj_idx].year = +d.YEAR; |
|
rateById[fabs[obj_idx].id] = fabs[obj_idx].rate; |
|
} |
|
} |
|
}); |
|
console.log(fabs); |
|
console.log(rateById); |
|
var twodecimals = d3.format(".2n"); |
|
var rates = fabs.map(function(d) { return d.rate;}); |
|
console.log([d3.min(rates), d3.max(rates)]); |
|
var qClasses = 5; |
|
var quantize = d3.scale.quantize() |
|
.domain([d3.min(rates), d3.max(rates)]) |
|
.range(d3.range(qClasses).map(function(i) { return "q" + i + "-" + qClasses; })); |
|
// var color = d3.scale.threshold() |
|
// .domain([.02, .03, .03, .05, .65]) |
|
// .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]); |
|
|
|
|
|
path = d3.geo.path() |
|
.projection(projection); |
|
|
|
countries.forEach(function (d) { |
|
vis.wnames.some(function (n) { |
|
if (+d.id === +n.id) { |
|
d.name = n.name; |
|
return d.name; |
|
} |
|
}); |
|
}); |
|
|
|
// /* Initialize tooltip */ |
|
// var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; }); |
|
// tip.html(function(d) { |
|
// return d.name + "<br><span>" + d.name + |
|
// ": avg delay per flight: " + twodecimals(d.rate) + "</span>"; |
|
// }); |
|
|
|
// // use tip.offset to follow an hidden circle that follows the mouse when over the FAB |
|
|
|
// /* Invoke the tip in the context of your visualization */ |
|
// svg.call(tip); |
|
|
|
svg.on("click", stopped, true); |
|
background.on("click", reset); |
|
g.style("stroke-width", "0.5px"); |
|
|
|
svg |
|
.call(zoom) // delete this line to disable free zooming |
|
.call(zoom.event); |
|
|
|
svg.on("mousemove", function () { |
|
// update tooltip position |
|
tooltip.style("top", (event.pageY + 16) + "px").style("left", (event.pageX + 10) + "px"); |
|
return true; |
|
}); |
|
|
|
|
|
svg.selectAll(".path.graticule") |
|
.data([graticule]).enter() |
|
.append("path") |
|
.classed("graticule", true) |
|
.attr("d", path); |
|
|
|
|
|
svg.append("g") |
|
.attr("class", "legendQuant") |
|
.attr("transform", "translate(20," + height/3 + ")"); |
|
|
|
var legend = d3.legend.color() |
|
.labelFormat(d3.format(".2f")) |
|
.useClass(true) |
|
.scale(quantize); |
|
|
|
svg.select(".legendQuant") |
|
.call(legend); |
|
|
|
country = g.selectAll(".country") |
|
.data(countries) |
|
.enter().insert("path", ".graticule") |
|
.attr("class", function (d) {return "country country" + d.id; }) |
|
.attr("d", path) |
|
.text(function (d) { return d.id; }) |
|
.on("mouseover", function (d, i) { |
|
d3.select(this).style({'stroke-opacity': 1, 'stroke': '#F00'}); |
|
// http://stackoverflow.com/questions/17917072/#answer-17917341 |
|
// d3.select(this.parentNode.appendChild(this)).style({'stroke-opacity':1,'stroke':'#F00'}); |
|
if (d.id) { |
|
tooltip.classed("hidden", false); |
|
countryname.text(d.name); |
|
} |
|
}) |
|
.on("mouseout", function () { |
|
this.style.stroke = "#000"; |
|
tooltip.classed("hidden", true); |
|
}) |
|
.on("mousedown.log", function (d) { |
|
console.log("id=" + d.id + "; name=" + d.name + "; centroid=[" + path.centroid(d) + "] px."); |
|
}); |
|
|
|
|
|
// TODO: this seems not too much a D3 idiom... |
|
fabs.forEach(function (f) { |
|
// from http://stackoverflow.com/a/16093597/963575 |
|
var mmm = topojson.merge( |
|
vis.firs, |
|
vis.firs.objects.firs.geometries.filter(function (d) { |
|
return d.properties.fab === f.id; |
|
})); |
|
mmm.id = f.id; |
|
mmm.name = f.name; |
|
mmm.rate = f.rate; |
|
g.append("path") |
|
.datum(mmm) |
|
.attr("d", path) |
|
// .attr("class", "fab " + f.id) |
|
// .style("fill", function(d) { return color(d.rate); }) |
|
.attr("class", "fab " + f.id + " " + quantize(f.rate)) |
|
// .on("click", clicked) |
|
.on("mouseover", function (d) { |
|
d3.select(this).style("stroke", "red"); |
|
// tip.show(d); |
|
tooltip.classed("hidden", false); |
|
// countryname.text(d.name + ", avg delay per flight: " + twodecimals(d.rate)); |
|
countryname.html(d.name + "<br> avg delay per flight: " + twodecimals(d.rate)); |
|
}) |
|
.on("mouseleave", function (d) { |
|
d3.select(this).style("stroke", "yellow"); |
|
tooltip.classed("hidden", true); |
|
// tip.hide(d); |
|
}) |
|
; |
|
}); |
|
|
|
}; |
|
|
|
}()); |
