Skip to content

Align source color palette across hero globe and Interactive Explorer #113

@rdhyee

Description

@rdhyee

Problem

The rotating globe on the homepage (assets/isamples_globe.webp) uses a different color palette from the Interactive Explorer and Progressive Globe tutorial. A user sees OpenContext as orange on the landing page, clicks through, and sees OpenContext as red in the explorer.

Palette mismatch

Source Hero WebP (tools/globe_capture.html) Explorer + tutorials
SESAR #2196F3 Material Blue #3366CC Google Blue
OPENCONTEXT #FF9800 Orange #DC3912 Red
GEOME #4CAF50 Material Green #109618 Google Green
SMITHSONIAN #E91E63 Material Pink #FF9900 Orange

Root cause: duplicated palette definitions

The same palette is copy-pasted in four places, with globe_capture.html having drifted:

  • tutorials/progressive_globe.qmd (lines 209-216) — Google Charts Classic
  • tutorials/isamples_explorer.qmd (lines 41-57) — Google Charts Classic
  • tutorials/parquet_cesium_isamples_wide.qmd (~line 100) — Google Charts Classic
  • tools/globe_capture.html (lines 96-101) — Material Design (drift)

Proposed fix

  1. Extract palette to a single shared module (e.g. assets/js/source-palette.js) exporting SOURCE_COLORS and SOURCE_NAMES.
  2. Import from all four consumers.
  3. Re-run tools/capture_globe_rotation.py to regenerate assets/isamples_globe.webp with the canonical palette.

Canonical palette (matches explorer, which is the user-facing interactive view):

  • SESAR: #3366CC
  • OPENCONTEXT: #DC3912
  • GEOME: #109618
  • SMITHSONIAN: #FF9900

Metadata

Metadata

Assignees

No one assigned

    Labels

    infrastructureHosting, CI/CD, domain, CloudflarewireframeAligning site with Hana's Figma wireframe

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions