It would be nice to better refine the search, so that the city is being picked more accurate on mouse click, and make the globe spin on left click, but I will leave those improvements for another challenge. Draw the citiesĬontext.lineWidth = 0.5 / (transform.k d.ordinates)Ĭonst found = search(projection, tree, mousePos) In order to address this, I have chosen to draw the points using Canvas instead of loading the data as D3.js selections in the DOM. The biggest challenge was to visualize many points on the globe and keep the interaction fast enough at the same time. To improve the user interaction, I have set the map to rotate and center on the selected city. The user can interact with the map by zooming, panning and clicking the cities, however, if you click at a smaller zoom you might not see the city so well.
First, I have explored it in QGIS, then I started mapping it on a globe using D3.js Tags: #D3js #QGIS #mapshaper #canvas #interaction #globe 3D globe map in D3.js and Canvas – making ofĬhallenges: For the 3D globe map in D3.js and Canvas, I have downloaded the countries and cities from Natural Earth, because it was one of the free data sources for the challenge. The bigger the circle, the greater the population.Ĭities with a bigger rank are more brightly coloured. The visualization shows the most populated places on Earth.
You can find out more about the challenge and my other maps in this post.
This is a 3D globe map in D3.js and Canvas, that I have made for the #30DayMapChallenge on Twitter in 2021. Points Populated Places on Earth 🌍 Points
0 kommentar(er)
