visual representation of regional components

[7yl4r]

The idea is to have a graphic with regions, themes, etc with clickable elements.

I think someone's student is working on this. Who was that?

[bbest]

Here are some other icon resources:

• Freepik
• FlatIcon

If we want to do this with infographiqJS, then here are some tips for how to proceed with building the illustration (as an SVG) using either:

• Adobe Illustrator or
• Inkscape

[7yl4r]

After discussion today I made the following mockup:

https://app.diagrams.net/#G106Xkd8Aord1-9LTllVNNtjJwmKxJIva5

[7yl4r]

Concept powerpoint from joana

[7yl4r]

Primary considerations:

1. ease of implementation
2. ease of maintainence
3. visual appeal

Overview of options:

1. 2d custom-graphic : infographiq or similar d3-based
2. 3d globe : something webGL-based
3. 2d map : leaflet

---

Some links:

• github globe build w/ three.js details here
• miniature.earth : paid license details here
  • EU eg
• D3 as demod by rotate the world
  • used to create the pretty nullschool earth view
• deck.gl
  • example showing flights
  • GlobeView Example
• CesiumJS - overkill and possible browser troubles
• WebGL Earth - 3D digital globe for web and mobile devices
• Globe.GL | globe.gl
  • COVID 3d example - pretty country popup onHover
• WebGL Globe
  • tron eg
• x.knit

[7yl4r]

I am still enjoying reading about ocean-centric map projections. Some others from Spilhaus are here; they are much more relatable to us land-dwellers. In particular "Shoreline Map XXI" might be a good compromise:

Another fun idea would be a cartogram scaled based on the number of MBON nodes.

[bbest]

Hey @7yl4r,

Check out this cool interactive globe Brian at Axiom implemented for Sanctuaries and Sound Data Portal:

https://sanctsound.portal.axds.co

• hover over Channel Islands
  
• hover over Florida Keys
  

[bbest]

@7yl4r found the above example:

• controls globe with this custom JS: https://sanctsound.portal.axds.co/app/views/pages/sanctsound/header/data_access.js?v=2022.02.24.23.05
• is based off Chrome Experiment from Google's Data Arts group:
  dataarts/webgl-globe: WebGL Globe is a platform for visualizing latitude longitude based information using WebGL

[7yl4r]

revisiting the best of the options in more detail:

tech	pros	cons	path forward
miniature earth	3d, seems to have everything we want	costs $100. difficulty of integration unclear	purchase & build off of the world news demo
three.js	3d, FOSS	difficulty of custom coding needed is unclear	start from miniature.earth inspiration linked above
webgl globe	3d, FOSS	difficulty of custom coding needed is unclear	start from sanctsound example inspiration
arcgis js	3d, awesome demo & docs	costs? licensing?	start from this example
infographiq.js	existing knowledge, FOSS, marinebon-supported	2d	make an .svg file & .md files for each site based on this demo