Data Storytelling with Vox-Style Charts
Vox video essays are famous for their clean, compelling data visualizations. They turn boring spreadsheets into stories.
Today, we’re releasing a new set of Astro components inspired by that style. We’ll cover Line Charts, Stacked Bar Charts, and Pie Charts, all with built-in “draw” animations that trigger when you scroll.
The “Vox” Aesthetic
What makes a chart look like it belongs in a Vox video?
- Direct Labeling: Instead of a messy legend, labels are placed right next to the data.
- Clean Typography: Simple, bold sans-serif fonts (like Franklin Gothic).
- Story-First: Highlighting the important trend, not just showing all data equally.
- Motion: Lines draw themselves, bars grow from nothing.
1. The Container
First, we need a consistent wrapper for titles and sources.
<VoxContainer
title="The Rise of Remote Work"
subtitle="Percentage of employees working from home, 2019-2023"
source="Bureau of Labor Statistics"
>
...Chart Goes Here...
</VoxContainer>2. Line Charts
The VoxLineChart component handles multiple series, auto-draw animations, and direct labels.
Example: Tech Growth
Notice how the lines “draw” themselves when you scroll down.
Tech Giants Market Cap
Growth in Trillions of USD
3. Stacked Bar Charts
Perfect for showing parts of a whole changing over time. We support both vertical and horizontal orientations.
Vertical Stack
Browser Market Share
Global usage across platforms
Horizontal Bar (Comparison)
Simple comparison charts work great horizontally.
Most Popular Programming Languages
Based on Stack Overflow Survey 2023
4. Pie Charts
Use these sparingly, but when you do, make them count with clean legends and smooth entry animations.
Project Time Allocation
Where do we actually spend our time?
5. Dark Mode Support
All components automatically adapt to dark mode, switching axes and text colors to be legible against dark backgrounds, just like Vox’s “Dark Room” style graphics.
Dark Mode Example
This container forces dark theme for demonstration
Implementation Details
We created a new folder src/components/vox/ to house these specialized components.
The Line Chart uses SVG stroke-dashoffset for that “drawing” effect.
The Bar Chart uses CSS transform: scaleY() for the growing effect.
The Pie Chart calculates SVG paths for arcs and scales them in.
Every component accepts a trigger="visible" prop, which uses IntersectionObserver to wait until the user scrolls the chart into view before starting the animation.
Go ahead, scroll up and down and watch them re-animate (on refresh) or just enjoy the smooth entrance!
