Skip to content
InsightCharts

Search

Search guides and components

Data explorer

A set of linked charts over one shared dataset that filter each other. It has a headline, a sentence of instructions with filter chips, a row of figures that recompute from the filtered rows, two to four charts and an optional detail table. It opens on selections the author chooses.

Use when
Use it when readers will want to filter the data themselves after seeing the main finding. State the finding with its number in the headline. Set initialSelections so the piece opens on the view the headline describes. Use the figures and the finding callout to give the numbers for that view. Keep to one dataset and two to four small, plain charts. Readers click the charts to filter, so keep them all the same size.
Avoid when
A fixed message that needs no exploration (use executive brief or visual essay). Charts over unrelated datasets, which cannot filter each other. More than four charts or five figures.

Preview

A template is a whole page, so the preview scrolls inside its frame. Expand it to read it in place, or open it full screen.

Full screen

City bike share · June

Casual riders' trips averaged 24.6 minutes in June, against 12.0 for members

70% of casual trips were at weekends. 40% started in Riverside. The view below is filtered to casual riders.

What to look for
Casual riders made 1.43 million of the 3.65 million trips in June

520,000 of them were at weekend middays. Members made 34% of their trips at weekends.

Filtered by

Click a bar to filter the other charts and the figures. Click it again to clear.

Trips, thousands
1,430
3,650 across all trips
Average trip length, minutes
24.6
16.9 across all trips
Share taken at weekends
69.9%
48.2% across all trips
Share starting in Riverside
40%
29% across all trips

Rider

Trips, thousands

Day

Trips, thousands

Time of day

Trips, thousands

Start district

Trips, thousands

Selected trips by start district and time of day
RiversideMidday28024.9
CentreMidday21024.9
RiversideEvening18024.5
CentreEvening13524.5
UniversityMidday11224.9
DocklandsMidday9825.0
Source
City bike-share operator, trip records
Data
June 2024
Method
A trip is a hire of more than one minute. Morning is 6 to 10am, evening 4 to 8pm.
Note
Illustrative data

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Built from

The data explorer template is assembled from 3 molecules and 8 atoms, 3 of which it reaches only through a molecule. Any slot also takes any other component.

Molecules

3

Filter chips

The active crossfilter selections of the surrounding InsightData, shown as removable chips with a reset control.

Stat row

Two to five key figures in one row separated by hairlines, collapsing to two columns and then one as the container narrows.

UsesBig numberStat tile

Linked charts

Two to four charts over one shared dataset in a responsive grid: clicking a mark in one filters the others, with the active filters shown as removable chips.

UsesBar chartLine chart

Atoms

8

Callout

A boxed statement of fact with a short bold lead and a sentence of explanation. The tone is marked by icon and tint.

Data table

A restrained editorial table from rows and a column config: aligned tabular numbers, an optional in-cell bar, row highlight and click-to-sort headers.

Headline

The opening block of a piece or section: kicker, title, one-sentence deck and a byline/date line.

Source note

A sourcing footer for a whole piece: sources with optional links, the period covered, method, caveats and credit.

Big number

A featured statistic with its label, change and the context that gives it meaning.

ThroughStat row

Stat tile

A compact, bordered KPI tile: label, value, change against a baseline and an optional trend graphic.

ThroughStat row

Installation

$ pnpm dlx shadcn@latest add @insightcharts/data-explorer

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { DataExplorer } from "insightcharts";

Examples

Education: rates rather than totals, two starting filters

School attendance · 2023/24

Secondary pupils on free school meals missed 14.5% of sessions in 2023/24

The rate for all pupils was 7.2%. For secondary pupils on free school meals it was 13.1% in the autumn term and 15.8% in the summer term.

Filtered by

Click a bar to filter the other charts and the figures. The bars show absence rates, not totals.

Absence rate
14.5%
7.2% across all pupil groups
Sessions missed, thousands
130.5
682.4 across all pupil groups
Sessions possible, thousands
900
9,504 across all pupil groups

School type

Absence rate

Free school meals

Absence rate

Term

Absence rate

Source
Local authority attendance returns
Data
School year 2023/24
Method
A session is half a school day. The absence rate is sessions missed, authorised or not, as a share of sessions possible.
Note
Illustrative data

Props

PropTypeDefaultDescription
titlerequiredstringWhat the starting view shows, as one plain sentence with the number in it.
kickerstringSmall label above the title.
deckstringOne-sentence standfirst.
bylinestringAuthor line.
datestringPublication date.
instructionsstringOne sentence saying what can be clicked and what happens. Shown in the filter line.
finding{ lead?, body?, label? }A callout saying what to look for in the starting view.
datarequiredDataInputThe shared, row-level dataset: rows, CSV text, a URL or a loader.
transformTransform | Transform[]Applied once to the shared data.
chartsrequiredSlot[]Two to four chart specs. Give each a stable id, select: true (or a field name) and its own aggregating transform; leave out data.
initialSelectionsRecord<string, { field, values?, range? }>Selections the piece opens with, keyed by chart id. A button restores them after the reader changes the filter.
figures{ label, field?, op?, where?: { field, value }, per?, format?, context? }[]Figures recomputed from the filtered rows: op over field (default sum; count without a field), optionally restricted by where and divided by the sum of per for a rate or share. While a filter is active each shows the all-rows value as context.
table{ transform?, columns?, caption?, sort?, highlight?, ... }A detail table of the filtered rows: the props of data-table without rows, plus a transform applied first.
labelsRecord<string, string>Display names for fields in the filter chips.
unitstring"rows"Noun for what the figures total, used in figure context ("3,650 across all trips").
countbooleanfalseShow the filtered row count beside the chips.
rowUnitstring"rows"Noun for one row of data in that count.
columnsnumberPreferred chart columns.
restoreLabelstring"Back to the starting view"Label of the button that restores initialSelections.
sourcesstring | { name, url? } | (string | { name, url? })[]Where the data comes from, shown in the closing source note. Entries with a url are linked.
periodstringThe period the data covers.
methodstringHow the numbers were produced: definitions, adjustments, exclusions.
notestringCaveats the reader should know, e.g. "Illustrative data".
creditstringWho made the piece.
level1 | 2 | 3 | 4 | 5 | 61Heading level of the title; section headings follow one level down.
maxWidthnumber | stringWidest the piece may get. It is centred in wider containers.
themeThemeInputTheme override, passed on to everything inside.
mode"auto" | "system" | "light" | "dark""auto"Colour mode, passed on to everything inside.