• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
jhiller

jhiller

dc-hotspot-map

Map tracking Helium Hotspot growth around Washington DC
Public
Like
dc-hotspot-map
Home
Code
6
backend
3
frontend
6
shared
1
CLAUDE.md
README.md
H
index.ts
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
CLAUDE.md
Code
/
CLAUDE.md
Search
…
Viewing readonly version of main branch: v74
View latest version
CLAUDE.md

DC Hotspot Growth Map

Project Overview

A Val Town app that visualizes Helium Mobile hotspot growth in the DC Metro area over time, featuring an interactive Leaflet map with H3 hexagonal clustering and timeline scrubbing.

Tech Stack

  • Platform: Val Town (Deno runtime)
  • Backend: Hono HTTP framework
  • Database: Val Town SQLite
  • Frontend: React + Leaflet.js
  • Clustering: Uber H3 (resolution 8, ~0.74 km² hexagons)
  • Map Tiles: CartoDB dark-matter
  • Styling: Helium-inspired dark theme

Key Files

  • index.ts - Main Hono server with API routes
  • backend/db.ts - SQLite schema and queries
  • backend/heliumApi.ts - Helium Entity API client
  • backend/scraper.ts - Backfill and daily scrape logic
  • frontend/components/App.tsx - Main React component with map, timeline, and clustering
  • frontend/utils/animalHash.ts - Animal name generator (angry-purple-tiger algorithm)
  • frontend/style.css - Helium-inspired dark theme styles

Val Town CLI

  • Push changes: ~/.deno/bin/vt push
  • The app auto-deploys on push

Design Decisions

Animal Names (animalHash.ts)

  • Uses exact angry-purple-tiger algorithm with blueimp-md5
  • Critical: ADJECTIVES array must include duplicate "skinny" at index 85 (after "shallow") to match original library
  • Display names in Title Case (e.g., "Angry Purple Tiger"), not kebab-case

H3 Clustering

  • Resolution 8 provides good balance of detail vs. clustering
  • Hexagons colored by newest hotspot age in cluster
  • Count labels displayed in center of each hexagon

Timeline/Histogram

  • Histogram bars must have gap: 0 to align with slider (gaps accumulate across ~1000 bars)
  • Histogram capped at 10 new hotspots to prevent outliers from flattening visualization
  • Playback at 100ms interval (10 fps)
  • When at end of timeline and user presses play, reset to beginning

Visual Design (Helium-inspired)

  • Dark theme with --bg-primary: #04081b
  • Accent colors: cyan (#4FC3F7), green (#00d97d), purple (#5e25fd)
  • Avoid bold fonts - use font-weight 400-500
  • Hex fill opacity: 0.35 for established (grey), 0.5 for new/recent
  • Hex border opacity: 0.2
  • Map zoom control hidden (zoomControl: false in Leaflet options)

Color Coding (Hotspot Age)

  • Green (#2ecc71): New (< 7 days)
  • Blue (#3498db): Recent (< 30 days)
  • Grey (#a0a0a0): Established (30+ days)

API Endpoints

  • GET /api/hotspots - All active hotspots
  • GET /api/snapshots - Daily snapshot stats
  • GET /api/stats - Current count and latest snapshot
  • POST /api/admin/backfill - Trigger data backfill
  • POST /api/admin/scrape - Trigger daily scrape
  • POST /api/admin/compute-snapshots - Recompute historical snapshots
  • POST /api/admin/clear-and-backfill - Clear DB and re-backfill

DC Metro Bounding Box

const DC_BOUNDS = { minLat: 38.5, maxLat: 39.3, minLong: -77.5, maxLong: -76.7 };
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2026 Val Town, Inc.