31:T1042,mlowerap = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const border = 1; const bordercolor = "#616A6B"; function render() { // sphere const upper_svg = svg.append("g"); upper_svg .attr("id", "sphere") .append("path") .datum({ type: "Sphere" }) .attr("class", "sphere") .attr("fill", bg) .attr("stroke", "black") .attr("strokeWidth", 0.25) .attr("d", path); // graticule upper_svg .append("g") .datum(graticule) .append("path") .attr("d", path) .attr("stroke", "#AAAAAA") .attr("stroke-width", 0.2) .attr("fill", "none") .attr("class", "graticule"); // land/countries upper_svg .append("g") .attr("class", "countries") .selectAll("path") .data(countries) .join("path") .attr("d", path) .attr("class", "country") .text((d) => d.properties.name); // (internal) country borders upper_svg .append("path") .attr("fill", "none") .attr("d", path(borders)) .attr("class", "border"); // ACC (upper) let upp = upper_svg .append("g") .attr("class", "ansp") .selectAll("path") .data(upper_ace.features) .join("path") .attr("d", path) .attr("class", "ansp") .attr("stroke", abc) .attr("stroke-width", 1) .attr("fill", afc) .attr("fill-opacity", alpha); // ACC (lower) const inset_svg = svg .append("svg") .attr("viewBox", [0, 0, width / 3 - 20, height / 3 - 20]) .attr("width", width / 3.5) .attr("height", height / 3.5) .attr("stroke-width", "1px") .attr("id", "inset") .attr("border", border) .attr("y", 12) // bottom .attr("x", 12); // right inset_svg .append("g") .attr("id", "sphere") .append("path") .datum({ type: "Sphere" }) .attr("class", "sphere") .attr("fill", bg) .attr("stroke", "black") .attr("strokeWidth", 0.25) .attr("d", inset_path); // graticule inset_svg .append("g") .datum(graticule) .append("path") .attr("d", inset_path) .attr("stroke", "#AAAAAA") .attr("stroke-width", 0.2) .attr("fill", "none") .attr("class", "graticule"); // land/countries inset_svg .append("g") .attr("class", "countries") .selectAll("path") .data(countries) .join("path") .attr("d", inset_path) .attr("class", "country") .text((d) => d.properties.name); // (internal) country borders inset_svg .append("path") .attr("fill", "none") .attr("d", path(borders)) .attr("class", "border") .on("mouseover", function () { tooltip.style("display", null); }); let low = inset_svg .append("g") .attr("class", "ansp") .selectAll("path") .data(lower_ace.features) .join("path") .attr("d", inset_path) .attr("class", "ansp") .attr("stroke", abc) .attr("stroke-width", 1) .attr("fill", afc) .attr("fill-opacity", alpha) .text((d) => d.properties.id); // inset label inset_svg .append("text") .attr("x", 10) .attr("y", 20) .text("Lower airspace") .style("fill", "#333333") .style("font-size", "1.2vw") .style("font-weight", "bold") .attr("class", "title"); // Border: w/ MAGIC numbers! var borderPath = inset_svg .append("rect") .attr("x", 0 - 0.5 * border + border) .attr("y", 0 - 0.5 * border - border) .attr("width", width / 3.5 + 24.5) .attr("height", height / 3.5 + 19.5) .style("stroke", bordercolor) .style("fill", "none") .style("stroke-width", border); // events upp .on("mouseover", mouseOver) .on("mousemove", mouseMove) .on("mouseout", mouseOut) .on("click", mouseClick); low .on("mouseover", mouseOver) .on("mousemove", mouseMove) .on("mouseout", mouseOut) .on("click", mouseClick); } return svg.call(render).node(); }32:T493,upper_ace = { const ace = structuredClone(upper); let f = ace.features; ace.features = f.filter( (d) => !["ONDA", "ISRAEL_AA", "UKSATSE"].includes(d.properties.code) ); // convert to integers ace.features.forEach((d) => { d.properties.id = +d.properties.id; d.properties.airac_cfmu = +d.properties.airac_cfmu; }); for (let i = 0; i < factsheets.length; i++) { ace.features.forEach((d) => { if (d.properties.id == "44") { console.log(d.properties); // console.log(factsheets[i].ansp_id); } if (+d.properties.id == factsheets[i].ansp_id) { d.properties = { ...d.properties, ...factsheets[i] }; // logo d.properties.logo = "https://ansperformance.eu/images/ansp/logo/" + d.properties.code.toLowerCase().replace(/\s+/g, "_") + ".png"; // pdf d.properties.pdf = "https://ansperformance.eu/library/ace/ansp-factsheets/" + d.properties.name + ".pdf"; // NA for MUAC if (d.properties.reve_revenue === "NA") { d.properties.reve_revenue = 0; } } }); } return ace; }33:T78f,function tooltip_html(d) { return `

${d.properties.ansp_short} (${ d.properties.country_name })

Key data (${d.properties.year_data})
Gate-to-gate total revenues	${formatBillion(d.properties.reve_revenue)}€
Gate-to-gate total costs:	${formatBillion(d.properties.cos_ept_imet)}€
Gate-to-gate ATM/CNS provision costs:	${formatBillion(d.properties.cost_controllable)}€
Gate-to-gate total ATM/CNS assets:	${formatBillion(d.properties.aset_asset)}€
Gate-to-gate ANS total capex:	${formatBillion(d.properties.aset_capex)}€
ATCOs in OPS (FTEs):	${d3.format(".0f")(d.properties.staf_atco)}
Gate-to-gate ANS staff:	${d3.format(".0f")(d.properties.staf_staff_by_type)}
IFR flight-hours:	${d3.format(".2s")(d.properties.ansp_ifr_hr)}
IFR airport movements:	${formatZero(d.properties.ansp_ifr_airp_mvt)}
En-route sectors (max open):	${d3.format(".2s")(d.properties.ansp_acc_maxc_sector)}
Number of ACCs:	${d3.format(".0f")(d.properties.ansp_acc_nb)}
Minutes of ATFM delays (post-OPS adjusted):	${d3.format(".2s")(d.properties.tdm_post_ops)}

Click to get PDF facsheet.

`; }34:[{"id":"a11777d7c3ce2da3b8897f3f47fdc207e468b952f25a275a7fb0df7437580b27c31c8eddf5bb9d8086b3278413c6f268d9dd523c9243e9d5c08623cd9aa3db9f","href":"https://static.observableusercontent.com/files/a11777d7c3ce2da3b8897f3f47fdc207e468b952f25a275a7fb0df7437580b27c31c8eddf5bb9d8086b3278413c6f268d9dd523c9243e9d5c08623cd9aa3db9f","name":"factsheets.csv","type":"text/csv","lastModified":1718358918326.947,"size":7358},{"id":"54f996bdab4849db943c4cd8f757ad983a2a04d83c277ddb226b160dae5a0d258c19905a696ed7b26bc2e0c177837b8421f979d00717811aa9e596cf359c44ab","href":"https://static.observableusercontent.com/files/54f996bdab4849db943c4cd8f757ad983a2a04d83c277ddb226b160dae5a0d258c19905a696ed7b26bc2e0c177837b8421f979d00717811aa9e596cf359c44ab","name":"factsheets@2.csv","type":"text/csv","lastModified":1671016259747.94,"size":7586},{"id":"2a14e9d74c4c620e754ec24d85dca8bae9aded24aa4da771c6de805383c9b6ad31c1b3c340dd125f7559346ad5a8f01d2ac63358c639121c9c0668b46e67ebb9","href":"https://static.observableusercontent.com/files/2a14e9d74c4c620e754ec24d85dca8bae9aded24aa4da771c6de805383c9b6ad31c1b3c340dd125f7559346ad5a8f01d2ac63358c639121c9c0668b46e67ebb9","name":"pdfs.csv","type":"text/csv","lastModified":1671016259747.94,"size":3022},{"id":"48ee162f9a147a1f5a54c5e46f40815ff66f7fa6d6fff225e34cff873dbd1c395d01fcac92f833d3d60289511ca34b3c4ec40d65a19e0622cea4b96326e3b35f","href":"https://static.observableusercontent.com/files/48ee162f9a147a1f5a54c5e46f40815ff66f7fa6d6fff225e34cff873dbd1c395d01fcac92f833d3d60289511ca34b3c4ec40d65a19e0622cea4b96326e3b35f","name":"ansp_upper_490@1.json","type":"application/json","lastModified":1671016259747.94,"size":145984},{"id":"d5662e003686dc2392022a2a39f3d724d75c96af5755cfe67db2605c422b47e28e1114f3a57500a02beb7f91d3b2d4e483a0be16d8ec34c587c48bf25e4fc8f9","href":"https://static.observableusercontent.com/files/d5662e003686dc2392022a2a39f3d724d75c96af5755cfe67db2605c422b47e28e1114f3a57500a02beb7f91d3b2d4e483a0be16d8ec34c587c48bf25e4fc8f9","name":"ansp_lower_490@1.json","type":"application/json","lastModified":1671016259747.94,"size":157236},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1671016259747.94,"size":756420}] 2f:{"title":"Map of European ANSPs ACE 2021 scope","cells":[{"id":1584,"value":"# Map of European ANSPs ACE 2021 scope\n\n**OBSOLETE**\n\nThis is a map showing the [ANSP](https://ansperformance.eu/acronym/ansp/)'s analysed in the latest ACE report.\nSee the [ACE Overview](https://ansperformance.eu/economics/ace-overview/) page in the AIU Portal for further details.","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"## Pending Issues/Features\n1. ~~(**issue**): BHANSA id = 45 is not matched by factsheet PDF: but it is an ANSP airspace out of NM for AIRAC 490...I probably need a 2020 AIRAC to get the right one...~~\n2. ~~(**issue**): check tooltip text for table; also should country stay? (if so, MUAC stays as Maastricht?)~~\n3. (**nice to have**) make logos background transparent\n4. (**nice to have**) make logos more _horizontal_ (i.e. text on the right), i.e EUROCONTROL, ARMATS, DFS, ...\n5. (**feature**): add tiles like in https://observablehq.com/@harrystevens/map-zooming-with-slippy-tiles-and-a-scale-bar\n6. (**feature**): add dots for major airports","pinned":false,"hidden":false,"mode":"md"},{"id":938,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"height = 0.8 * width // / 1.618","pinned":false,"hidden":false,"mode":"ojs"},{"id":2087,"value":"viewof alpha = Inputs.range([0, 1.0], {\n label: \"Airspace opacity\",\n step: 0.1,\n value: 0.3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"----\n### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":2009,"value":"// airspace highlight color\nviewof ahc = Inputs.color({\n label: \"Airspace border's highlight color\",\n value: \"#ffff00\",\n description: \"This color picker starts out #ffff00\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1984,"value":"// airspace border color\nviewof abc = Inputs.color({\n label: \"Airspace border's color\",\n value: \"#5D6D7E\",\n description: \"This color picker starts out #5D6D7E\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"viewof lc = Inputs.color({\n value: \"#D3D3D3\",\n label: \"Land's color\",\n description: \"This color picker starts out #D3D3D3\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"viewof cbc = Inputs.color({\n value: \"#FFFFFF\",\n label: \"Country borders' color\",\n description: \"This color picker starts out #FFFFFF\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"viewof bg = Inputs.color({\n value: \"#f1f6fb\",\n label: \"Oceans' color\",\n description: \"This color picker starts out #F1F6FB (but #73CDFF is nice too)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1994,"value":"Make the fill color for the airspace a function for extensions/reuse, i.e. notebooks using this map can fill according to bound values and create a choropleth.","pinned":false,"hidden":false,"mode":"md"},{"id":1992,"value":"afc = function (d) {\n return \"#2990EA\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"## Data\nBind airspaces/ANSPs with data:","pinned":false,"hidden":false,"mode":"md"},{"id":1684,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"lower_ace = {\n const ace = structuredClone(lower);\n\n // not really needed because inset will not show Morocco nor Israel\n let f = ace.features;\n ace.features = f.filter(\n (d) => ![\"ONDA\", \"ISRAEL_AA\"].includes(d.properties.id)\n );\n\n for (let i = 0; i < factsheets.length; i++) {\n ace.features.forEach((d) => {\n if (d.properties.id == factsheets[i].ansp_id) {\n d.properties = { ...d.properties, ...factsheets[i] };\n // logo\n d.properties.logo =\n \"https://ansperformance.eu/images/ansp/logo/\" +\n d.properties.code.toLowerCase().replace(/\\s+/g, \"_\") +\n \".png\";\n // pdf\n d.properties.pdf =\n \"https://ansperformance.eu/library/ace/ansp-factsheets/\" +\n d.properties.name +\n \".pdf\";\n }\n });\n }\n return ace;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1884,"value":"factsheets = FileAttachment(\"factsheets.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1933,"value":"pdfs = FileAttachment(\"pdfs.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"## GIS","pinned":false,"hidden":false,"mode":"md"},{"id":1615,"value":"upper = {\n const g = await FileAttachment(\"ansp_upper_490@1.json\").json();\n return rewind(g);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"lower = {\n const g = await FileAttachment(\"ansp_lower_490@1.json\").json();\n return rewind(g);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"graticule = d3.geoGraticule().step([2.5, 2.5])()","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"projection = d3\n .geoAzimuthalEqualArea()\n .rotate([-13, -59])\n .translate([width / 2, width * 0.3])\n .scale(915 * (width / 928))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"path = d3.geoPath(projection).pointRadius(2)\n\n// path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"--- \n### Inset","pinned":false,"hidden":false,"mode":"md"},{"id":1708,"value":"viewof focus_zoom_radius = Inputs.range([0, 3], {\n label: \"Focus radius (°):\",\n step: 0.1,\n value: 2.4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"focus_circle = d3.geoCircle().radius(focus_zoom_radius).center(focus_center)()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1704,"value":"focus_center = [4.031982, 52.5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"inset_path = d3.geoPath(inset_projection(width / 4, height / 4)).pointRadius(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"inset_projection = function (width, height) {\n const [lat, lon] = focus_center;\n return d3\n .geoOrthographic()\n .rotate([-lat, -lon, 0])\n .fitSize([width, height], focus_circle)\n .precision(0.1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2154,"value":"### Events","pinned":false,"hidden":false,"mode":"md"},{"id":2192,"value":"formatZero = function (d) {\n if (+d >= 1) {\n return d3.format(\".2s\")(d);\n } else {\n return \"—\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2184,"value":"formatBillion = function (d) {\n if (+d >= 1) {\n return d3.format(\".2s\")(d).replace(/G/, \"B\");\n } else {\n return \"—\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1668,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"function mouseClick(event, d) {\n window.open(encodeURI(d.properties.pdf), \"_blank\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"function mouseOver(event, d) {\n // console.log(d);\n tooltip\n // get toltip a little away from event position (it avoids flickering in Chromiun)\n // see mouseMove too\n // .style(\"left\", event.pageX + 10 + \"px\")\n .style(\"left\", () => {\n if (width - (event.pageX + 10) > 100) {\n return event.pageX - 200 + \"px\";\n } else {\n return event.pageX + 10 + \"px\";\n }\n })\n .style(\"top\", () => {\n if (height - (event.pageY + 10) > 100) {\n return event.pageY - 300 + \"px\";\n } else {\n return event.pageY + 10 + \"px\";\n }\n })\n .style(\"display\", \"block\")\n .style(\"z-index\", 9999)\n .html(tooltip_html(d));\n\n // cursor change on target\n d3.select(event.target).style(\"cursor\", \"pointer\");\n\n // highlight effects on target\n d3.select(event.target)\n .raise() //so that the polygon edges aren't covered by neighboring polygons.\n .transition()\n .attr(\"stroke\", ahc)\n .attr(\"stroke-width\", 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"function mouseMove(event, d) {\n tooltip\n // get toltip a little away from event position (it avoids flickering in Chromiun)\n // see mouseOver too\n .style(\"left\", () => {\n if (event.pageX + 10 > width) {\n return event.pageX - 200 + \"px\";\n } else {\n return event.pageX + 10 + \"px\";\n }\n })\n .style(\"top\", () => {\n if (event.pageY + 10 > height) {\n return event.pageY - 300 + \"px\";\n } else {\n return event.pageY + 10 + \"px\";\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"function mouseOut(event, d) {\n tooltip.style(\"display\", \"none\");\n\n // cursor change removed\n d3.select(event.target).style(\"cursor\", \"default\");\n\n // highlight removed\n d3.select(event.target)\n .transition()\n .attr(\"stroke\", abc)\n .attr(\"stroke-width\", 1);\n // .attr(\"fill\", afc)\n // .attr(\"fill-opacity\", 0.3);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"md`## Other tools`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip_espin\")\n .attr(\"id\", \"tooltip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"import { rewind } from \"@bumbeishvili/rewind-geojson\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"d3 = require(\"d3@7\", \"d3-geo@3\", \"d3-geo-projection@4\", \"d3-geo-scale-bar@1.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"## Inspirations\n\n* https://observablehq.com/@ambassadors/historical-map-day-24\n* http://bl.ocks.org/AndrewStaroscik/5222370","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}