3e:null 3f:["$","title",null,{"children":"Personal Flight Map | Ruzgar Imski | Observable"}] 45:T97c,globe = { const width = 500, height = 500; const mapRadius = height / 3; const projection = d3.geoOrthographic() .scale(mapRadius) .precision(0.1) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); const color = d3.scaleOrdinal(d3.schemeAccent) .domain(airlines); const createGlobe = () => { const countriesGroup = d3.create('svg:g'); countriesGroup .append('circle') .attr('id', 'atmoshpere') .attr('filter', 'url(#atmosphere-glow)') .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', mapRadius); countriesGroup .append('circle') .attr('id', 'ocean') .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', mapRadius); countriesGroup .selectAll('path') .data(topojson.features) .enter() .append('path') .attr('d', path) .attr('id', d => `country ${d.properties.iso_a3}`) .attr('filter', d => countriesVisisted.has(d.properties.name) ? 'url(#path-glow)' : undefined) .attr('class', d => countriesVisisted.has(d.properties.name) ? 'country highlight' : 'country'); countriesGroup .selectAll('.flightarc') .data(flightArcs) .enter() .append('path') .attr('class', 'flightarc') .attr('filter', 'url(#path-glow)') .style('stroke', d => color(d.airline)) .attr('d', path); return countriesGroup; }; const setupRotationAndAtmosphere = () => { const atmosphereFlicker = (flickerAmount = 1) => { const newAtmosphereRadius = 10 + Math.random() * flickerAmount; const atmosphereSVGElement = document.getElementById('atmosphere-offset'); if (atmosphereSVGElement) { atmosphereSVGElement.setAttribute('dx', newAtmosphereRadius); atmosphereSVGElement.setAttribute('dy', newAtmosphereRadius); } }; let prevTime = 0; const latestRotation = [0, 0]; d3.timer(time => { const rotationX = latestRotation[0] - (((prevTime - time) * 360) / 30000); latestRotation[0] = rotationX <= -180 ? 180 : rotationX; latestRotation[1] = Math.sin(time / 2000) * (width / 100); projection.rotate(latestRotation); d3.selectAll('path').attr('d', path); prevTime = time; atmosphereFlicker(); }); }; const myGlobe = createGlobe(); setupRotationAndAtmosphere(); return myGlobe; }46:[{"id":"27b775e4274dccbcdf6262232ba70eee1ee351a198e98cb3fe223fa3f4ae15b3e4890b29fca1d12d126c6a8a5aa525e0ca42b294aec9ed0c4d545b9ab9d4ebf9","href":"https://static.observableusercontent.com/files/27b775e4274dccbcdf6262232ba70eee1ee351a198e98cb3fe223fa3f4ae15b3e4890b29fca1d12d126c6a8a5aa525e0ca42b294aec9ed0c4d545b9ab9d4ebf9","name":"flightData.csv","type":"text/csv","lastModified":1684007744485.375,"size":8433},{"id":"4ac5918700779ecd5505765221a2e3e7b841ab34cfba2eb13207b5b0113481ec8fd01170fc0c0487bfc26b1236a747da0492d6f50b44e9206c0299648bf36a42","href":"https://static.observableusercontent.com/files/4ac5918700779ecd5505765221a2e3e7b841ab34cfba2eb13207b5b0113481ec8fd01170fc0c0487bfc26b1236a747da0492d6f50b44e9206c0299648bf36a42","name":"globe.geo.json","type":"application/json","lastModified":1684007744485.375,"size":577300}] 43:{"id":"06bde287a67a7c23","slug":null,"title":"Personal Flight Map","thumbnail":"009cd471da04df76db56d0f5ff6670a6f34055f7b1236b1481dba35db5c598e2","access_level":"public","create_time":"$D2023-05-13T19:55:44.485Z","update_time":"$D2023-05-13T19:55:44.485Z","view_time":null,"first_public_time":"$D2023-05-13T19:55:44.485Z","has_unpublished_edits":null,"fork":{"id":"00b4d111fc767cba","slug":"personal-flight-map","title":"Personal Flight Map","owner":{"id":"7e79d7acfbce85b0","login":"ckanz","name":"Clemens Anzmann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":733,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Personal Flight Map","cells":[{"id":0,"value":"md`# Personal Flight Map\n\nThis is a map of all the flights I have taken (before 2020) created with the help of [this great tutorial by Andy Barefoot](https://medium.com/@andybarefoot/making-a-map-using-d3-js-8aa3637304ee).\n\nThe data comes from a personal spreadsheet where I'm keeping track of my flights.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"flightArcs = d3.csvParse(await FileAttachment('flightData.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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"md`The main code for the globe is below. I'm creating the globe as an SVG using d3 in \\`\\`createglobe\\`\\` and set up the rotation and atmoshpere flicker effect in \\`\\`setupRotationAndAtmosphere\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"filter = `\n \n \n \n \n \n \n \n \n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"styles = `\n #myMap {\n background: radial-gradient(circle, rgba(60,60,60,1) 0%, rgba(0,0,0,1) 100%);\n }\n\n #myMap #ocean {\n fill: black;\n stroke: green;\n stroke-width: 1px;\n }\n\n #myMap #atmoshpere {\n fill: green;\n fill-opacity: 0.5;\n }\n\n #myMap .country {\n stroke: darkgreen;\n stroke-width: 1;\n fill: rgb(10,10,10);\n }\n\n #myMap .highlight {\n stroke: green;\n fill: darkgreen;\n fill-opacity: 0.1;\n }\n\n #myMap .flightarc {\n stroke: orange;\n stroke-width: 1px;\n fill-opacity: 0;\n stroke-linecap: round;\n stroke-opacity: 0.5;\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"d3 = require('d3');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"