2d:null 2e:["$","title",null,{"children":"Personal Flight Map | Clemens Anzmann | Observable"}] 33:T674,globe = { const size = 500; const mapRadius = size / 2.5; const center = size / 2; const projection = d3.geoOrthographic() .scale(mapRadius) .translate([center, center]); const path = d3.geoPath().projection(projection); const color = d3.scaleOrdinal(d3.schemeAccent).domain(airlines); const myGlobe = d3.create('svg:g'); myGlobe.append('circle') .attr('id', 'ocean') .attr('cx', center) .attr('cy', center) .attr('r', mapRadius); myGlobe.selectAll('path.country') .data(topojson.features) .enter() .append('path') .attr('d', path) .attr('class', d => countriesVisisted.has(d.properties.name) ? 'country highlight' : 'country') .attr('filter', d => countriesVisisted.has(d.properties.name) ? 'url(#glow)' : null); myGlobe.selectAll('path.flightarc') .data(flightArcs) .enter() .append('path') .attr('class', 'flightarc') .style('stroke', d => color(d.airline)) .attr('d', path); myGlobe.append('circle') .attr('id', 'atmosphere') .attr('cx', center) .attr('cy', center) .attr('r', mapRadius + 15); const allPaths = myGlobe.selectAll('path'); let prevTime = 0; const latestRotation = [0, 0]; const timer = d3.timer((time) => { const dt = time - prevTime; const rotationX = latestRotation[0] - ((dt * 360) / 60000); latestRotation[0] = rotationX <= -180 ? 180 : rotationX; latestRotation[1] = Math.sin(time / 2000) * 10; projection.rotate(latestRotation); allPaths.attr('d', path); prevTime = time; }); invalidation.then(() => timer.stop()); return myGlobe.node(); }34:[{"id":"4ac5918700779ecd5505765221a2e3e7b841ab34cfba2eb13207b5b0113481ec8fd01170fc0c0487bfc26b1236a747da0492d6f50b44e9206c0299648bf36a42","href":"https://static.observableusercontent.com/files/4ac5918700779ecd5505765221a2e3e7b841ab34cfba2eb13207b5b0113481ec8fd01170fc0c0487bfc26b1236a747da0492d6f50b44e9206c0299648bf36a42","name":"globe.geo.json","type":"application/json","lastModified":1580831507444.783,"size":577300},{"id":"27b775e4274dccbcdf6262232ba70eee1ee351a198e98cb3fe223fa3f4ae15b3e4890b29fca1d12d126c6a8a5aa525e0ca42b294aec9ed0c4d545b9ab9d4ebf9","href":"https://static.observableusercontent.com/files/27b775e4274dccbcdf6262232ba70eee1ee351a198e98cb3fe223fa3f4ae15b3e4890b29fca1d12d126c6a8a5aa525e0ca42b294aec9ed0c4d545b9ab9d4ebf9","name":"flightData.csv","type":"text/csv","lastModified":1580829556477.601,"size":8433},{"id":"735ca8f80e95407b26a0798a32779c2508e56c60f9a570f8f3484816bacbad7be6a956aee87ea567feb630dae548558bc3fbecca48edb2c4642853337800cd37","href":"https://static.observableusercontent.com/files/735ca8f80e95407b26a0798a32779c2508e56c60f9a570f8f3484816bacbad7be6a956aee87ea567feb630dae548558bc3fbecca48edb2c4642853337800cd37","name":"flightData@2.csv","type":"text/csv","lastModified":1767097529051.882,"size":10387}] 31:{"id":"00b4d111fc767cba","slug":"personal-flight-map","title":"Personal Flight Map","thumbnail":"c0a92414f1be66c3a6161ca8244f8cc0fddca719bdabb3c455c9f244b0b9035a","access_level":"public","create_time":"$D2020-02-04T15:04:46.583Z","update_time":"$D2026-01-01T10:11:22.777Z","view_time":null,"first_public_time":"$D2020-02-09T19:33:43.427Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7e79d7acfbce85b0","login":"ckanz","name":"Clemens Anzmann","avatar_url":"https://avatars-next.observableusercontent.com/cf5539f1e1c7fe0511f65fb44cb8784c7f2e95532582e5cafdf60831793c3f4d","tier":"starter_2024"},"version":874,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc4fab3ce4766f98","login":"ckanz","name":"Clemens Anzmann","avatar_url":"https://avatars-next.observableusercontent.com/cf5539f1e1c7fe0511f65fb44cb8784c7f2e95532582e5cafdf60831793c3f4d","tier":null}],"members":[{"type":"individual","id":"fc4fab3ce4766f98","login":"ckanz","name":"Clemens Anzmann","avatar_url":"https://avatars-next.observableusercontent.com/cf5539f1e1c7fe0511f65fb44cb8784c7f2e95532582e5cafdf60831793c3f4d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Personal Flight Map","cells":[{"id":0,"value":"md`# Personal Flight Map\n\nThis is a map of all the flights I have taken. I created this with the help of [this great tutorial by Andy Barefoot](https://medium.com/@andybarefoot/making-a-map-using-d3-js-8aa3637304ee).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"The data comes from a personal spreadsheet where I'm trying to keep track of my flights:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"flightArcs = d3.csvParse(await FileAttachment(\"flightData@2.csv\").text()).map(row => ({\n type: 'LineString',\n destination: row.target_country,\n airline: row.airline,\n coordinates: [\n [row.source_longitude, row.source_latitude],\n [row.target_longitude, row.target_latitude]\n ]\n})); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md`To be able to color the flight lines by airline and highlight the countries I've touched down, I'm creating a set of airlines and visited countries:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"airlines = new Set(flightArcs.map(f => f.airline));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"countriesVisisted = new Set(flightArcs.map(f => f.destination));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"Below is the d3 implementation of the rotating globe and flight arcs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md`Next are the SVG filters used to add the glow effect to flight lines and visited countries and the CSS for the colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"filter = `\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"styles = `\n #myMap {\n background: radial-gradient(circle, DarkSlateGrey 25%, Black 100%);\n }\n\n #myMap #atmosphere {\n fill: url(#atmosphereGradient);\n opacity: 0.5;\n filter: blur(5px);\n }\n\n #myMap #ocean {\n fill: DarkSlateGrey;\n }\n\n #myMap .country {\n stroke: DarkSlateGrey;\n stroke-width: 0.5px;\n }\n\n #myMap .highlight {\n stroke: GreenYellow;\n }\n\n #myMap .flightarc {\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n filter: url(#glow);\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"topojson = JSON.parse(await FileAttachment('globe.geo.json').text());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"d3 = require('d3');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"