{"id":20080078,"url":"https://github.com/garyo/globe-viz","last_synced_at":"2026-05-29T23:01:23.552Z","repository":{"id":244237377,"uuid":"814658181","full_name":"garyo/globe-viz","owner":"garyo","description":"Visualization of global daily sea surface temperature and anomaly","archived":false,"fork":false,"pushed_at":"2026-05-26T14:12:14.000Z","size":6889,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-26T15:29:48.984Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/garyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-13T12:46:01.000Z","updated_at":"2026-05-26T14:12:26.000Z","dependencies_parsed_at":"2024-06-13T15:31:45.640Z","dependency_job_id":"5cb128f0-5cfb-4c9b-adcd-56e97e84a453","html_url":"https://github.com/garyo/globe-viz","commit_stats":null,"previous_names":["garyo/globe-viz"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/garyo/globe-viz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garyo%2Fglobe-viz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garyo%2Fglobe-viz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garyo%2Fglobe-viz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garyo%2Fglobe-viz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garyo","download_url":"https://codeload.github.com/garyo/globe-viz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garyo%2Fglobe-viz/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33673628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T15:25:58.103Z","updated_at":"2026-05-29T23:01:23.546Z","avatar_url":"https://github.com/garyo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Daily Global Sea Surface Temperature Visualization\n\nVisualization of daily sea surface temperatures across the globe, and sea surface temperature anomaly (above or below the mean for that day)\n\n- [Data Source](https://github.com/garyo/sea-surface-temperature)\n\n## Tech Stack\n\n- **Astro** - Modern web framework with partial hydration\n- **Solid.js** - Fine-grained reactive UI framework\n- **Three.js** - 3D globe rendering\n- **TypeScript** - Type safety\n- **D3.js** - Colormap legends\n\n## Project Structure\n\n```\nsrc/\n├── pages/\n│   └── index.astro          # Main page\n├── components/\n│   ├── TopBar.tsx           # Header with title, date, colormap\n│   ├── GlobeScene.tsx       # Three.js 3D globe component\n│   ├── ControlPanel.tsx     # Settings panel\n│   ├── AppLoader.tsx        # Data loading wrapper\n│   └── controls/            # Reusable UI components\n│       ├── Slider.tsx\n│       ├── Select.tsx\n│       ├── ColorPicker.tsx\n│       └── Toggle.tsx\n├── lib/\n│   ├── scene/               # Three.js scene setup\n│   │   ├── setup.ts         # Renderer, lights, helpers\n│   │   ├── globe.ts         # Globe mesh and materials\n│   │   └── camera.ts        # Camera and controls\n│   ├── data/\n│   │   ├── assets.ts        # S3 data fetching\n│   │   └── colormap.ts      # D3 colormap rendering\n│   └── helpers/\n│       ├── responsiveness.ts\n│       ├── fullscreen.ts\n│       └── animations.ts\n├── stores/\n│   └── appState.ts          # Solid.js global state\n└── styles/\n    └── global.css\n```\n\n## Features\n\n- **Reactive UI** - Solid.js provides fine-grained reactivity for instant updates\n- **Custom Controls** - Modern, accessible control panel replacing lil-gui\n- **Responsive Design** - Mobile-friendly with touch controls\n- **State Management** - Centralized Solid.js store with localStorage persistence\n- **Modular Architecture** - Clean separation of concerns for easy maintenance\n- **Type Safety** - Full TypeScript support throughout\n\n## Development\n\nInstallation\n\n```bash\nbun i\n```\n\nRun dev mode\n\n```bash\nbun run dev\n```\n\nOpen http://localhost:4321 in your browser\n\nBuild\n\n```bash\nbun run build\n```\n\nPreview production build\n\n```bash\nbun run preview\n```\n\n## Regenerating the Open Graph Image\n\nTo rebuild the social-share asset (`public/og-image-20251011.jpg`), run:\n\n```bash\nmagick public/og-src.png -resize '1200x630^' -gravity center -extent 1200x630 -modulate 110,90,100 -gamma 0.9 \\\n  \\( -size 1200x630 gradient:'#0b122060-#13254b60' \\) -gravity center -compose multiply -composite \\\n  \\( -size 1200x420 gradient:'#0b1220d0-#0b122000' \\) -gravity north -compose over -composite \\\n  -font 'Helvetica-Bold' -pointsize 72 -fill '#38bdf8' -gravity north -annotate +0+120 'Global Sea Surface Temperature' \\\n  -font 'Helvetica' -pointsize 36 -fill '#f8fafc' -interline-spacing 10 -gravity center -annotate +0+80 \"Interactive 3D globe using NASA OISST data\\nExplore daily trends and anomaly patterns.\" \\\n  public/og-image-20251011.jpg\n```\n\nCopy the current screenshot to `public/og-src.png` before running the command. Ensure ImageMagick and the `Helvetica` font are available on your system.\n\n## Adding New Controls\n\nTo add a new control (e.g., a slider):\n\n1. Add the state to `src/stores/appState.ts`\n2. Create or use an existing control component from `src/components/controls/`\n3. Add the control to `src/components/ControlPanel.tsx`\n4. React to state changes in `src/components/GlobeScene.tsx` using `createEffect`\n\nExample:\n\n```typescript\n// In appState.ts\nexport interface AppState {\n  myNewSetting: number;\n}\n\n// In ControlPanel.tsx\n\u003cSlider\n  label=\"My Setting\"\n  value={appState.myNewSetting}\n  min={0}\n  max={10}\n  step={0.1}\n  onChange={(value) =\u003e {\n    setAppState('myNewSetting', value);\n    saveState();\n  }}\n/\u003e\n\n// In GlobeScene.tsx\ncreateEffect(() =\u003e {\n  // React to myNewSetting changes\n  console.log('Setting changed:', appState.myNewSetting);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaryo%2Fglobe-viz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaryo%2Fglobe-viz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaryo%2Fglobe-viz/lists"}