script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let geojson let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 300 let geoGenerator d3 geoPath projection projection pointRadius 4 context context let yaw 300 function update projection rotate yaw 45 context clearRect 0 0 800 600 context lineWidth 0 5 context strokeStyle 333 context beginPath geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke yaw 0 2 REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json geojson json window setInterval update 100 script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 content info height 20px content map path fill aaa stroke fff content bounding box rect fill none stroke 333 stroke dasharray 2 1 content centroid display none content centroid circle fill red style div id content div class info Hover over a country div svg width 620px height 600px g class map g g class bounding box rect rect g g class centroid circle r 4 circle g svg div script let projection d3 geoMercator scale 400 translate 200 280 center 0 5 let geoGenerator d3 geoPath projection projection function handleMouseover e d let pixelArea geoGenerator area d let bounds geoGenerator bounds d let centroid geoGenerator centroid d let measure geoGenerator measure d d3 select content info text d properties name path area pixelArea toFixed 1 path measure measure toFixed 1 d3 select content bounding box rect attr x bounds 0 0 attr y bounds 0 1 attr width bounds 1 0 bounds 0 0 attr height bounds 1 1 bounds 0 1 d3 select content centroid style display inline attr transform translate centroid function update geojson let u d3 select content g map selectAll path data geojson features u enter append path attr d geoGenerator on mouseover handleMouseover REQUEST DATA d3 json https assets codepen io 2814973 africa json then function json update json script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 500 rotate 30 45 let geoGenerator d3 geoPath projection projection context context function update geojson context lineWidth 0 5 context strokeStyle 333 context beginPath geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke London New York context beginPath context strokeStyle red geoGenerator type Feature geometry type LineString coordinates 0 1278 51 5074 74 0059 40 7128 context stroke Circle let circle d3 geoCircle center 0 1278 51 5074 radius 5 context beginPath context strokeStyle red geoGenerator circle context stroke REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json update json script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let geojson let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 300 rotate 30 45 let geoGenerator d3 geoPath projection projection context context let state clickedLocation null function handleClick e let pos d3 pointer e this state clickedLocation projection invert pos update function initialise d3 select canvas on click handleClick function update context clearRect 0 0 800 400 geojson features forEach function d context beginPath context fillStyle state clickedLocation d3 geoContains d state clickedLocation red aaa geoGenerator d context fill REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json geojson json initialise update script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let geojson let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 500 rotate 30 45 let geoGenerator d3 geoPath projection projection pointRadius 4 context context let londonLonLat 0 1278 51 5074 let newYorkLonLat 74 0059 40 7128 let geoInterpolator d3 geoInterpolate londonLonLat newYorkLonLat let u 0 function update context clearRect 0 0 800 600 context lineWidth 0 5 context strokeStyle 333 context beginPath geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke London New York context beginPath context strokeStyle red geoGenerator type Feature geometry type LineString coordinates londonLonLat newYorkLonLat context stroke Point context beginPath context fillStyle red geoGenerator type Feature geometry type Point coordinates geoInterpolator u context fill u 0 01 if u 1 u 0 REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json geojson json window setInterval update 50 script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 12px color 333 margin 10px menu position absolute top 20px left 30px menu item margin bottom 12px menu item input width 100px menu select margin top 4px menu item value font weight bold menu item span menu item input vertical align middle menu item low display inline block width 30px text align right svg border 1px solid eee map path fill 87B687 stroke 777 projection center fill red graticule path fill none stroke eee circles path fill none stroke aaa style div id menu div class projection type item div select name type value 150 select div div div class slider item div class label scale span class value 120 span div div span class low 0 span input type range name scale min 0 max 400 value 120 span 400 span div div div class slider item div class label center lon span class value 0 span div div span class low 180 span input type range name centerLon min 180 max 180 value 0 span 180 span div div div class slider item div class label center lat span class value 0 span div div span class low 90 span input type range name centerLat min 90 max 90 value 0 span 90 span div div div class slider item div class label translate x span class value 480 span div div span class low 0 span input type range name translateX min 0 max 960 value 480 span 960 span div div div class slider item div class label translate y span class value 250 span div div span class low 0 span input type range name translateY min 0 max 500 value 250 span 500 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateLambda min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotatePhi min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateGamma min 180 max 180 value 0 span 180 span div div div svg width 900px height 500px g class graticule path path g g class circles g g class map g circle class projection center r 4 circle svg script let geojson let projectionTypes AzimuthalEqualArea AzimuthalEquidistant Gnomonic Orthographic Stereographic Albers ConicConformal ConicEqualArea ConicEquidistant Equirectangular Mercator TransverseMercator let projection let geoGenerator d3 geoPath projection projection let graticule d3 geoGraticule let circles 135 0 90 0 45 0 0 0 45 0 90 0 135 0 180 0 0 70 0 35 0 35 0 70 180 70 180 35 180 35 180 70 let geoCircle d3 geoCircle radius 10 precision 1 let state type AzimuthalEqualArea scale 120 translateX 450 translateY 250 centerLon 0 centerLat 0 rotateLambda 0 1 rotatePhi 0 rotateGamma 0 function initMenu d3 select menu selectAll slider item input on input function d let attr d3 select this attr name state attr this value d3 select this parentNode parentNode select value text this value update d3 select menu projection type select on change function d state type this options this selectedIndex value update selectAll option data projectionTypes enter append option attr value function d return d text function d return d function update Update projection projection d3 geo state type geoGenerator projection projection projection scale state scale translate state translateX state translateY center state centerLon state centerLat rotate state rotateLambda state rotatePhi state rotateGamma Update world map let u d3 select g map selectAll path data geojson features u enter append path merge u attr d geoGenerator Update projection center let projectedCenter projection state centerLon state centerLat d3 select projection center attr cx projectedCenter 0 attr cy projectedCenter 1 Update graticule d3 select graticule path datum graticule attr d geoGenerator Update circles u d3 select circles selectAll path data circles map function d geoCircle center d return geoCircle u enter append path merge u attr d geoGenerator d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json geojson json initMenu update script
geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke London New York context beginPath context strokeStyle red geoGenerator type Feature geometry type LineString coordinates londonLonLat newYorkLonLat context stroke Point context beginPath context fillStyle red geoGenerator type Feature geometry type Point coordinates geoInterpolator u context fill u 0 01 if u 1 u 0 REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json geojson json window setInterval update 50 script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 12px color 333 margin 10px menu position absolute top 20px left 30px menu item margin bottom 12px menu item input width 100px menu select margin top 4px menu item value font weight bold menu item span menu item input vertical align middle menu item low display inline block width 30px text align right svg border 1px solid eee map path fill 87B687 stroke 777 projection center fill red graticule path fill none stroke eee circles path fill none stroke aaa style div id menu div class projection type item div select name type value 150 select div div div class slider item div class label scale span class value 120 span div div span class low 0 span input type range name scale min 0 max 400 value 120 span 400 span div div div class slider item div class label center lon span class value 0 span div div span class low 180 span input type range name centerLon min 180 max 180 value 0 span 180 span div div div class slider item div class label center lat span class value 0 span div div span class low 90 span input type range name centerLat min 90 max 90 value 0 span 90 span div div div class slider item div class label translate x span class value 480 span div div span class low 0 span input type range name translateX min 0 max 960 value 480 span 960 span div div div class slider item div class label translate y span class value 250 span div div span class low 0 span input type range name translateY min 0 max 500 value 250 span 500 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateLambda min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotatePhi min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateGamma min 180 max 180 value 0 span 180 span div div div svg width 900px height 500px g class graticule path path g g class circles g g class map g circle class projection center r 4 circle svg script let geojson let projectionTypes AzimuthalEqualArea AzimuthalEquidistant Gnomonic Orthographic Stereographic Albers ConicConformal ConicEqualArea ConicEquidistant Equirectangular Mercator TransverseMercator let projection let geoGenerator d3 geoPath projection projection let graticule d3 geoGraticule let circles 135 0 90 0 45 0 0 0 45 0 90 0 135 0 180 0 0 70 0 35 0 35 0 70 180 70 180 35 180 35 180 70 let geoCircle d3 geoCircle radius 10 precision 1 let state type AzimuthalEqualArea scale 120 translateX 450 translateY 250 centerLon 0 centerLat 0 rotateLambda 0 1 rotatePhi 0 rotateGamma 0 function initMenu d3 select menu selectAll slider item input on input function d let attr d3 select this attr name state attr this value d3 select this parentNode parentNode select value text this value update d3 select menu projection type select on change function d state type this options this selectedIndex value update selectAll option data projectionTypes enter append option attr value function d return d text function d return d function update Update projection projection d3 geo state type geoGenerator projection projection projection scale state scale translate state translateX state translateY center state centerLon state centerLat rotate state rotateLambda state rotatePhi state rotateGamma Update world map let u d3 select g map selectAll path data geojson features u enter append path merge u attr d geoGenerator Update projection center let projectedCenter projection state centerLon state centerLat d3 select projection center attr cx projectedCenter 0 attr cy projectedCenter 1 Update graticule d3 select graticule path datum graticule attr d geoGenerator Update circles u d3 select circles selectAll path data circles map function d geoCircle center d return geoCircle u enter append path merge u attr d geoGenerator d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne_110m_land json then function json geojson json initMenu update script