31:T1123,map = { const chartid = "routes-map"; const colorLine = "#ff0072" const colorBuffer = "#ffcb00" // #54d2d2 blue const colorPoint = "#ffcb00" // "#f8aa4b" let code = selectionCode; let ellipsePadding = 5; let showBuffer = false; let projection = d3.geoNaturalEarth1() let outline = ({type: "Sphere"}) let graticule = d3.geoGraticule10() //d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); let path = d3.geoPath(projection) const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); const mapHeight = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), mapHeight); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, mapHeight]) .attr("id", chartid); const defs = svg.append("defs"); defs.append("path") .attr("id", "outline") .attr("d", path(outline)); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const g = svg.append("g") .attr("clip-path", `url(${new URL("#clip", location)})`); g.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "#fff"); g.append("path") .attr("d", path(graticule)) .attr("stroke", "#ddd") .attr("fill", "none"); let countries = topojson.feature(world, world.objects.countries); let borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b); g.append("path") .attr("d", path(countries)) .attr("fill", "#DDD"); g.append("path") .attr("d", path(borders)) .attr("fill", "none") .attr("stroke", "#EFEFEF"); svg.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("stroke", "#999") .attr("fill", "none"); if (code !== "") { let highlight = data[code] let coord = projection([+highlight.longitude, +highlight.latitude]) let highlightPoint = g.append("g") .attr('class', 'airport-highlight') .attr("transform", d => { let x = coord[0] let y = coord[1] return `translate(${x},${y} )` }) // highlightPoint.append("circle") // .attr("r", 20) // .attr("fill", "none") // .attr("stroke-opacity", 1) // .attr("stroke-width", 2) // .attr("stroke", highlightColor); highlightPoint.append("circle") .attr("r", 20) .attr("fill", "none") .attr("stroke-opacity", .75) .attr("stroke-width", 2) .attr("stroke", colorBuffer); // highlightPoint.append("circle") // .attr("r", 20) // .attr("fill", lineColor) // .attr("opacity", .35) } const airports = g.append("g") .attr("class", "airports") // The actual points const airport = airports.selectAll("airport") .data(points) .join("g") .attr('class', 'airport') .attr("transform", d => { let x = projection([d.lon, d.lat])[0] let y = projection([d.lon, d.lat])[1] return `translate(${x},${y} )` }) airport.append("circle") .attr("r", 1) .attr("fill", d => d.routes !== 0 ? '#333' : '#999'); const routes = g.append("g") .attr("class", "routes") let route = routes.selectAll("g") .data(routeSelection) .join("g") .attr("class", (d) => `route-${d.orig.code}-${d.dest.code}`) route.append("path") // .attr("class", "background") // .attr("style", "fill:none !important") .attr("fill", "none") .attr("stroke-width", (code === "") ? 0.35 : 1) .attr("stroke", colorLine ) .attr("stroke-opacity", (code === "") ? 0.25 : .5) .attr('d', (d) => path({type: "LineString", coordinates: [[d.orig.lon, d.orig.lat], [d.dest.lon, d.dest.lat]]})) if (code !== "") { let highlight = data[code] let coord = projection([+highlight.longitude, +highlight.latitude]) let highlightPoint = g.append("g") .attr('class', 'airport-highlight') .attr("transform", d => { let x = coord[0] let y = coord[1] return `translate(${x},${y} )` }) highlightPoint.append("circle") .attr("r", 3) .attr("fill", colorPoint ) } return svg.node(); }32:Tc33,chart = { const height = width*.85; const margin = ({ top: 20, right: 20, bottom: 20, left: 20 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-circlepack"; const root = d3.pack() .size([innerWidth, innerHeight]) .padding(4) (d3.hierarchy({children: carrierCounts}) .sum(d => d.value)) // const root = pack(carrierCounts); const colorLine = "#ff0072" const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, width]) // .attr("font-size", 10) // .attr("font-family", "sans-serif") // .attr("text-anchor", "middle"); const leaf = group.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`) .attr("class", "carrier"); leaf.append("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("r", d => d.r) .attr("fill-opacity", 0.25) .attr("fill", "grey") .on('mousemove', (event, d) => { d3.select(event.target).attr('stroke', colorLine); let tipContent = `${d.data.carrier}
${d.data.value} Routes` chartTip.style("left", () => { console.log(d3.pointer(event)[0]) console.log(innerWidth - d3.pointer(event)[0]) if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipContent); }) .on('mouseout', (event, d) => { chartTip.style("display", "none"); // Hide toolTip d3.select(event.target).attr('stroke','none'); }); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") // .attr("clip-path", d => d.clipUid) .attr("pointer-events", "none") // .text(d => d.data.value > 250 ? d.data.carrier : "") .attr("font-size", 10) // .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .selectAll("tspan") // .data(d => d.data.value > 250 ? d.data.carrier.split(/(?=[A-Z][a-z])|\s+/g) : "") .data(d => d.data.value > 250 ? d.data.carrier.split(" ") : "") .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => d); // leaf.append("title") // .text(d => `${d.data.title === undefined ? "" : `${d.data.title} // `}${d.routes}`); return svg.node(); }33:T495,routes = { let results = {} let set = []; let links = [] let odpairs = [] let carrierRoute = [] Object.keys(data).forEach(function(key) { let row = data[key] row.routes.map(route => { let destRow = data[route.iata] //let destAirport = pointsMap.get(route.iata) if(!links.includes(`${route.iata}-${row.iata}`)) { set.push({ id: `${row.iata}-${route.iata}`, orig: { code: row.iata, lat: +row.latitude, lon: +row.longitude }, dest: { code: route.iata, lat: +destRow.latitude, lon: +destRow.longitude }, carriers: route.carriers, km: route.km, min: route.min }) links.push(`${row.iata}-${route.iata}`) } odpairs.push(`${row.iata}-${route.iata}`) route.carriers.map(carrier => { carrierRoute.push({carrier, orig: row.iata, dest: route.iata}) }) }) }); results.set = set; results.carrierRoute = carrierRoute; results.odpairs = odpairs; return results }34:T1d63,circlePack = { const height = width*.85; const margin = ({ top: 20, right: 20, bottom: 20, left: 20 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-circlepack-airports"; const colorLine = "#ff0072" const root = d3.pack() .size([innerWidth, innerHeight]) .padding(4) (hierarchy) let format = d3.format(",d") const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const node = group.append("g") .attr("pointer-events", "all") .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); // Country Labels let typeScale = d3.scaleLinear() .domain(d3.extent(root.children, d => d.r)) .range([8,24]); let countries = group.append("g") .attr("pointer-events", "none") .selectAll("g") .data(root.descendants().filter(d => d.depth === 1)) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); countries.append("text") .attr("class", d => `labels label-${d.data[0]}`) .attr("x", 0) .attr("y", 0) .attr("pointer-events", "none") .attr("font-size", d => typeScale(d.r)) .attr("opacity", .75) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") // //.text(d => data.placeMap.get(d.data[0])[0].entity); // .text(d => { // let label = d.data[0] //data.placeMap.get(d.data[0])[0].entity // //let label = lookupContinent[d.data[0]] //data.placeMap.get(d.data[0])[0].entity // return (d.value > 100) ? label : ""; // }) .selectAll("tspan") .data(d => d.value > 100 ? d.data[0].split(" ") : "") .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => d); node.append("circle") .attr("r", d => d.r) .attr("stroke", d => d.children ? "#ddd" : "none") .attr("fill", d => d.children ? "none" : "#ddd") .on('mousemove', (event, d) => { if (d.depth === 2) { // change to 3 if three levels d3.select(event.target).attr('stroke', colorLine); let tipRow = data[d.data[0]] let tipContent = `${d.data[0]} - ${tipRow.name}
` tipContent += `${tipRow.city_name} - ${tipRow.country}
` tipContent += `${tipRow.routes.length} Routes
` chartTip.style("left", () => { console.log(d3.pointer(event)[0]) console.log(innerWidth - d3.pointer(event)[0]) if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipContent); } }) .on('mouseout', (event, d) => { chartTip.style("display", "none"); // Hide toolTip if (d.depth === 2) { d3.select(event.target).attr('stroke','none'); } }); const leaf = node.filter(d => !d.children); leaf.select("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); const outer = node.filter(d => !d.parents); //const outer = node.filter(d => d.depth === 1); outer .on('mousemove', (event, d) => { d3.selectAll("#"+chartid+" .labels" ).attr('opacity', .05); //d3.selectAll(`#${chartid} .label-{d.data[0]}`).attr('opacity', .15); }) .on('mouseout', (event, d) => { d3.selectAll("#"+chartid+" .labels" ).attr('opacity', .85); }); return svg.node(); } // chart_airtport_routes = { // const height = width*.85; // const margin = ({ top: 20, right: 20, bottom: 20, left: 20 }); // const innerHeight = height - margin.top - margin.bottom; // const innerWidth = width - margin.left - margin.right; // const chartid = "chart-circlepack-airports"; // const root = d3.pack() // .size([innerWidth, innerHeight]) // .padding(4) // (d3.hierarchy({children: points}) // .sum(d => d.routes)) // // const root = pack(carrierCounts); // const colorLine = "#ff0072" // const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, height]) // .attr("id", chartid); // const group = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // // const svg = d3.create("svg") // // .attr("viewBox", [0, 0, width, width]) // // .attr("font-size", 10) // // .attr("font-family", "sans-serif") // // .attr("text-anchor", "middle"); // const leaf = group.selectAll("g") // .data(root.leaves()) // .join("g") // .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`) // .attr("class", "carrier"); // leaf.append("circle") // .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) // .attr("r", d => d.r) // .attr("fill-opacity", 0.25) // .attr("fill", "grey") // .on('mousemove', (event, d) => { // d3.select(event.target).attr('stroke', colorLine); // let tipContent = `${d.data.carrier}
${d.data.value} Routes` // chartTip.style("left", () => { // console.log(d3.pointer(event)[0]) // console.log(innerWidth - d3.pointer(event)[0]) // if ((innerWidth - d3.pointer(event)[0]) < 120) { // return event.pageX - (24+240) + "px"; // } else { // return event.pageX + 24 + "px"; // } // }) // .style("top", event.pageY + 24 + "px") // .style("display", "inline-block") // .html(tipContent); // }) // .on('mouseout', (event, d) => { // chartTip.style("display", "none"); // Hide toolTip // d3.select(event.target).attr('stroke','none'); // }); // leaf.append("clipPath") // .attr("id", d => (d.clipUid = DOM.uid("clip")).id) // .append("use") // .attr("xlink:href", d => d.leafUid.href); // leaf.append("text") // // .attr("clip-path", d => d.clipUid) // .attr("pointer-events", "none") // // .text(d => d.data.value > 250 ? d.data.carrier : "") // .attr("font-size", 10) // // .attr("font-family", "sans-serif") // .attr("text-anchor", "middle") // .attr("alignment-baseline", "middle") // .selectAll("tspan") // // .data(d => d.data.value > 250 ? d.data.carrier.split(/(?=[A-Z][a-z])|\s+/g) : "") // .data(d => d.data.value > 250 ? d.data.carrier.split(" ") : "") // .join("tspan") // .attr("x", 0) // .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) // .text(d => d); // // leaf.append("title") // // .text(d => `${d.data.title === undefined ? "" : `${d.data.title} // // `}${d.routes}`); // return svg.node(); // }35:[] 2f:{"title":"Global Airline Routes","cells":[{"id":0,"value":"md`# Global Airline Routes\nNotebook exploring Jonty Wareing's [Global Airline Route Dataset](https://github.com/Jonty/airline-route-data)\n\nAllow a moment for data to load.
\nWork in progress. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`### Unique Route Connections (${routeSelection.length})\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"viewof as = autoSelect({\n //options: Object.keys(data),\n class: \"autoSelect\",\n options: pointsLookup,\n placeholder: \"Filter by IATA Airport Code\"\n})\n// viewof dd1 = select({\n// title: \"iata airport code \",\n// // description: \"Please pick your favorite stooge.\",\n// options: [\"All\", ...Object.keys(data)],\n// value: \"All\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"routeSelection = {\n if (selectionCode !== \"\") {\n //return routes.set.filter(d => d.id.contains(as))\n return routes.set.filter(d => d.id.includes(selectionCode))\n } else {\n return routes.set\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`## Carrier Routes\nThere are ${carrierCounts.length} unique carriers. Route counts here include both inbound and outbound flights for an airport pair.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"carrierCounts = d3.groups(routes.carrierRoute, d => d.carrier).filter(d => d[0] !== null).map(d => { \n let id = d[0].toLowerCase().replace(/ /g, '-')\n return {id, carrier: d[0], value: d[1].length}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`## Airports\nThere are ${points.length} airports listed and ${pointsRoutes.length} with at least one outbound route. The number of outbound routes for each airport are visualized here and summarized by country.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"// Generate a simple point set for ","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"hierarchy = {\n let config = {\n dataset: pointsRoutes,\n // groupByFns: [d => d.continent, d => d.country, d => d.code],\n groupByFns: [d => d.country, d => d.code],\n reduceFn: v => d3.sum(v, d => d[\"routes\"])\n}\n \n const defaultConfig = {\n childrenAccessorFn: ([key, value]) => value.size && Array.from(value),\n sumFn: ([key, value]) => value,\n sortFn: (a, b) => b.value - a.value,\n };\n const { dataset, reduceFn, groupByFns, childrenAccessorFn, sumFn, sortFn } = { ...defaultConfig, ...config };\n const rollupData = d3.rollup(dataset, reduceFn, ...groupByFns);\n const hierarchyData = d3.hierarchy([null, rollupData], childrenAccessorFn)\n .sum(sumFn)\n .sort(sortFn);\n return hierarchyData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"points = Object.keys(data).map(function(key) {\n let row = data[key]\n let routes = row.routes ? row.routes.length : null;\n return {code: key, continent: row.continent, country: row.country, routes, lat: +row.latitude, lon: +row.longitude}\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"pointsRoutes = points.filter(d => d.routes !== 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"// Generate a lookup string for easier searching in the AutoSelect","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"pointsLookup = Object.keys(data).map(function(key) {\n let row = data[key]\n return `${key} - ${row.name} (${row.city_name}, ${row.country})`\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"// Pull the IATA code from the autoselect to use for filtering, this could be optimized but the existing autoselect input doesn't seem to work with value/label pairs","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"selectionCode = as.substring(0,3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = fetch(`https://raw.githubusercontent.com/Jonty/airline-route-data/main/airline_routes.json`).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"lookupContinent = ({\n\"AF\": \"Africa\",\n\"AN\": \"Antarctica\",\n\"AS\": \"Asia\",\n\"EU\": \"Europe\",\n\"NA\": \"North America\",\n\"OC\": \"Oceania\",\n\"SA\": \"South America\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"import { world } from \"@benoldenburg/simple-globe\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"import {select, autoSelect} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3@6\") // Load D3","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}