31:[] 2f:{"title":"Mapping a 3D Venus with Globe.GL","cells":[{"id":0,"value":"md`# Mapping a 3D Venus with Globe.GL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`#### Interactive Data Visualization Studio ⚡ Observable Prototype #1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"md `In this rapid prototype, I tested using **D3** and the **[Globe.GL](https://github.com/vasturiano/globe.gl)** package to map the etymology and location of **surface features** on the planet Venus. I am embedding the demo below and hosting the code, data, and assets on **[GitHub](https://github.com/koffeeya/venus-surface-features)**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`## Inspiration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`Nearly all of the surface features on Venus — its mountains, valleys, and craters — are named after famous women or female goddesses from around the world.\n\nI learned this tidbit at a talk called **[*Storytelling with Science*](https://tc19.tableau.com/learn/sessions/storytelling-science-communicating-complex-data-using-design-solutions)** given by the information designer Eleanor Lutz. The talk itself was fantastic, and I recommend watching it, but one of the projects that Eleanor shared caught my eye: a beautiful poster called [**The Goddesses of Venus**](http://tabletopwhale.com/2017/03/06/goddesses-of-venus.html).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"html` Poster by Eleanor Lutz mapping the named surface features on Venus

Poster by Eleanor Lutz mapping the named surface features on Venus

Detail from The Goddesses of Venus, by Eleanor Lutz (2017). Source.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"md`The poster mapped Venus in a way I had never seen before — tracing the etymological roots behind the names of its surface features. I was inspired to take this idea further and build a [**data visualization in Tableau**](https://public.tableau.com/views/BeneaththeSurfacePlanetaryNomenclature/Story1?:language=en&:display_count=y&:origin=viz_share_link) to explore the (*overwhelmingly Euro-centric*) origins of surface features on rocky planets in our solar system.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"md `So these names and their stories were on my mind when I came across **[Globe.GL](https://github.com/vasturiano/globe.gl)**, a convenience wrapper for visualizing data on a globe using the **[THREE.js](https://threejs.org/)** 3D graphics library. I felt the limits of mapping in Tableau when I worked on that project, and thought 3D could make exploring names smoother and more fun.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`## Process`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md `Using the Globe.GL package turned out to be pleasantly easy, thanks to its [clear documentation](https://github.com/vasturiano/globe.gl). My focus was on rapid prototyping, so my code is not the prettiest or most efficient, but [here it is](https://github.com/koffeeya/venus-surface-features).\n\n - \\`\\`index.html\\`\\`\n - Contains a header, a dropdown menu, an empty div for the visualization, and a footer. I didn't have a separate stylesheet for so few elements.\n\n - \\`\\`main.js\\`\\`:\n - Load in the data and call \\`\\`draw()\\`\\`.\n - Grab a unique list of surface features from the \"Feature_Type\" column\n - Add an event listener to the dropdown menu, filter the data, and redraw\n - A \\`\\`draw()\\`\\` function that creates a new \\`\\`Globe()\\`\\` object at the empty div. Requires a background image, a surface map image, and the data source.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"md `\n**What I Learned / Tips** \n\n - I liked the effect of loading in the dots at 0% opacity by making use of [8-digit hex codes](https://css-tricks.com/8-digit-hex-codes/). I also made the radius of each dot larger (2.5 pixels) for a more generous \"hitbox\" when hovering.\n - The data source must include columns labeled \\`\\`lat\\`\\` and \\`\\`lng\\`\\` for the Globe.GL package to load in data.\n - Don't assume that the dots are accurately mapped to the planet's surface! I spent a ton of time editing the [original surface map image](https://commons.wikimedia.org/wiki/Category:Magellan_radar_images_of_Venus#/media/File:Cylindrical_Map_of_Venus.jpg) to change the \"seam\" of the globe. Here's the [edited Venus map](https://github.com/koffeeya/venus-surface-features/blob/master/assets/venus-map.jpg) that I cross-checked against official labeled images.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`## Sources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`\n - **Data source:** [Gazetteer of Planetary Nomenclature](https://planetarynames.wr.usgs.gov/)\n - **Definitions:** adapted from [this Wikipedia page](https://en.wikipedia.org/wiki/Planetary_geology) on planetary geology\n - **Background image:** [starfield](https://github.com/insanityfarm/galaxy/blob/master/images/starfield.jpg) by user insanityfarm\n - **Surface map:** a composite radar image captured by the Magellan spacecraft, and hosted on [Wikimedia Commons](https://commons.wikimedia.org/wiki/Category:Magellan_radar_images_of_Venus#/media/File:Cylindrical_Map_of_Venus.jpg). I edited this image to correctly map data points.\n - **Font**: [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans) (Google Fonts)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}