31:T1752,map = { const svg = d3.create('svg').attr('viewBox', "0 0 " + mapWidth + " "+ (1 + hemisphereScale/2) * height ).attr('width',mapWidth) const path = d3.geoPath().projection(projection); const defs = svg.append("defs") // the clipPath, whatever shape you want to be the mask defs.append("clipPath") .attr("id", "outlineClip") .append("path") .attr('d', path(outline)); const orthoShadingGradient = defs.append('radialGradient').attr('id','orthographic-shading') orthoShadingGradient.append('stop').attr('offset',"25%").attr('stop-color', '#00000000') orthoShadingGradient.append('stop').attr('offset',"100%").attr('stop-color', '#00000033') svg.append('g') .append('path') .attr('d',path(outline)) .attr('fill','#e5f5ff') .attr('stroke','none') const g = svg.append("g"); g.selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", path) .attr('fill', 'white') .attr('stroke','#BBB') .attr('stroke-width','0.5px') .attr("clip-path", "url(#outlineClip)") svg.append('g') .append('path') .attr('d',path(outline)) .attr('fill','none') .attr('stroke','#ccc') const distanceCircle = svg .append('circle') .attr('cx',mapWidth/2) .attr('cy', height/2) .attr('r',mapWidth/2) .attr('fill','none') .attr('stroke','#0080bf88') .attr('stroke-width','0.8px') .attr("clip-path", "url(#outlineClip)") const citiesG = svg.append('g') const orthoFrontPath = d3.geoPath().projection(orthoProjectionFront); const orthoFront = svg.append('g').style('transform', 'translate(0, ' + (height - (height * hemisphereScale/2))+ 'px)') orthoFront.append('path') .attr('d',orthoFrontPath(outline)) .attr('fill','#e5f5ffCC') .attr('stroke','none') orthoFront.append('g').selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", orthoFrontPath) .attr('fill', 'white') .attr('stroke','#AAA') .attr('stroke-width','0.5px') const orthoFrontDistanceCircle = orthoFront.append('circle') .attr('cx', mapWidth * hemisphereScale / 2 ) .attr('cy', mapWidth * hemisphereScale / 2 ) .attr('fill','none') .attr('stroke','#0080bf88') .attr('stroke-width','1.2px') orthoFront.append('path') .attr('d',orthoFrontPath(outline)) .attr('fill','url(#orthographic-shading)') .attr('stroke','none') orthoFront.append('text').attr('class','ortho-label') .attr('x', 0.9 * mapWidth * hemisphereScale) .attr('y', 0.95 * height * hemisphereScale) .text(selectedCity.city + "'s Hemisphere") const orthoBackPath = d3.geoPath().projection(orthoProjectionBack); const orthoBack = svg.append('g').style('transform', 'translate(' + (100 * (1- hemisphereScale)) + '%, ' + + (height - (height * hemisphereScale/2))+ 'px)') orthoBack.append('path') .attr('d',orthoBackPath(outline)) .attr('fill','#e5f5ffCC') .attr('stroke','none') orthoBack.append('g').selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", orthoBackPath) .attr('fill', 'white') .attr('stroke','#AAA') .attr('stroke-width','0.5px') const orthoBackDistanceCircle = orthoBack.append('circle') .attr('cx', mapWidth * hemisphereScale / 2 ) .attr('cy', height * hemisphereScale / 2 ) .attr('fill','none') .attr('stroke','#0080bf88') .attr('stroke-width','0.8px') orthoBack.append('path') .attr('d',orthoBackPath(outline)) .attr('fill','url(#orthographic-shading)') .attr('stroke','none') orthoBack.append('text').attr('class','ortho-label') .attr('x', 0.1 * mapWidth * hemisphereScale) .attr('y', 0.95 * height * hemisphereScale) .attr('text-anchor', 'end') .text("Opposite Hemisphere") return Object.assign( svg.node(), { update(curDistance) { let simCities = citiesNearDistanceFromCenter(curDistance) distanceCircle.attr('r',d3.min([height/2,curDistance])); orthoFrontDistanceCircle .attr('r', orthoCircle(curDistance).r) //.attr('stroke-dasharray', orthoCircle(curDistance).side == 'back' ? "5" : 'none') .attr('opacity', orthoCircle(curDistance).side == 'front' ? 1 : 0) orthoBackDistanceCircle .attr('r', orthoCircle(curDistance).r) //.attr('stroke-dasharray', orthoCircle(curDistance).side == 'front' ? "5" : 'none') .attr('opacity', orthoCircle(curDistance).side == 'back' ? 1 : 0) citiesG.selectAll('g') .data(simCities) .join('g', ).attr('class','city-label') .attr('transform-origin', mapWidth/2 + ' ' + height/2 ) .attr('transform',d => 'rotate(' + d.angle + ')') .each( function(d) { d3.select(this).selectAll('*').remove() d3.select(this) .append('text') .text(d.name) .attr('x', (d.textInside ? -4 : 4) + mapWidth/2 + d.distance) .attr('y', height/2) .attr('dominant-baseline', "middle") //transform origin wasn't working on ios for text, so I added this directly to rotate, which is working .attr('transform-origin', ((d.textInside ? -4 : 4) + mapWidth/2 + d.distance) + " " + (height/2)) .attr('transform', d.flipText ? "rotate(180 " + ((d.textInside ? -4 : 4) + (mapWidth/2 + d.distance)) + " " + (height/2) +")" : "rotate(0)") .attr('text-anchor', ((d.flipText & !d.textInside) | (!d.flipText & d.textInside)) ? "end" : "start") .attr('fill','#005680') d3.select(this) .append('circle') .attr('r', '2px') .attr('cx', d => mapWidth/2 + d.distance) .attr('cy', height/2) .attr('fill', '#005680') }) } }) }32:[{"id":"81c0f3dfcf159da86302f24e98f3e6ee34285f4de139fc3f9569b38d6a7c9c2dd40648db88149ca2ae12d5044e507f39736239031f841cef8b6976fee04e89f6","href":"https://static.observableusercontent.com/files/81c0f3dfcf159da86302f24e98f3e6ee34285f4de139fc3f9569b38d6a7c9c2dd40648db88149ca2ae12d5044e507f39736239031f841cef8b6976fee04e89f6","name":"worldcities.csv","type":"text/csv","lastModified":1683370798581.553,"size":4734682}] 2f:{"title":"","cells":[{"id":0,"value":"title = {\n const container = d3.create('div')\n container.append('div').html(`

A Map of the World According to Distance from ${[\"Porto\",\"Chicago\"].includes(selectedCity.city) ? `Outlier ${selectedCity.city == \"Chicago\" ? \"2024\" : \"2023\"}` :''}`)\n//
${chicagoButton}${portoButton}
`\n \nconst chicagoButton = container.append('button').attr('class','outlier-city-button').text(\"Chicago, 2024\").on(\"click\", () => mutable outlierCity = ['Chicago','United States']);\nconst portoButton = container.append('button').attr('class','outlier-city-button').text(\"Porto, 2023\").on(\"click\", () => mutable outlierCity = ['Porto','Portugal']);\n \nreturn container.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"viewof distance = {\n reset;\n const startingDistance = (mapWidth* (selectedCity.city == 'Chicago' ? 0.198 : 0.162))\n const element = html`\n
\n
${selectedCity.city}
\n \n
Other Side Of World
\n
\n Slide to see cities at different distances\n`\n element.value = startingDistance\n element.oninput = () => {\n element.value = +d3.select('input#distance-slider').property('value')\n element.dispatchEvent(new Event(\"input\", {bubbles: true}));\n };\n return element;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"viewof reset = Inputs.button('reset')","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"### Center from elsewhere? \nWarning: It can get pretty weird when you pick somewhere that doesn't have ocean on the other side of the globe","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"viewof selectedCity = \n{\n reset;\n const reorderedCities = cities.slice(0,1000).sort((a,b)=>d3.ascending(a.city,b.city))\n return Inputs.select(reorderedCities, {\n label: \"City\", \n format: x => x.city + ', ' + x.country, \n value: reorderedCities.find(t => (t.city == outlierCity[0] & t.country == outlierCity[1] ) )\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"### Update Projection? \nNot many projection-types preserve radial distance, but here are a couple options:","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"viewof projectionType = {\n reset;\n return Inputs.radio(projectionChoices, {value: projectionChoices.find(t => t.name === \"8-point Star\"), label: \"Projection\", format: x => x.name})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"### Notes \nThe cities on the map come from Simply Maps' [World City Database](https://simplemaps.com/data/world-cities). The ${citiesProcessed.length} cities shown include the world's ${nLargestCities} largest metro areas along with the largest metro area in each country that have at least ${minPopSize} people according to this dataset.\n\nThe cities displayed at any given time are the closest cities to the currently distance circle, within each of 25 radial slices of the world, which at least partially prevents overlapping city labels. ","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"map.update(distance)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"### Styles ","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":31,"value":"### Load And Process Geo Data","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"countriesTopo = d3.json(\"https://unpkg.com/world-atlas@2.0.2/countries-50m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"countries = topojson.feature(countriesTopo, countriesTopo.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// from simply maps\ncities = FileAttachment(\"worldcities.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"citiesProcessed = {\n let largestCities = cities.slice().sort((a,b)=> d3.descending(a.population, b.population)).slice(0,nLargestCities)\n let largestCitieByCountry = Array.from(d3.group(cities, d => d.country)).map(d=> d[1][0])\n let uniqueCombinedCities = [... new Set([...largestCities, ...largestCitieByCountry])]\n let processed = uniqueCombinedCities.filter(d=> d.population > minPopSize).map(d => cityDistanceAndRotate(d))\n return processed\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"mapWidth = d3.min([width, 0.75 * window.screen.height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(mapWidth, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"projectionChoices = [\n {name: \"Circular\", projection: d3.geoAzimuthalEquidistant()}, \n {name: \"4-point Star\", projection: d3.geoBerghaus().lobes(4)}, \n {name: \"8-point Star\", projection: d3.geoBerghaus().lobes(8)} \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"projection = projectionType.projection.rotate(rotate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"orthoProjectionFront = d3.geoOrthographic().rotate(rotate).fitSize([mapWidthhemisphereScale,heighthemisphereScale],outline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"orthoProjectionBack = d3.geoOrthographic().rotate([rotate[0], rotate[1]+180, 180]).fitSize([mapWidthhemisphereScale,heighthemisphereScale],outline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"function distanceFromCenter(coords, center = [mapWidth/2, height/2]){\n return Math.sqrt(Math.pow(center[0]-coords[0],2) + Math.pow(center[1]-coords[1],2))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function angleFromCenter(coords, center = [mapWidth/2, height/2]){\n return 180 + Math.atan2(center[1]-coords[1],center[0]-coords[0]) * 180 / Math.PI\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"function cityDistanceAndRotate(city, centerXY = [mapWidth/2, height/2] ) {\n const cityProjected = projection([city.lng, city.lat]);\n const distance = distanceFromCenter(cityProjected, centerXY)\n const angle = angleFromCenter(cityProjected, centerXY)\n const angleZone = 14.4 * Math.floor(angle/14.4) // for 25 zones \n const flipText = angle > 90 & angle < 270\n const textInside = distance > 0.7 * (mapWidth/2)\n return {distance, angle, cityProjected, angleZone, flipText, textInside, name: city.city, country: city.country, coords: [city.lng, city.lat]}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"function citiesNearDistanceFromCenter(distance){\n // filter and sort by distance\n const citiesBySimDistance = \n citiesProcessed.slice().filter(d => d.distance > 0.9* distance & d.distance < 1.1* distance)\n .sort((a,b)=> \n d3.ascending(Math.abs(distance-a.distance),Math.abs(distance-b.distance))\n )\n // return first one from each angle-zone (sorted by distance)\n return Array.from(d3.group(citiesBySimDistance, d => d.angleZone)).map(d=> d[1][0])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"function orthoCircle(curDistance) { \n return {\n r: (mapWidth/2) * hemisphereScale * Math.sin(Math.PI2 curDistance / mapWidth),\n side: curDistance / (mapWidth/2) < 0.5 ? 'front' : 'back'\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"mutable outlierCity = [\"Chicago\", \"United States\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"viewof nLargestCities = Inputs.range([10,450], {value: 450, label: \"Number of World's Largest Cities to Include\"} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof minPopSize = Inputs.range([0,1000000], {value: 150000, step: 10000, label: \"Min. Metro Area Population Size\"} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"rotate = [-selectedCity.lng, -selectedCity.lat] // for Porto: [8.622, -41.1621]","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"hemisphereScale = 0.21","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"### Imports and Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"d3 = require(\"d3@7\", \"d3-geo@3\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}