# Unovis gallery — chart creation prompts

> A modular visualization library for React, Angular, Svelte, Vue, Solid, and vanilla TypeScript.

This file is generated from packages/shared/examples/metadata.json. Edit the metadata and run pnpm --filter @unovis/website sync:gallery-prompts to update it.

- [Documentation](https://unovis.dev/docs/intro)
- [Agent documentation index](https://unovis.dev/llms.txt)
- [Quick start](https://unovis.dev/docs/quick-start)
- [Component reference](https://unovis.dev/docs/components/Line)
- [Gallery](https://unovis.dev/gallery)

Each entry includes a reusable prompt, data context, and links to the implementation and bundled dataset. Replace {framework} with React, Angular, Svelte, Vue, Solid, or vanilla TypeScript. Adapt the data fields to the user's dataset while retaining the encodings and interactions. Historical snapshots and illustrative data are identified in each entry; do not describe them as live observations.

## How long is a bike ride?

New York City · January 2024

A histogram and cumulative distribution reveal the shape and long tail of ride durations.

Gallery: https://unovis.dev/gallery/view?example=bike-trip-distributions
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/bike-trip-distributions

Data notes: Durations are derived from local timestamps. Non-positive durations are excluded. One-minute aggregates preserve all positive rides; the last bucket contains rides of 120 minutes or longer. Cumulative shares use all positive rides.
- [Citi Bike system data](https://citibikenyc.com/system-data)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create linked ride-duration views: a histogram and a cumulative distribution Line. Let users filter Citi Bike rides by membership and ride type, show a shared duration cursor, and display sample counts and duration units. Keep the cumulative proportion denominator consistent with the filtered records and explain the handling of the long tail.

Data context: Durations are derived from local timestamps. Non-positive durations are excluded. One-minute aggregates preserve all positive rides; the last bucket contains rides of 120 minutes or longer. Cumulative shares use all positive rides.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=bike-trip-distributions
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/bike-trip-distributions
Data/source references: Citi Bike system data — https://citibikenyc.com/system-data

## A week on the electricity grid

EIA-930 · 17–23 June 2024 · UTC

Generation mix and demand share one time window, crosshair, and overview brush.

Gallery: https://unovis.dev/gallery/view?example=electricity-grid-dashboard
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/electricity-grid-dashboard

Data notes: Hourly power is shown in GW. Generation and demand differ because of interchange and other balancing quantities; they are not forced to match. Fuel colors stay consistent. Stepped areas show hourly values, including negative net generation; 1px minimum bands keep small series visible.
- [U.S. Energy Information Administration](https://www.eia.gov/electricity/930-content/about.html)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a dashboard with stacked step Areas for hourly generation by fuel, Lines for actual and day-ahead forecast demand, and an overview Brush. Share the time domain and Crosshair across views, use fixed matching plot margins, support grid-area selection, preserve missing values and signed generation, and show GW tooltips mounted in document.body.

Data context: Hourly power is shown in GW. Generation and demand differ because of interchange and other balancing quantities; they are not forced to match. Fuel colors stay consistent. Stepped areas show hourly values, including negative net generation; 1px minimum bands keep small series visible.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=electricity-grid-dashboard
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/electricity-grid-dashboard
Data/source references: U.S. Energy Information Administration — https://www.eia.gov/electricity/930-content/about.html

## The pay gap across occupations

Paired salary comparison · historical snapshot

Connect women's and men's reported yearly pay within each occupation.

Gallery: https://unovis.dev/gallery/view?example=range-plot
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/range-plot

Data notes: The bundled Information is Beautiful snapshot compares reported average salaries by occupation. It is a descriptive comparison, not an estimate adjusted for other factors.
- [Information is Beautiful](https://informationisbeautiful.net/visualizations/gender-pay-gap/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a horizontal dumbbell chart using paired Scatter points joined by Line segments. Map salary to x and occupation to y, color points for women and men, add an occupation axis and salary labels, and show both salaries and their difference on hover.

Data context: The bundled Information is Beautiful snapshot compares reported average salaries by occupation. It is a descriptive comparison, not an estimate adjusted for other factors.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=range-plot
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/range-plot
Data/source references: Information is Beautiful — https://informationisbeautiful.net/visualizations/gender-pay-gap/

## Python release lifecycles

Python 3.7–3.15 · status on 19 October 2026

Compare completed and scheduled support windows for recent Python releases.

Gallery: https://unovis.dev/gallery/view?example=python-release-timeline
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/python-release-timeline

Data notes: Striped segments are scheduled support. Month-only end-of-life dates are placed at the start of that month. Current status and release schedules come from the official guide.
- [Python Developer’s Guide](https://devguide.python.org/versions/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a Timeline of Python releases with release date, bugfix end, security end, and status. Color support phases, stripe scheduled future periods, add a snapshot-date Plotline, and let users filter active or end-of-life releases. Position the date label so it does not overlap completed bars.

Data context: Striped segments are scheduled support. Month-only end-of-life dates are placed at the start of that month. Current status and release schedules come from the official guide.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=python-release-timeline
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/python-release-timeline
Data/source references: Python Developer’s Guide — https://devguide.python.org/versions/

## Three cities, readable without color

Seven-day mean temperatures · 2021

Line markers and dashes identify the same cities in color and monochrome.

Gallery: https://unovis.dev/gallery/view?example=patterned-temperature-lines
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/patterned-temperature-lines

Data notes: Seven-day means of the gallery’s existing daily city-temperature observations; missing values are excluded and the final interval is shorter. Series patterns and legend markers carry the identity when color is removed.
- [NOAA National Centers for Environmental Information](https://www.ncei.noaa.gov/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot seven-day mean temperatures for Austin, New York, and San Francisco with Line patterns using triangles, diamonds, and squares as well as distinct dashes. Provide color and monochrome modes, a matching legend, a shared-date Crosshair tooltip, labeled axes.

Data context: Seven-day means of the gallery’s existing daily city-temperature observations; missing values are excluded and the final interval is shorter. Series patterns and legend markers carry the identity when color is removed.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=patterned-temperature-lines
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/patterned-temperature-lines
Data/source references: NOAA National Centers for Environmental Information — https://www.ncei.noaa.gov/

## A year of temperatures in three cities

Daily temperatures · 2021

Compare seasonal temperature patterns in Austin, New York, and San Francisco.

Gallery: https://unovis.dev/gallery/view?example=multi-line-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/multi-line-chart

Data notes: The bundled NOAA snapshot contains daily temperatures in degrees Celsius, including missing observations.
- [NOAA](https://www.ncei.noaa.gov/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot date, austin, ny, and sf fields as three lines on shared time and Celsius axes. Add a city legend and preserve missing observations rather than inventing values.

Data context: The bundled NOAA snapshot contains daily temperatures in degrees Celsius, including missing observations.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=multi-line-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/multi-line-chart
Data/source references: NOAA — https://www.ncei.noaa.gov/

## What happens when observations are missing?

Cereal production · China and the United States

Switch fallback values to see how missing observations change a line chart.

Gallery: https://unovis.dev/gallery/view?example=data-gap-line-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/data-gap-line-chart

Data notes: The bundled World Bank cereal-production series is expressed in millions of metric tons. Some observations are omitted to demonstrate gaps and fallback behavior.
- [World Bank Open Data](https://data.worldbank.org)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot year, cn, and us cereal-production series as lines. Provide controls for leaving gaps, substituting zero, or substituting 300 million metric tons; add direct country labels and a clearly labeled value axis.

Data context: The bundled World Bank cereal-production series is expressed in millions of metric tons. Some observations are omitted to demonstrate gaps and fallback behavior.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=data-gap-line-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/data-gap-line-chart
Data/source references: World Bank Open Data — https://data.worldbank.org

## Electricity consumption across data gaps

India and Brazil · kWh per person

Compare observed points, interpolation, and fallback values for incomplete time series.

Gallery: https://unovis.dev/gallery/view?example=patchy-line-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/patchy-line-chart

Data notes: The bundled World Bank electricity-consumption snapshot includes deliberate missing values for the gap-handling demonstration.
- [World Bank Open Data](https://data.worldbank.org)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot year, in, and br electricity-consumption data using linear lines, optional scatter markers, and a crosshair tooltip. Add controls for interpolation, marker visibility, and fallback values without treating missing observations as measured zeros.

Data context: The bundled World Bank electricity-consumption snapshot includes deliberate missing values for the gap-handling demonstration.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=patchy-line-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/patchy-line-chart
Data/source references: World Bank Open Data — https://data.worldbank.org

## The lifetimes of retired Google products

Google Graveyard · historical snapshot

Compare how long discontinued apps, hardware, and services remained available.

Gallery: https://unovis.dev/gallery/view?example=basic-timeline
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-timeline

Data notes: Each record supplies a product name, type, start date, end date, and description. This is a historical snapshot, not a current inventory of Google products.
- [Google Graveyard](https://killedbygoogle.com/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw a horizontal Timeline with one labeled row per retired Google product, startDate as the start, and endDate minus startDate as duration. Color by product type, add a legend and date axis, and show product descriptions on hover.

Data context: Each record supplies a product name, type, start date, end date, and description. This is a historical snapshot, not a current inventory of Google products.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-timeline
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-timeline
Data/source references: Google Graveyard — https://killedbygoogle.com/

## The solar cycle, observed and predicted

Solar Cycle 25 · snapshot 19 October 2026

Monthly sunspot observations meet a forecast with a published uncertainty envelope.

Gallery: https://unovis.dev/gallery/view?example=solar-cycle-forecast
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/solar-cycle-forecast

Data notes: The band is NOAA’s middle (50%) prediction range, not a confidence interval fitted by this example. Unavailable -1 values remain missing.
- [NOAA Space Weather Prediction Center](https://www.spaceweather.gov/products/solar-cycle-progression)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Combine monthly sunspot observations with a forecast Line and an Area uncertainty envelope. Keep observations and forecast distinguishable, show a time axis and sunspot-count axis, add a shared Crosshair tooltip, and offer a time-window control and reset.

Data context: The band is NOAA’s middle (50%) prediction range, not a confidence interval fitted by this example. Unavailable -1 values remain missing.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=solar-cycle-forecast
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/solar-cycle-forecast
Data/source references: NOAA Space Weather Prediction Center — https://www.spaceweather.gov/products/solar-cycle-progression

## COVID-19 waves in the U.S. and India

Monthly case counts · historical snapshot

Overlay two translucent areas to compare the timing and scale of reported cases.

Gallery: https://unovis.dev/gallery/view?example=non-stacked-area-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/non-stacked-area-chart

Data notes: The bundled Our World in Data case counts and month labels are a historical example snapshot, not live surveillance data.
- [Our World in Data](https://github.com/owid/covid-19-data)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Overlay two independent Area components for monthly U.S. and Indian case counts. Use translucent fills, shared axes, compact count ticks, and a country legend; do not stack the two series.

Data context: The bundled Our World in Data case counts and month labels are a historical example snapshot, not live surveillance data.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=non-stacked-area-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/non-stacked-area-chart
Data/source references: Our World in Data — https://github.com/owid/covid-19-data

## From vinyl to streaming

U.S. recorded music · revenue by format

Follow the changing mix of vinyl, cassettes, CDs, downloads, and streaming.

Gallery: https://unovis.dev/gallery/view?example=stacked-area-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/stacked-area-chart

Data notes: The bundled RIAA snapshot stores annual revenues in billions of U.S. dollars; each format is a separate numeric field.
- [RIAA](https://www.riaa.com/u-s-sales-database/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a stacked Area chart with year on x and vinyl, cassette, cd, download, and streaming revenue on y. Fill each format with a vertical gradient of its palette color defined through the container's svgDefs. Add direct white labels near each format's peak, a year axis, a revenue axis in USD billions, a bullet legend, and a crosshair with a tooltip listing the formats' revenues for the hovered year.

Data context: The bundled RIAA snapshot stores annual revenues in billions of U.S. dollars; each format is a separate numeric field.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=stacked-area-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/stacked-area-chart
Data/source references: RIAA — https://www.riaa.com/u-s-sales-database/

## Food exports in three economies

World Bank · 1990–2023

Use custom area attributes to emphasize one series in a stacked chart.

Gallery: https://unovis.dev/gallery/view?example=stacked-area-chart-with-attributes
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/stacked-area-chart-with-attributes

Data notes: Each country's value is food exports as a percentage of its own merchandise exports. Stacking demonstrates the component API; the combined height is not a share of a common total.
- [World Bank Open Data](https://data.worldbank.org/indicator/TX.VAL.FOOD.ZS.UN)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Stack the us, in, and cn food-export percentage fields by year with an Area component. Attach custom attributes to area paths to style the first series differently and assign stable test identifiers. Include a country legend and explain that these are separate national percentages.

Data context: Each country's value is food exports as a percentage of its own merchandise exports. Stacking demonstrates the component API; the combined height is not a share of a common total.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=stacked-area-chart-with-attributes
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/stacked-area-chart-with-attributes
Data/source references: World Bank Open Data — https://data.worldbank.org/indicator/TX.VAL.FOOD.ZS.UN

## How MoMA's collection grew

Acquisitions by department · historical snapshot

A centered streamgraph reveals changes in the mix of museum acquisitions.

Gallery: https://unovis.dev/gallery/view?example=baseline-area-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/baseline-area-chart

Data notes: The bundled MoMA collection snapshot counts works acquired each year in six departments. A variable baseline centers the stacked areas.
- [MoMA collection](https://github.com/MuseumofModernArt/collection)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a streamgraph from records with year and a six-value art array. Stack departments with an Area component, center each year's total using a variable baseline, and add department legends and acquisition-count labels.

Data context: The bundled MoMA collection snapshot counts works acquired each year in six departments. A variable baseline centers the stacked areas.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=baseline-area-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/baseline-area-chart
Data/source references: MoMA collection — https://github.com/MuseumofModernArt/collection

## Presidential candidates in hip-hop lyrics

FiveThirtyEight · 2007–2016

Switch candidates to compare positive, neutral, and negative lyrical mentions.

Gallery: https://unovis.dev/gallery/view?example=step-area-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/step-area-chart

Data notes: The bundled FiveThirtyEight dataset, sourced from Genius, contains yearly mention counts for 2016 U.S. presidential candidates.
- [FiveThirtyEight](https://github.com/fivethirtyeight/data/tree/master/hip-hop-candidate-lyrics)
- [Genius](https://genius.com/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a stacked step-after Area chart of annual neutral, negative, and positive mentions. Let the user switch between Hillary Clinton and Donald Trump through a legend; keep a shared vertical domain for comparison.

Data context: The bundled FiveThirtyEight dataset, sourced from Genius, contains yearly mention counts for 2016 U.S. presidential candidates.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=step-area-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/step-area-chart
Data/source references: FiveThirtyEight — https://github.com/fivethirtyeight/data/tree/master/hip-hop-candidate-lyrics, Genius — https://genius.com/

## Which states gain and lose residents?

2024 ACS · 50 states and DC

Arrivals above zero, departures below, and a dot marking the net interstate change.

Gallery: https://unovis.dev/gallery/view?example=state-migration-balance
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/state-migration-balance

Data notes: Interstate arrivals and departures exclude within-state moves, Puerto Rico, and moves from abroad. Negative departures are a plotting convention. Values are survey estimates; this chart does not show margins of error.
- [U.S. Census Bureau](https://www.census.gov/topics/population/migration/guidance/state-to-state-migration-flows.html)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw interstate arrivals above zero and departures below zero with StackedBar, then overlay Scatter dots for net change. Let users view the largest gains, largest losses, or all states. Label states with correctly aligned angled ticks, use compact people counts, and add a legend, tooltips.

Data context: Interstate arrivals and departures exclude within-state moves, Puerto Rico, and moves from abroad. Negative departures are a plotting convention. Values are survey estimates; this chart does not show margins of error.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=state-migration-balance
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/state-migration-balance
Data/source references: U.S. Census Bureau — https://www.census.gov/topics/population/migration/guidance/state-to-state-migration-flows.html

## Tree health across boroughs

TreesCount! · 2015 historical census

Compare the health mix of living street trees with a common 100% denominator.

Gallery: https://unovis.dev/gallery/view?example=tree-health-bars
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/tree-health-bars

Data notes: Each borough sums to 100% of its living trees. Unknown health remains a separate category, and tooltips include both counts and percentages.
- [NYC Parks street-tree census](https://data.cityofnewyork.us/Environment/2015-Street-Tree-Census-Tree-Data/uvpi-gqnh/about_data)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create normalized horizontal StackedBar charts of living NYC street trees by borough and health condition. Offer species filtering, show each borough on a common 0–100% scale, and include health legends, both counts and proportions in tooltips.

Data context: Each borough sums to 100% of its living trees. Unknown health remains a separate category, and tooltips include both counts and percentages.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=tree-health-bars
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/tree-health-bars
Data/source references: NYC Parks street-tree census — https://data.cityofnewyork.us/Environment/2015-Street-Tree-Census-Tree-Data/uvpi-gqnh/about_data

## The U.S. popular vote by party

Presidential elections · 1980–2020

Compare party vote totals side by side across eleven presidential elections.

Gallery: https://unovis.dev/gallery/view?example=basic-grouped-bar
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-grouped-bar

Data notes: The bundled MIT Election Data and Science Lab snapshot groups popular votes into Republican, Democratic, Libertarian, and other parties.
- [MIT Election Data and Science Lab](https://dataverse.harvard.edu/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw grouped bars by election year using republican, democrat, libertarian, and other vote counts. Keep party colors consistent with the legend and format the vertical axis in millions of votes.

Data context: The bundled MIT Election Data and Science Lab snapshot groups popular votes into Republican, Democratic, Libertarian, and other parties.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-grouped-bar
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-grouped-bar
Data/source references: MIT Election Data and Science Lab — https://dataverse.harvard.edu/

## Which degrees do adults hold?

Educational attainment · 2020 snapshot

Compare bachelor's, master's, and doctoral attainment across countries.

Gallery: https://unovis.dev/gallery/view?example=horizontal-stacked-bar-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/horizontal-stacked-bar-chart

Data notes: The World Bank snapshot is converted into non-overlapping highest-degree categories for adults aged 25 and above. The bar total represents those with at least a bachelor's degree.
- [World Bank Open Data](https://data.worldbank.org)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw horizontal stacked bars from country, bachelors, masters, and doctoral percentages. Use non-overlapping highest-degree categories, country row labels, a percent axis, a legend, and a tooltip with category values and the combined total.

Data context: The World Bank snapshot is converted into non-overlapping highest-degree categories for adults aged 25 and above. The bar total represents those with at least a bachelor's degree.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=horizontal-stacked-bar-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/horizontal-stacked-bar-chart
Data/source references: World Bank Open Data — https://data.worldbank.org

## From revenue to net income

Income statement bridge · illustrative figures

See how costs, income, and taxes contribute to the final result.

Gallery: https://unovis.dev/gallery/view?example=waterfall-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/waterfall-chart

Data notes: Figures are illustrative, in millions of dollars. Subtotals and totals start at zero; other bars start at the previous running total.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a waterfall with StackedBar using index, value, and start fields. Float each contribution from its running-total baseline, draw totals from zero, color increases and decreases differently, wrap category labels, and show signed currency tooltips.

Data context: Figures are illustrative, in millions of dollars. Subtotals and totals start at zero; other bars start at the previous running total.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=waterfall-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/waterfall-chart

## Penguin body-mass distributions

Palmer Archipelago · 2007–2009

Every dot is one penguin. Compare individual observations with the distribution summary.

Gallery: https://unovis.dev/gallery/view?example=penguin-distributions
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/penguin-distributions

Data notes: Missing measurements are excluded. Boxes show the median and middle 50%; whiskers use the 1.5 × IQR rule. Horizontal jitter is deterministic.
- [Palmer Penguins](https://github.com/allisonhorst/palmerpenguins)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Combine Boxplot summaries with individual penguin Scatter points grouped by species and sex. Plot body mass in grams, compute medians, quartiles, and whiskers from the supplied observations, add filters, a legend, tooltips, and exclude missing mass values.

Data context: Missing measurements are excluded. Boxes show the median and middle 50%; whiskers use the 1.5 × IQR rule. Horizontal jitter is deterministic.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=penguin-distributions
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/penguin-distributions
Data/source references: Palmer Penguins — https://github.com/allisonhorst/palmerpenguins

## Compare twelve distributions

Boxplot · illustrative summaries

Read medians, quartiles, and whiskers across a dozen groups.

Gallery: https://unovis.dev/gallery/view?example=basic-boxplot
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-boxplot

Data notes: These are illustrative precomputed summaries, not raw observations or measurements from a named population.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw twelve Boxplots from x, median, quartiles, and whiskers fields. Bind the precomputed summary arrays directly and add shared numeric axes without recalculating statistics from nonexistent raw samples.

Data context: These are illustrative precomputed summaries, not raw observations or measurements from a named population.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-boxplot
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-boxplot

## Penguin beaks and flippers

Palmer Archipelago · individual measurements

Compare beak length and flipper length, colored by recorded sex.

Gallery: https://unovis.dev/gallery/view?example=basic-scatter-plot
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-scatter-plot

Data notes: The bundled Palmer penguins data contains individual measurements in millimeters; missing sex is shown as a separate legend category.
- [K.Gorman, LTER Network](https://github.com/allisonhorst/palmerpenguins)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a Scatter plot with beakLength on x and flipperLength on y. Use equal-sized points colored by Male, Female, or No Data, add a legend, and label both axes in millimeters.

Data context: The bundled Palmer penguins data contains individual measurements in millimeters; missing sex is shown as a separate legend category.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-scatter-plot
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-scatter-plot
Data/source references: K.Gorman, LTER Network — https://github.com/allisonhorst/palmerpenguins

## College majors: pay and employment

American Community Survey · 2010–2012

Compare graduate outcomes with point size showing the number of graduates.

Gallery: https://unovis.dev/gallery/view?example=sized-scatter-plot
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/sized-scatter-plot

Data notes: The bundled FiveThirtyEight college-majors snapshot supplies major, category, graduate count, employment rate, and median salary.
- [FiveThirtyEight](https://github.com/fivethirtyeight/data/tree/master/college-majors)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot medianSalary against employmentRate. Scale Scatter point diameter by total graduates, color by major category, show compact count labels, and reveal the major and graduate count in a tooltip.

Data context: The bundled FiveThirtyEight college-majors snapshot supplies major, category, graduate count, employment rate, and median salary.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=sized-scatter-plot
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/sized-scatter-plot
Data/source references: FiveThirtyEight — https://github.com/fivethirtyeight/data/tree/master/college-majors

## Language models by release date and size

Historical compilation · through March 2024

Use shapes and colors to distinguish model developers in a parameter-count comparison.

Gallery: https://unovis.dev/gallery/view?example=shaped-scatter-plot
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/shaped-scatter-plot

Data notes: This bundled Information is Beautiful compilation contains reported or estimated parameter counts. Values, including closed-model estimates, are historical claims from that compilation, not independently verified model specifications.
- [information is beautiful](https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot model release date against trainedParam in billions using a Scatter component. Encode developer with both shape and color, label model names while hiding overlaps, and add owner and size tooltips. Identify estimated parameter counts explicitly and do not present this historical compilation as current verified specifications.

Data context: This bundled Information is Beautiful compilation contains reported or estimated parameter counts. Values, including closed-model estimates, are historical claims from that compilation, not independently verified model specifications.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=shaped-scatter-plot
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/shaped-scatter-plot
Data/source references: information is beautiful — https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/

## Where do passengers fly?

BTS T-100 · scheduled passenger segments · May 2014

Real passenger volumes drive the routes from three major U.S. hubs.

Gallery: https://unovis.dev/gallery/view?example=airport-passenger-flows
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/airport-passenger-flows

Data notes: Top 12 destinations in the 50 U.S. states per selected origin, summed across carriers. Animated particles show relative passenger volume, not individual aircraft or flight times. Coordinates: OurAirports.
- [Bureau of Transportation Statistics](https://www.transtats.bts.gov/DatabaseInfo.asp?DB_URL=&QO_VQ=EEE)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Use a TopoJSONMap with weighted links for scheduled passenger segments from selected U.S. airports. Put a narrow destination-ranking bar chart to the left of the map, share destination highlighting, add an origin-airport selector, passenger-count tooltips, a legend.

Data context: Top 12 destinations in the 50 U.S. states per selected origin, summed across carriers. Animated particles show relative passenger volume, not individual aircraft or flight times. Coordinates: OurAirports.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=airport-passenger-flows
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/airport-passenger-flows
Data/source references: Bureau of Transportation Statistics — https://www.transtats.bts.gov/DatabaseInfo.asp?DB_URL=&QO_VQ=EEE

## Earthquakes across linked views

Worldwide M4.5+ earthquakes · January 2024

Select an event on the map or scatter plot to locate it in the other view.

Gallery: https://unovis.dev/gallery/view?example=earthquake-explorer
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/earthquake-explorer

Data notes: Magnitude is a logarithmic measure; marker radius is used only for visual emphasis. Depth is in kilometers. The date filter and daily counts use UTC.
- [USGS earthquake catalog](https://earthquake.usgs.gov/fdsnws/event/1/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Link a TopoJSONMap of epicenters to a depth-versus-magnitude Scatter and daily-count bars for January 2024 earthquakes. Size map points by magnitude, add magnitude and date filters, highlight a selected event in both views, align Cartesian plots with fixed margins, and include tooltips.

Data context: Magnitude is a logarithmic measure; marker radius is used only for visual emphasis. Depth is in kilometers. The date filter and daily counts use UTC.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=earthquake-explorer
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/earthquake-explorer
Data/source references: USGS earthquake catalog — https://earthquake.usgs.gov/fdsnws/event/1/

## Earthquake epicenters around the world

USGS · historical location snapshot

Explore earthquake locations on a zoomable map.

Gallery: https://unovis.dev/gallery/view?example=basic-leaflet-map
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-leaflet-map

Data notes: The bundled records contain event identifiers and coordinates only; point size does not encode magnitude or recency.
- [https://earthquake.usgs.gov](https://earthquake.usgs.gov)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Map earthquake id, latitude, and longitude with LeafletMap. Use equal-sized markers, allow zooming and panning, and include basemap attribution without inventing magnitude values.

Data context: The bundled records contain event identifiers and coordinates only; point size does not encode magnitude or recency.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-leaflet-map
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-leaflet-map
Data/source references: https://earthquake.usgs.gov — https://earthquake.usgs.gov

## Animated routes between U.S. airports

Flow map · synthetic connections

Use moving particles to show direction between airport locations.

Gallery: https://unovis.dev/gallery/view?example=leaflet-flow-map
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/leaflet-flow-map

Data notes: Airport coordinates are bundled with illustrative connections and particle densities; these are not observed passenger volumes.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Use LeafletFlowMap to draw synthetic directed routes between airport coordinates. Animate flow particles with configurable density, show endpoint markers, and make clear that route connections are illustrative.

Data context: Airport coordinates are bundled with illustrative connections and particle densities; these are not observed passenger volumes.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=leaflet-flow-map
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/leaflet-flow-map

## Network events across global sites

Clustered map · illustrative telemetry

Zoom from regional clusters into sites to inspect normal and blocked events.

Gallery: https://unovis.dev/gallery/view?example=advanced-leaflet-map
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/advanced-leaflet-map

Data notes: Bundled site names, coordinates, and event counts demonstrate map styling and interactions; they are illustrative telemetry.
- [Leaflet Map component documentation](https://unovis.dev/docs/components/LeafletMap)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a LeafletMap of named sites with normal and blocked event counts. Show proportions as pie markers, aggregate nearby sites into clusters, size markers by event volume, display cluster counts, expand clusters on click, and support light and dark basemap styles with attribution.

Data context: Bundled site names, coordinates, and event counts demonstrate map styling and interactions; they are illustrative telemetry.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=advanced-leaflet-map
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/advanced-leaflet-map
Data/source references: Leaflet Map component documentation — https://unovis.dev/docs/components/LeafletMap

## Life expectancy around the world

Country estimates · 1950–2019

Move through seven decades of life expectancy with a shared color scale.

Gallery: https://unovis.dev/gallery/view?example=topojson-map
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/topojson-map

Data notes: The bundled Our World in Data snapshot stores a country code and annual life-expectancy values. The legend uses the same fixed 50–85 year scale throughout.
- [Our World in Data](https://ourworldindata.org/life-expectancy)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a TopoJSONMap choropleth from country ids and annual age arrays for 1950–2019. Add a year slider, country/value tooltips, and a custom horizontal gradient legend with a fixed 50–85 year domain so colors remain comparable.

Data context: The bundled Our World in Data snapshot stores a country code and annual life-expectancy values. The legend uses the same fixed 50–85 year scale throughout.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=topojson-map
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/topojson-map
Data/source references: Our World in Data — https://ourworldindata.org/life-expectancy

## Where does U.S. energy go?

United States · 2024 · quadrillion Btu

Energy sources split across sectors; electricity combines sources and redistributes energy.

Gallery: https://unovis.dev/gallery/view?example=energy-flow-sankey
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/energy-flow-sankey

Data notes: Published trillion-Btu values are converted to quadrillion Btu. Electrical system losses remain explicit. Tiny differences at nodes reflect source rounding; unreported residential coal is omitted.
- [EIA Monthly Energy Review, tables 2.2–2.6](https://www.eia.gov/totalenergy/data/monthly/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a Sankey of U.S. energy sources, electricity generation, and end-use sectors from the 2024 EIA snapshot, in quadrillion Btu. Color sources with the Unovis palette, retain source/target/value links, provide filtering and tooltips, and explain the flow accounting rather than implying every energy stream is useful delivered energy.

Data context: Published trillion-Btu values are converted to quadrillion Btu. Electrical system losses remain explicit. Tiny differences at nodes reflect source rounding; unreported residential coal is omitted.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=energy-flow-sankey
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/energy-flow-sankey
Data/source references: EIA Monthly Energy Review, tables 2.2–2.6 — https://www.eia.gov/totalenergy/data/monthly/

## A household's weekly consumables budget

United Kingdom · 2019 expenditure snapshot

Follow spending from consumables into food, drinks, and other categories.

Gallery: https://unovis.dev/gallery/view?example=basic-sankey
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-sankey

Data notes: The bundled Office for National Statistics snapshot supplies spending values and source/target links. The example displays the consumables branch of a household budget.
- [Office for National Statistics](https://www.ons.gov.uk/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a Sankey with nodes containing id, label, value, and subgroups, and links containing source, target, and value. Show the UK household consumables branch, label nodes with spending values, and keep the flow widths proportional to expenditure.

Data context: The bundled Office for National Statistics snapshot supplies spending values and source/target links. The example displays the consumables branch of a household budget.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-sankey
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-sankey
Data/source references: Office for National Statistics — https://www.ons.gov.uk/

## Unpack a household budget

United Kingdom · weekly expenditure

Click spending categories to reveal or collapse the detail beneath them.

Gallery: https://unovis.dev/gallery/view?example=expandable-sankey
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/expandable-sankey

Data notes: The bundled household budget uses Office for National Statistics expenditure categories. Expanded nodes show subcategories; collapsed nodes retain the aggregate.
- [Office for National Statistics](https://www.ons.gov.uk/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create an expandable Sankey of household weekly expenditure. Start with top-level spending categories, expand or collapse a category on node click, preserve its aggregate value, and display percentages of total expenditure in node sublabels.

Data context: The bundled household budget uses Office for National Statistics expenditure categories. Expanded nodes show subcategories; collapsed nodes retain the aggregate.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=expandable-sankey
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/expandable-sankey
Data/source references: Office for National Statistics — https://www.ons.gov.uk/

## Inside the Unovis dependency graph

Unovis 1.7.1 · declared dependency snapshot

Select a package to highlight its connections, or search to inspect a smaller neighborhood.

Gallery: https://unovis.dev/gallery/view?example=dependency-explorer
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/dependency-explorer

Data notes: This selected graph includes framework wrappers, the TypeScript core, and visualization dependencies. Version labels are declared package versions or dependency ranges; wrapper peer dependencies on the core are included; development dependencies are excluded.
- [Unovis package manifests](https://github.com/f5/unovis/tree/main/packages)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a Graph from Unovis package manifests, with package nodes, dependency links, and distinct package-type icons. Add package selection and search, highlight connections around the chosen package, and include dependency details in tooltips.

Data context: This selected graph includes framework wrappers, the TypeScript core, and visualization dependencies. Version labels are declared package versions or dependency ranges; wrapper peer dependencies on the core are included; development dependencies are excluded.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=dependency-explorer
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/dependency-explorer
Data/source references: Unovis package manifests — https://github.com/f5/unovis/tree/main/packages

## Inside an online shop's service mesh

Online Boutique · directed service graph

Follow the connections between services with a layered Dagre layout.

Gallery: https://unovis.dev/gallery/view?example=dagre-graph
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/dagre-graph

Data notes: The bundled graph is based on the Online Boutique sample application, with node shapes, link colors, and active-flow flags.
- [Online Boutique sample application](https://cloud.google.com/service-mesh/docs/onlineboutique-install-kpt)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Use Graph with a Dagre layout to display service-mesh nodes and directed links from the Online Boutique sample. Bind node labels, shapes, and colors, animate links marked active, and keep the layout readable without requiring zoom.

Data context: The bundled graph is based on the Online Boutique sample application, with node shapes, link colors, and active-flow flags.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=dagre-graph
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/dagre-graph
Data/source references: Online Boutique sample application — https://cloud.google.com/service-mesh/docs/onlineboutique-install-kpt

## Who connects Les Misérables?

Character co-occurrence · Stanford GraphBase

A force-directed network reveals relationships among the novel's characters.

Gallery: https://unovis.dev/gallery/view?example=force-graph
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/force-graph

Data notes: Nodes are characters and links record co-occurrence with a chapter label in the bundled Stanford GraphBase-derived graph.
- [The Stanford GraphBase](https://www-cs-faculty.stanford.edu/~knuth/sgb.html)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw a force-directed Graph of Les Misérables characters using id/color nodes and source/target/chapter links. Label nodes by character, label links by chapter, and tune repulsion and centering forces to spread the network.

Data context: Nodes are characters and links record co-occurrence with a chapter label in the bundled Stanford GraphBase-derived graph.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=force-graph
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/force-graph
Data/source references: The Stanford GraphBase — https://www-cs-faculty.stanford.edu/~knuth/sgb.html

## Service traffic across sites

Parallel graph · synthetic telemetry

Expand a site to inspect service health and the traffic between groups.

Gallery: https://unovis.dev/gallery/view?example=parallel-graph
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/parallel-graph

Data notes: The dataset is synthetic. Node scores, status badges, and animated links illustrate monitoring and grouped-network interactions.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Use Graph with a parallel layout to arrange service sites into columns. Clicking a site expands its services; show status-colored links, animated traffic, node gauges, badges, and panels around expanded groups.

Data context: The dataset is synthetic. Node scores, status badges, and animated links illustrate monitoring and grouped-network interactions.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=parallel-graph
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/parallel-graph

## From a VPC to its workloads

ELK layered layout · illustrative topology

Organize network and workload nodes into nested groups.

Gallery: https://unovis.dev/gallery/view?example=elk-layered-graph
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/elk-layered-graph

Data notes: The bundled identifiers and connections form an illustrative topology, not a validated network configuration.
- [The Eclipse Layout Kernel (ELK)](https://www.eclipse.org/elk/)
- [ELK Demonstrators](https://rtsys.informatik.uni-kiel.de/elklive/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Use Graph with an ELK layered layout directed rightwards. Group illustrative VPC, subnet, and workload nodes by group and subGroup accessors, draw nested labeled panels, and configure spacing to make the hierarchy clear.

Data context: The bundled identifiers and connections form an illustrative topology, not a validated network configuration.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=elk-layered-graph
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/elk-layered-graph
Data/source references: The Eclipse Layout Kernel (ELK) — https://www.eclipse.org/elk/, ELK Demonstrators — https://rtsys.informatik.uni-kiel.de/elklive/

## From identity to sensitive resources

Custom graph nodes · illustrative access paths

Trace access through roles and compute instances to files and secrets.

Gallery: https://unovis.dev/gallery/view?example=custom-nodes-graph
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/custom-nodes-graph

Data notes: This synthetic access graph demonstrates custom SVG icons, finding badges, node panels, tooltips, and zoom controls.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a parallel Graph showing users and roles connected through compute instances to files and secrets. Render distinct SVG icons, finding-count badges, labels and sublabels, and group panels. Add tooltip follow-cursor and hover toggles plus fit and zoom controls; use white icons in light mode and dark icons in dark mode.

Data context: This synthetic access graph demonstrates custom SVG icons, finding badges, node panels, tooltips, and zoom controls.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=custom-nodes-graph
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/custom-nodes-graph

## How did we discover exoplanets?

Discoveries through 2024 · archive snapshot 19 October 2026

Explore discovery methods and the facilities behind them, weighted by confirmed planet counts.

Gallery: https://unovis.dev/gallery/view?example=exoplanet-discoveries
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/exoplanet-discoveries

Data notes: The composite-parameters table contains one row per planet. Counts describe confirmed discoveries in this snapshot, not the underlying abundance of planets. Click a segment to explore it.
- [NASA Exoplanet Archive](https://exoplanetarchive.ipac.caltech.edu/docs/API_TD_columns.html)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create an animated NestedDonut hierarchy of confirmed exoplanet counts by discovery method and facility through 2024. Use the Unovis palette, configurable time filters, count and share tooltips. Keep facility contributions weighted by planet count and animate changes between filtered views.

Data context: The composite-parameters table contains one row per planet. Counts describe confirmed discoveries in this snapshot, not the underlying abundance of planets. Click a segment to explore it.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=exoplanet-discoveries
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/exoplanet-discoveries
Data/source references: NASA Exoplanet Archive — https://exoplanetarchive.ipac.caltech.edu/docs/API_TD_columns.html

## Where do Americans move?

2024 ACS · people aged one and over

Follow interstate moves between eight selected states and the rest of the country.

Gallery: https://unovis.dev/gallery/view?example=state-migration-chord
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/state-migration-chord

Data notes: Links run from previous residence to current residence. Other states includes the remaining 42 states and DC; moves within that aggregated group are omitted. Values are survey estimates.
- [U.S. Census Bureau](https://www.census.gov/topics/population/migration/guidance/state-to-state-migration-flows.html)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw a ChordDiagram of origin-to-destination interstate moves between eight selected states and an other-states group. Use the Unovis palette, put readable labels inside the arcs, show directional move counts on hover, and add a state-highlighting selector.

Data context: Links run from previous residence to current residence. Other states includes the remaining 42 states and DC; moves within that aggregated group are omitted. Values are survey estimates.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=state-migration-chord
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/state-migration-chord
Data/source references: U.S. Census Bureau — https://www.census.gov/topics/population/migration/guidance/state-to-state-migration-flows.html

## What makes a common password?

Password categories · historical compilation

Compare the relative weight of names, alphanumeric strings, and other password categories.

Gallery: https://unovis.dev/gallery/view?example=basic-donut-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-donut-chart

Data notes: The bundled category counts come from Information is Beautiful's common-password visualization. They describe that historical compilation, not current password use.
- [information is beautiful](https://informationisbeautiful.net/visualizations/top-500-passwords-visualized/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a Donut from key/value password-category counts with a matching legend, separated arcs, and a fixed arc width. Size slices by count and preserve category order.

Data context: The bundled category counts come from Information is Beautiful's common-password visualization. They describe that historical compilation, not current password use.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-donut-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-donut-chart
Data/source references: information is beautiful — https://informationisbeautiful.net/visualizations/top-500-passwords-visualized/

## Progress toward three daily goals

Radial bars · illustrative activity

Compare steps, calories, and movement against their own daily targets.

Gallery: https://unovis.dev/gallery/view?example=basic-radial-bar-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-radial-bar-chart

Data notes: The illustrative values are 8,300 of 10,000 steps, 420 of 600 kcal, and 25 of 30 movement minutes. The center summarizes average completion.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw three concentric RadialBar tracks for steps, calories, and movement. Give each datum its own maximum, show rounded colored progress arcs and a category legend, put average completion in the center, and show current/target/unit tooltips.

Data context: The illustrative values are 8,300 of 10,000 steps, 420 of 600 kcal, and 25 of 30 movement minutes. The center summarizes average completion.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-radial-bar-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-radial-bar-chart

## Seven readings, seven reference values

Wellness readings · illustrative data

Compare sample readings in different units as fractions of their own reference values.

Gallery: https://unovis.dev/gallery/view?example=basic-circular-bar-chart
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-circular-bar-chart

Data notes: The seven readings and reference maxima are illustrative. Each petal uses its own scale, so lengths show fractions of separate reference values rather than directly comparable raw quantities.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Use CircularBar to display seven illustrative readings with key, value, unit, icon, and color fields. Normalize each petal with its corresponding maxValue, add a matching BulletLegend and icons at the inner ends, and show the reading, reference maximum, and unit in a tooltip. Use theme-aware palette colors and explain that the readings have different units and separate scales.

Data context: The seven readings and reference maxima are illustrative. Each petal uses its own scale, so lengths show fractions of separate reference values rather than directly comparable raw quantities.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-circular-bar-chart
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-circular-bar-chart

## Switching phone brands

2014 mobile consumer survey

Follow brand-to-brand switching, grouped by headquarters country.

Gallery: https://unovis.dev/gallery/view?example=hierarchical-chord-diagram
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/hierarchical-chord-diagram

Data notes: The bundled switching matrix contains proportions for eight phone-brand groups. Country groups describe company headquarters, not customer locations.
- [2014 Mobile Consumer Survey Data](https://observablehq.com/@d3/chord-diagram#data)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw a ChordDiagram from phone-brand nodes, country groups, and a weighted switching matrix. Use country-based colors, group brands with nodeLevels, and show perpendicular labels for both brand and country levels.

Data context: The bundled switching matrix contains proportions for eight phone-brand groups. Country groups describe company headquarters, not customer locations.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=hierarchical-chord-diagram
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/hierarchical-chord-diagram
Data/source references: 2014 Mobile Consumer Survey Data — https://observablehq.com/@d3/chord-diagram#data

## A wheel of coffee flavors

Coffee taxonomy · aromas and tastes

Move outward from broad flavor families to specific sensory notes.

Gallery: https://unovis.dev/gallery/view?example=sunburst-nested-donut
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/sunburst-nested-donut

Data notes: This is a categorical flavor taxonomy; segment sizes reflect the hierarchy's entries, not measured flavor intensity.
- [Aculocity](https://www.aculocity.com/labs/sunburst-chart)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create an outward NestedDonut with five layers: type, group, subgroup, description, and item. Use a coffee-flavor taxonomy, keep related branches in coordinated colors, and label the hierarchy without implying measured flavor strength.

Data context: This is a categorical flavor taxonomy; segment sizes reflect the hierarchy's entries, not measured flavor intensity.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=sunburst-nested-donut
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/sunburst-nested-donut
Data/source references: Aculocity — https://www.aculocity.com/labs/sunburst-chart

## What grows on New York’s streets?

TreesCount! · 2015 historical census

Explore the species that make up a borough’s living street-tree population.

Gallery: https://unovis.dev/gallery/view?example=street-tree-treemap
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/street-tree-treemap

Data notes: Areas encode counts of living trees, grouped by borough and species. Search changes the displayed total; this is a historical census, not today’s inventory.
- [NYC Parks street-tree census](https://data.cityofnewyork.us/Environment/2015-Street-Tree-Census-Tree-Data/uvpi-gqnh/about_data)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a Treemap of living NYC street trees with borough and species layers and count as tile value. Show all boroughs by default, add borough and species-search controls, and link species selection across boroughs. Preserve selected tile colors and lighten other tiles from their normal fills. Use compact labels, tooltips.

Data context: Areas encode counts of living trees, grouped by borough and species. Search changes the displayed total; this is a historical census, not today’s inventory.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=street-tree-treemap
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/street-tree-treemap
Data/source references: NYC Parks street-tree census — https://data.cityofnewyork.us/Environment/2015-Street-Tree-Census-Tree-Data/uvpi-gqnh/about_data

## Putting billions in perspective

The Billion Dollar Gram · historical compilation

Compare the scale of spending, earnings, losses, debt, and wealth.

Gallery: https://unovis.dev/gallery/view?example=treemap
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/treemap

Data notes: The bundled records mix years and different kinds of quantities. Tile area compares reported dollar amounts; category sums should not be interpreted as a single coherent budget.
- [information is beautiful](https://informationisbeautiful.net/visualizations/the-billion-dollar-gram/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build a Treemap from name, category, and billions fields. Group tiles by category, size by billions, vary label size with tile size, include category legends, and show name/category/value tooltips. Explain that the historical compilation combines different years and kinds of financial quantities.

Data context: The bundled records mix years and different kinds of quantities. Tile area compares reported dollar amounts; category sums should not be interpreted as a single coherent budget.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=treemap
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/treemap
Data/source references: information is beautiful — https://informationisbeautiful.net/visualizations/the-billion-dollar-gram/

## When does New York ride?

New York City · January 2024

Average trip starts per hour reveal weekday commutes and weekend rhythms.

Gallery: https://unovis.dev/gallery/view?example=bike-demand-heatmap
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/bike-demand-heatmap

Data notes: All January CSV parts are included. Each cell is divided by the number of matching weekdays in the month; times are local New York time.
- [Citi Bike system data](https://citibikenyc.com/system-data)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a weekday-by-hour Heatmap of Citi Bike trip starts for January 2024. Average each weekday/hour cell by the number of matching dates rather than comparing raw weekday totals. Include ride-type selection, a color legend, count tooltips.

Data context: All January CSV parts are included. Each cell is divided by the number of matching weekdays in the month; times are local New York time.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=bike-demand-heatmap
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/bike-demand-heatmap
Data/source references: Citi Bike system data — https://citibikenyc.com/system-data

## A year of daily activity

Calendar heatmap · synthetic counts

Read activity patterns across weeks and weekdays in a GitHub-style calendar.

Gallery: https://unovis.dev/gallery/view?example=github-style-heatmap
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/github-style-heatmap

Data notes: Counts are deterministically generated for a rolling 364-day window; they are not a person's actual contribution history.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a Heatmap of daily date/count records with seven weekday rows and weeks as columns. Use offset for the first partial week, compact rounded cells, month labels, alternating weekday labels, and empty cells for zero activity. Label the dataset as synthetic.

Data context: Counts are deterministically generated for a rolling 364-day window; they are not a person's actual contribution history.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=github-style-heatmap
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/github-style-heatmap

## Bitcoin's price cycles, annotated

Weekly price and volume · 2010–2023 snapshot

Use callouts to put major peaks in a long price history into context.

Gallery: https://unovis.dev/gallery/view?example=basic-annotations
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-annotations

Data notes: The bundled Yahoo Finance snapshot supplies weekly dates, USD prices, and trading volumes. Annotations demonstrate text layout and connectors on a logarithmic price chart.
- [Yahoo! Finance](https://finance.yahoo.com/quote/BTC-USD/history/)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Plot weekly Bitcoin price as a Line on a logarithmic y scale, with subdued volume bars and a time axis. Use Annotations to add connector callouts near the 2011, 2013, 2017, and 2021 peaks, with readable positioning and clear currency labels.

Data context: The bundled Yahoo Finance snapshot supplies weekly dates, USD prices, and trading volumes. Annotations demonstrate text layout and connectors on a logarithmic price chart.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=basic-annotations
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/basic-annotations
Data/source references: Yahoo! Finance — https://finance.yahoo.com/quote/BTC-USD/history/

## Inspect the changing music market

U.S. recorded music · stacked bars and crosshair

Hover a year to compare revenues across physical and digital formats.

Gallery: https://unovis.dev/gallery/view?example=crosshair-stacked-bar
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/crosshair-stacked-bar

Data notes: The bundled RIAA records supply year and five format revenues. The crosshair summarizes one year with category icons and currency values.
- [RIAA](https://www.riaa.com/u-s-sales-database/)
- [Bootstrap Icons](https://icons.getbootstrap.com/#install)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Stack annual vinyl, cassette, cd, download, and streaming revenues with StackedBar. Add a format legend and a Crosshair tooltip that shows the selected year and each nonzero format with an icon and currency formatting.

Data context: The bundled RIAA records supply year and five format revenues. The crosshair summarizes one year with category icons and currency values.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=crosshair-stacked-bar
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/crosshair-stacked-bar
Data/source references: RIAA — https://www.riaa.com/u-s-sales-database/, Bootstrap Icons — https://icons.getbootstrap.com/#install

## One cursor, two linked charts

Synchronized crosshairs · illustrative series

Hover either chart or use presets and a slider to inspect the same x position.

Gallery: https://unovis.dev/gallery/view?example=synced-crosshairs
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/synced-crosshairs

Data notes: The bundled seeded series is synthetic. Both charts share forceShowAt state so pointer and programmatic selections stay synchronized.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create two vertically stacked XY charts from the same x/y series, with an Area view above and a Line view below. Share the Crosshair position through forceShowAt and onMove, and add preset buttons, a slider, and a clear action.

Data context: The bundled seeded series is synthetic. Both charts share forceShowAt state so pointer and programmatic selections stay synchronized.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=synced-crosshairs
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/synced-crosshairs

## Decades of cereal production

World Bank · overview and detail

Drag the overview brush and toggle countries to compare a selected period.

Gallery: https://unovis.dev/gallery/view?example=brush-grouped-bar
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/brush-grouped-bar

Data notes: The bundled cereal-production series is expressed in millions of metric tons; unavailable country-year observations remain missing.
- [World Bank Open Data](https://data.worldbank.org)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Build grouped bars of annual cereal production by country, with a compact overview and draggable Brush controlling the main x domain. Add a clickable country legend and update the detail view immediately during brushing.

Data context: The bundled cereal-production series is expressed in millions of metric tons; unavailable country-year observations remain missing.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=brush-grouped-bar
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/brush-grouped-bar
Data/source references: World Bank Open Data — https://data.worldbank.org

## Explore college outcomes with a brush

American Community Survey · 2010–2012

Brush the overview to focus on majors in a salary and employment range.

Gallery: https://unovis.dev/gallery/view?example=free-brush-scatters
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/free-brush-scatters

Data notes: The bundled FiveThirtyEight college-majors snapshot supplies median salary, employment rate, graduate count, and subject category.
- [FiveThirtyEight](https://github.com/fivethirtyeight/data/tree/master/college-majors)

### Creation prompt

Build a responsive chart using Unovis in {framework}. Create a Scatter of medianSalary versus employmentRate, color by major category, and size points by graduate count using a 4–20px diameter range. Add a small overview Scatter with an XY FreeBrush that updates the main chart's x and y domains; label axes and selected majors.

Data context: The bundled FiveThirtyEight college-majors snapshot supplies median salary, employment rate, graduate count, and subject category.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=free-brush-scatters
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/free-brush-scatters
Data/source references: FiveThirtyEight — https://github.com/fivethirtyeight/data/tree/master/college-majors

## Highlight ranges and reference values

Plot bands and lines · illustrative data

Mark intervals and thresholds on both axes of a line chart.

Gallery: https://unovis.dev/gallery/view?example=plotband-plotline
Implementation and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/plotband-plotline

Data notes: The fifteen x/y pairs are illustrative. Colored bands and reference lines demonstrate annotations in data coordinates.

### Creation prompt

Build a responsive chart using Unovis in {framework}. Draw a Line through x/y records. Add an x Plotband from 4 to 6, a y Plotband from 1 to 3, a y Plotline at 6, and an x Plotline at 10, with distinct colors and readable labels in different positions.

Data context: The fifteen x/y pairs are illustrative. Colored bands and reference lines demonstrate annotations in data coordinates.
Use the matching framework package and the public Unovis API, support light and dark themes, and include the imports and data types needed to run the example. Keep page headings outside the chart implementation.

Reference: https://unovis.dev/gallery/view?example=plotband-plotline
Example source and bundled data: https://github.com/f5/unovis/tree/main/packages/shared/examples/plotband-plotline