SeeIt

SeeIt is a website prototype that puts global key data into a single readable dashboard.

The project started from the requirement note in the repository root: users should be able to view country indicators, animal ecology, global companies, richest people by country, and global billionaires in one place instead of switching between many sites.

The repository currently contains a runnable demo in the Demo directory. It supports local startup, data switching, search and filtering, table pagination, inline detail expansion, and partial live-data integration.

Goals

• Aggregate global macro and ranking data from different sources
• Present different data tracks with a unified interaction model
• Let users search, filter, sort, compare, and trace sources quickly
• Build a foundation for a fuller production version later

Current Scope

Implemented tracks:

• Country indicators: population, birth rate, GDP, happiness score, intentional homicide rate
• Animal ecology: protection status, estimated total population, trend, protection network, urgency
• Top 100 companies: first 100 companies from Fortune Global 500 2025
• Richest by country: country-level billionaire snapshot samples
• Global billionaires: top 20 billionaire snapshot samples

Implemented capabilities:

• Tab switching
• Search and filtering
• Multi-column sorting for country indicators
• Pagination for any table with more than 10 rows
• Inline row details with click-to-open and click-again-to-close
• Source links and updated-at display
• URL state sync
• Three-layer loading fallback: local API, mock API, bundled data

Repository Structure

SeeIt/
|- requirement note
|- README.md
`- Demo/
   |- index.html
   |- styles.css
   |- app.js
   |- data.js
   |- server.py
   |- mock-api/
   |- scripts/
   |- README.md
   `- ARCHITECTURE.md

Key files:

• Demo/index.html: page structure
• Demo/styles.css: visual style and responsive layout
• Demo/app.js: frontend rendering, filtering, sorting, pagination, interactions
• Demo/data.js: browser-consumable bundled data
• Demo/mock-api/*.json: mock API payloads
• Demo/server.py: local static server and API server
• Demo/scripts/fetch_live_data.py: refreshes live data and snapshot data
• Demo/ARCHITECTURE.md: production-oriented architecture notes

Run Locally

Recommended:

python server.py --port 8000

Then open http://127.0.0.1:8000.

You can also open Demo/index.html directly for a static preview, but the local server mode is closer to the actual runtime path.

Refresh Data

python scripts/fetch_live_data.py

This script will:

• fetch country data from World Bank and World Happiness Report sources
• fetch the first 100 companies from Fortune Global 500 2025
• update animal snapshot data
• update richest-by-country and global billionaire snapshot data
• regenerate mock-api/*.json
• regenerate data.js

Current Data Size

At the current repository state:

• countries: 211
• animals: 10
• companies: 100
• countryRichest: 18
• billionaires: 20

Notes:

• Country data is mostly structured live data
• Animal data is currently curated from real public sources
• Company data covers the first 100 entries of Fortune Global 500 2025
• Wealth tracks currently use recent public snapshot lists rather than minute-level live APIs

Data Loading Strategy

The page loads data in this order:

1. /api/*
2. mock-api/*.json
3. data.js

This allows the project to work both as a directly opened static demo and as a locally served near-production demo.

Known Limitations

• Some external ranking pages are structurally unstable, so wealth data currently uses snapshot logic
• The animal track is still relatively small and can be expanded further
• Some UI copy is currently mixed Chinese and English, or English only, to avoid encoding corruption in the current environment
• Demo/scripts/__pycache__ may contain local compile artifacts and does not affect functionality

Recommended Next Steps

1. Expand the animal track to 20+ real species
2. Normalize and localize the wealth-track display layer further
3. Upgrade the current static frontend into a component-based app
4. Split data collection, cleaning, caching, and API serving into a formal backend
5. Add time-series and historical comparison views

Related Documents

• Demo/README.md
• Demo/ARCHITECTURE.md
• the requirement note in the repository root