Beautiful F1 is a data storytelling project focused on automated visualizations using Formula 1 data.
The goal is to explore open F1 data sources (APIs, public datasets, etc.) and generate dynamic, narrative-driven visualizations using platforms like Flourish, D3.js, and other tools.
- Collect and automate F1 race data (points, standings, sprints, images, etc.)
- Create clean, dynamic visualizations based on real-time or historical performance
- Focus on clear visual storytelling powered by reproducible Python scripts
- Allow quick and scalable reuse of data for presentations, articles, or experiments
Each folder in this repository corresponds to an independent and self-contained visualization project.
beautifulF1/
│
├── race_chart_builder/ # Animated race chart builder using Flourish
├── season_summary_heatmap/ # Heatmap of points per GP (Flourish + D3.js)
├── wdc_projection_repo/ # Championship projection scenarios (D3.js)
└── docs/ # GitHub Pages public visualisations & gallery
This folder contains a Python program that:
✅ Automatically retrieves Formula 1 race results (including sprints) using APIs
✅ Aggregates drivers' points over time
✅ Generates a CSV file compatible with Flourish for animated race charts
✅ Also produces a JSON file with the same data structure
- jolpi.ca — Mirror of the historical Ergast API (includes sprints and circuits)
- openf1.org — Real-time open-source F1 API (used for driver images)
- fastf1.dev — Python package for accessing and analyzing F1 results, schedules, timing data, and telemetry
You can view the animated race chart here: Race Chart Viz
✅ Retrieves full-season driver results (points, positions, grid, etc.) for any year — even ongoing seasons
✅ Aggregates and ranks drivers by total points
✅ Enriches each row with team name, grid position, finishing position, driver photo, and more
✅ Generates a CSV for Flourish heatmap templates and a standalone D3.js heatmap version
✅ Fully automated enrichment (no manual intervention)
- Flourish version: Season Summary Heatmap (Flourish)
- D3.js standalone version: Live Demo
Interactive D3.js projection of the championship title race.
- Scenario sliders (leader performance %, driver performance %)
- Dynamic filtering by risk zone
- Built with Observable Plot and D3.js
Live version: WDC Projection 2025
From August 2025, all public-facing visualisations are directly accessible via the /docs folder and GitHub Pages.
-
Public Gallery: https://hericlibong.github.io/beautifullF1/
-
Each visualisation has:
- Its own folder in
/docs/{viz_name}/ index.html,style.css,script.js, and associated CSV- A live link for embedding anywhere (iframe-ready)
- Its own folder in
Benefits:
- No duplication between development and public deployment
- All visualisations share a unified dark-themed gallery homepage
- Any update pushed to
/docsis instantly reflected on GitHub Pages
Clone the repository and install the required dependencies:
git clone https://github.com/hericlibong/beautifullF1.git
cd beautifullF1
pip install -r requirements.txtRun any module:
cd season_summary_heatmap
python main.py- CSV files for Flourish or direct integration in D3.js
- JSON files for programmatic reuse
- Live GitHub Pages versions for embedding
- Pytest for unit testing
- pytest-cov for coverage
- Ruff for linting
- Black for formatting
- Automated CI on each push (tests + lint + formatting checks)
Open-source under MIT License.
Data from third-party APIs remains the property of their providers.
Made by Heric Libong — developer and journalist passionate about visual storytelling and Formula 1.