PULSE — Public Health Analytics Platform

Overview

PULSE is a real-time public health analytics platform built with React, featuring 5 core modules and 5 live API data sources. It provides comprehensive visualization of COVID-19 trends, FDA adverse events, and CDC wastewater surveillance data.

✨ Key Features

🏥 5 Core Modules

Module	Focus	Data Sources	Visualizations
01 — Dashboard	Overview	disease.sh, OpenFDA, CDC NWSS	KPIs, area chart, bar chart, heatmap
02 — Pipelines	ETL Simulation	All sources	Status cards, latency metrics, Python code
03 — COVID-19	Country Data	disease.sh	Sortable table, flag icons, export
04 — FDA Events	Adverse Events	OpenFDA	Line chart, raw records table
05 — Wastewater	CDC NWSS	data.cdc.gov	Scrollable bar chart, jurisdiction table

📊 5 Live API Sources

Source	Endpoint	Data	Update
disease.sh (Global)	`/v3/covid-19/all`	Global cumulative stats	Real-time
disease.sh (Historical)	`/v3/covid-19/historical/all`	Daily cases/deaths timeline	Real-time
disease.sh (Countries)	`/v3/covid-19/countries`	200+ country-level data	Real-time
disease.sh (Continents)	`/v3/covid-19/continents`	7 continent aggregates	Real-time
OpenFDA	`/drug/event.json?count=receivedate`	24-month adverse events	Daily
CDC NWSS	`/resource/2ew6-ywp6.json`	Wastewater surveillance	Weekly

📈 Module 01: Dashboard

Real-Time KPIs 📊

KPI	Source	Format	Color
Total Cases	disease.sh	Global cumulative	🔴`#ff4d6a`
Total Deaths	disease.sh	Global cumulative	🟡`#f5a623`
Recovered	disease.sh	Global cumulative	🟢`#00e5a0`
Active Cases	disease.sh	Global cumulative	🔵`#00d4ff`
FDA Events	OpenFDA	24-month total	🟣`#a78bfa`
WW Detect Rate	CDC NWSS	Avg detection %	🟢`#00e5a0`

COVID-19 Global Trend 📉

Area chart with gradient fill for cases (red) and deaths (amber)
Date range selector: 30D, 90D, 6M, 1Y, 2Y, All Time
Smart X-axis shows year labels only when year changes
Cumulative totals with formatted numbers (e.g., 700M, 6.9M)

Cases by Continent 🌍

Horizontal bar chart for 7 continents
Responsive layout with compact continent labels
Color-coded with platform accent

Influenza Heatmap 🗺️

Live updating 10×5 grid (1,600ms interval)
6 intensity levels: Minimal → Low → Moderate → High → Very High → Widespread
Gradient cells from 7% to 100% opacity
Interactive legend with intensity labels

Wastewater Detection 💧

Top 12 jurisdictions by detection percentage
Horizontal bar chart with green gradient
Real CDC data from National Wastewater Surveillance System

🔄 Module 02: Pipelines — ETL Simulation

6 Data Pipelines 🔧

Pipeline	Source	Status Indicator	Metrics
COVID Global Stats	disease.sh	🟢 Healthy / 🔴 Error	Records, Latency, Last Run
COVID Historical	disease.sh	🟢 Healthy / 🔴 Error	Records, Latency, Last Run
COVID by Country	disease.sh	🟢 Healthy / 🔴 Error	Records, Latency, Last Run
COVID by Continent	disease.sh	🟢 Healthy / 🔴 Error	Records, Latency, Last Run
FDA Adverse Events	OpenFDA	🟢 Healthy / 🔴 Error	Records, Latency, Last Run
CDC Wastewater	data.cdc.gov	🟢 Healthy / 🔴 Error	Records, Latency, Last Run

Pipeline Status Cards 🃏

Color-coded status dots:
- 🟢 Healthy (success)
- 🔴 Error
- 🔵 Running/Fetching (pulsing)
- ⚪ Idle
Progress bar for visual status (100% success, 55% fetching)
4 metrics per card:
- Records count (formatted)
- Latency in milliseconds
- Last run timestamp
- Error message (if any)

Python ETL Code Viewer 🐍

Syntax-highlighted Python code for each pipeline
Color coding:
- 🔵 Keywords (def, class, import) — blue
- 🟢 Strings — green
- 🟣 Decorators (@app.task) — purple
- ⚪ Comments — muted gray
Real ETL examples with:
- Pydantic models
- Async HTTP clients
- Airflow DAGs
- Kafka producers
- PostgreSQL/PostGIS loading

Sample ETL Code 📝

# COVID Historical ETL → Timeseries table (Airflow DAG)
import httpx, pandas as pd
from airflow.decorators import dag, task
import pendulum

@dag(schedule="@daily", start_date=pendulum.datetime(2024,1,1), catchup=False)
def covid_historical_etl():
    @task()
    def extract() -> dict:
        r = httpx.get(
            "https://disease.sh/v3/covid-19/historical/all?lastdays=all",
            timeout=30)
        r.raise_for_status()
        return r.json()
  
    @task()
    def transform(raw: dict) -> list[dict]:
        df = pd.DataFrame({
            "date":   pd.to_datetime(list(raw["cases"].keys())),
            "cases":  list(raw["cases"].values()),
            "deaths": list(raw["deaths"].values()),
        })
        df["delta_cases"]  = df["cases"].diff().fillna(0).astype(int)
        df["delta_deaths"] = df["deaths"].diff().fillna(0).astype(int)
        return df.to_dict(orient="records")
  
    @task()
    def load(records: list[dict]):
        import psycopg2, io
        conn = psycopg2.connect(dsn="postgresql://ph_user@pg-main/surveillance")
        # ... PostgreSQL COPY command

🦠 Module 03: COVID-19 Country Data

200+ Countries 🌐

Sortable columns by any metric (click column header)
Flag icons from disease.sh API
Live search (coming soon)
Export capabilities: CSV, JSON

Data Columns 📋

Column	Format	Color	Sortable
Country	Text with flag icon	White	✅
Cases	Formatted number	🔴 Red	✅
Deaths	Formatted number	🟡 Amber	✅
Active	Formatted number	🔵 Blue	✅
Critical	Formatted number	🟣 Purple	✅
Cases/1M	Formatted number	White	✅
Population	Formatted (K/M/B)	White	✅

Export Options 📦

CSV download with proper escaping
JSON download with formatted data
Headers included in both formats

💊 Module 04: FDA Adverse Events

24-Month Timeline 📈

Line chart with purple accent
Data points for each month
Tooltip with full date and count

Raw Records Table 📋

Date (MM/DD format)
Full Date (YYYYMMDD)
Event Count (formatted)

Export Options 📦

CSV download of transformed data
JSON download of raw API response
One-click refresh button

💧 Module 05: Wastewater Surveillance (CDC NWSS)

Split Layout 📊

Left panel: Scrollable horizontal bar chart
Right panel: Scrollable jurisdiction table
Both panels independent scrolling

Detection Rate Chart 📈

Horizontal bar chart with green accent
All jurisdictions displayed (height adapts to data)
Percentage labels with color coding:
- 🔴 >50% detection
- 🟡 25–50% detection
- 🟢 <25% detection

Jurisdiction Table 📋

Rank (#) column
Jurisdiction name (bold, white)
Sites count
Detection % with color coding
Hover highlighting on rows

Export Options 📦

CSV download of transformed data
JSON download of raw CDC data

📂 Module 06: Datasets Hub

Built-in Datasets 📊

Dataset	Source	Tag Color
COVID by Country	disease.sh · LIVE	🔵`#00d4ff`
FDA Adverse Events	OpenFDA · LIVE	🟣`#a78bfa`
CDC Wastewater	CDC NWSS · LIVE	🟢`#00e5a0`

Import Capabilities ⬆️

Drag & drop CSV/JSON files
Multiple file selection
Error handling with toast notifications
Automatic parsing of CSV headers
Imported datasets appear as new tabs

Export Options ⬇️

CSV download with proper escaping
JSON download with pretty formatting
Remove imported datasets

Data Table Features 📋

Column headers sticky at top
Alternating row colors for readability
Hover highlighting
Column count and row count display
Tag showing data source

📝 Module 07: Logs & Monitoring

Live Log Stream 📡

Real-time updates as API calls occur
500 most recent logs retained
Auto-scroll toggle option

Log Filters 🔍

Level filter: ALL, FETCH, INFO, WARN, ERROR, DEBUG
Search filter: by message or service name
Result count showing filtered/total

Log Format 📋

Column	Width	Color
Timestamp	72px	Muted gray
Level	50px	Color-coded
Service	130px	Cyan
Message	1fr	Level-specific

Log Level Colors 🎨

Level	Color	Hex
FETCH	🔵 Cyan	`#00d4ff`
INFO	🟢 Green	`#00e5a0`
WARN	🟡 Amber	`#f5a623`
ERROR	🔴 Red	`#ff4d6a`
DEBUG	🟣 Purple	`#a78bfa`

Export Options 📦

CSV export with all log fields
TXT export as plain text
JSON export with full structure
Clear logs button

🎨 Design & Aesthetics

Modern Health Analytics Platform 🏥

Dark background (#07090f) — easy on the eyes for extended monitoring
Cyan accent (#00d4ff) for primary actions and data
Green (#00e5a0) for success and wastewater data
Amber (#f5a623) for deaths and warnings
Red (#ff4d6a) for cases and errors
Purple (#a78bfa) for FDA data
IBM Plex fonts for clean, professional typography

Typography ✍️

IBM Plex Mono — Code blocks, metrics, table data, logs
IBM Plex Sans — Body text, labels, headers

Visual Elements 🖼️

Gradient KPI cards with top accent bars
Area charts with gradient fills
Animated heatmap with pulsing cells
Status dots with animations
Progress bars for pipeline status
Toast notifications for user feedback

Color Coding 🎨

Element	Color	Hex	Usage
Cases	Red	`#ff4d6a`	COVID case counts
Deaths	Amber	`#f5a623`	COVID death counts
Recovered	Green	`#00e5a0`	Recovery counts
Active	Cyan	`#00d4ff`	Active cases
FDA	Purple	`#a78bfa`	Adverse events
Wastewater	Green	`#00e5a0`	Detection rates
Healthy	Green	`#00e5a0`	Pipeline success
Error	Red	`#ff4d6a`	Pipeline errors
Running	Cyan	`#00d4ff`	Active fetches

🛠️ Technical Implementation

Tech Stack 🥞

React 18 — UI components and state management
Recharts — Data visualization library
Custom Hooks — useState, useEffect, useRef, useCallback, useMemo
CSS-in-JS — Styled with inline styles and theme object

Architecture

┌─────────────────────────────────────┐
│        PULSE Platform                │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Data Sources Layer        │   │
│  │   • disease.sh (4 endpoints) │   │
│  │   • OpenFDA (1 endpoint)    │   │
│  │   • data.cdc.gov (1)        │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Transformation Layer      │   │
│  │   • transformFDA()          │   │
│  │   • transformWastewater()   │   │
│  │   • sliceHistorical()       │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   State Management          │   │
│  │   • data state (6 sources)  │   │
│  │   • loading state (6 flags) │   │
│  │   • pipeline status         │   │
│  │   • logs (500 entries)      │   │
│  │   • imported datasets       │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   UI Components             │   │
│  │   • 7 tab views            │   │
│  │   • Recharts visualizations│   │
│  │   • Export utilities       │   │
│  │   • Drag & drop import     │   │
│  │   • Log viewer with filters│   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

Key Functions

// Data Fetching
fetchOne(key)                    // Fetch single API source
fetchAll()                        // Fetch all sources with Promise.all

// Transformations
transformFDA(raw)                 // Convert FDA API to chart format
transformWastewater(raw)           // Aggregate CDC data by state
sliceHistorical(hist, days)        // Slice time series by range

// Export Utilities
toCSV(rows)                        // Convert array to CSV string
exportCSV(rows, name)               // Trigger CSV download
exportJSON(rows, name)              // Trigger JSON download
exportLogs(logs, fmt)               // Export logs as CSV/TXT/JSON

// Import
parseCSVText(text)                  // Parse CSV to array of objects
handleFiles(files)                  // Handle drag & drop file upload

// UI Components
Dot({ s, size })                    // Status dot with animation
Tag({ c, children })                 // Color-coded tag
MiniBar({ v, max, c })               // Progress bar
Btn({ children, c, onClick })        // Themed button
Select({ value, onChange, options }) // Themed select
Spin()                               // Loading spinner
Spinner()                            // Full loading spinner

📊 Data Transformations

FDA Adverse Events 💊

const transformFDA = raw => (raw.results ?? []).map(r => ({
  date:     `${String(r.time).slice(4,6)}/${String(r.time).slice(6,8)}`,
  fullDate: String(r.time ?? ""),
  events:   r.count ?? 0,
}));

CDC Wastewater 💧

const transformWastewater = raw => {
  const byState = {};
  (raw ?? []).forEach(r => {
    const state = r.wwtp_jurisdiction ?? r.state_name ?? "Unknown";
    if (!byState[state]) byState[state] = { state, sites:0, detections:0, total:0 };
    byState[state].sites++;
    const p = parseFloat(r.detect_prop_15d ?? 0);
    byState[state].detections += isNaN(p) ? 0 : p;
    byState[state].total++;
  });
  return Object.values(byState)
    .map(s => ({ ...s, detectPct: s.total > 0 ? +(s.detections / s.total * 100).toFixed(1) : 0 }))
    .sort((a, b) => b.detectPct - a.detectPct);
};

COVID Historical Range 📈

const sliceHistorical = (hist, days) => {
  if (!hist?.cases) return [];
  const allEntries = Object.entries(hist.cases);
  const subset = days ? allEntries.slice(-days) : allEntries;
  const step = Math.max(1, Math.floor(subset.length / 60));
  return subset.filter((_, i) => i % step === 0).map(([date, cases]) => ({
    date,
    cases,
    deaths: hist.deaths?.[date] ?? 0,
  }));
};

🎥 Video Demo Script (60-75 seconds)

Time	Module	Scene	Action
0:00	Header	Logo	Show "PULSE" with cyan accent and status
0:05	Dashboard	KPIs	Global: 700M cases, 6.9M deaths, 670M recovered
0:10	Dashboard	COVID Trend	90-day area chart with cases/deaths
0:15	Dashboard	Continent Chart	Horizontal bars: Europe 250M, Asia 150M
0:20	Dashboard	Heatmap	Live-updating influenza grid (10×5)
0:25	Pipelines	Status Cards	5/6 healthy, 1 fetching — expand card
0:30	Pipelines	Python Code	Show FDA ETL with syntax highlighting
0:35	COVID-19	Country Table	Sort by cases → USA 103M, India 45M
0:40	COVID-19	Export	Click CSV → download triggers
0:45	FDA Events	Chart	24-month line chart with tooltip
0:50	Wastewater	Split View	Scrollable bar chart + jurisdiction table
0:55	Datasets	Import	Drag & drop CSV → new tab appears
1:00	Logs	Live Stream	FETCH → INFO → ERROR logs in real-time
1:05	Refresh	Countdown	Auto-refresh in 45 seconds

🚦 Performance

Load Time: < 3 seconds (initial API calls)
Memory Usage: < 80 MB
API Calls: 5 simultaneous on load
Auto-refresh: 60-second countdown

Dependencies 📦

React 18
Recharts 2.x
No CSS frameworks — Pure inline styles

🛡️ Security Notes

PULSE is a client-side only application:

✅ No backend server
✅ All API calls made directly from browser
✅ No data storage or tracking
✅ No authentication required (public APIs)
✅ CORS handled by public endpoints

📝 License

MIT License — see LICENSE file for details.

🙏 Acknowledgments

disease.sh — Open COVID-19 API
OpenFDA — Adverse event data
CDC NWSS — Wastewater surveillance data
Recharts — React charting library
IBM — Plex font family

📧 Contact

GitHub Issues: Create an issue
Website: https://willie-conway.github.io/PULSE/

🏁 Future Enhancements

🏥 PULSE — Public Health Analytics Platform — Monitor Population Health in Real-Time 🏥

Last updated: March 2025

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
.github/workflows		.github/workflows
Screenshots		Screenshots
docs		docs
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
fix-quotes.js		fix-quotes.js
package-lock.json		package-lock.json
package.json		package.json
setup-docs-deploy.sh		setup-docs-deploy.sh
setup-pulse.sh		setup-pulse.sh

Folders and files

Latest commit

History

Repository files navigation

PULSE — Public Health Analytics Platform

Overview

✨ Key Features

🏥 5 Core Modules

📊 5 Live API Sources

📈 Module 01: Dashboard

Real-Time KPIs 📊

COVID-19 Global Trend 📉

Cases by Continent 🌍

Influenza Heatmap 🗺️

Wastewater Detection 💧

🔄 Module 02: Pipelines — ETL Simulation

6 Data Pipelines 🔧

Pipeline Status Cards 🃏

Python ETL Code Viewer 🐍

Sample ETL Code 📝

🦠 Module 03: COVID-19 Country Data

200+ Countries 🌐

Data Columns 📋

Export Options 📦

💊 Module 04: FDA Adverse Events

24-Month Timeline 📈

Raw Records Table 📋

Export Options 📦

💧 Module 05: Wastewater Surveillance (CDC NWSS)

Split Layout 📊

Detection Rate Chart 📈

Jurisdiction Table 📋

Export Options 📦

📂 Module 06: Datasets Hub

Built-in Datasets 📊

Import Capabilities ⬆️

Export Options ⬇️

Data Table Features 📋

📝 Module 07: Logs & Monitoring

Live Log Stream 📡

Log Filters 🔍

Log Format 📋

Log Level Colors 🎨

Export Options 📦

🎨 Design & Aesthetics

Modern Health Analytics Platform 🏥

Typography ✍️

Visual Elements 🖼️

Color Coding 🎨

🛠️ Technical Implementation

Tech Stack 🥞

Architecture

Key Functions

📊 Data Transformations

FDA Adverse Events 💊

CDC Wastewater 💧

COVID Historical Range 📈

🎥 Video Demo Script (60-75 seconds)

🚦 Performance

Dependencies 📦

🛡️ Security Notes

📝 License

🙏 Acknowledgments

📧 Contact

🏁 Future Enhancements

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages