Skip to content
TablePage.ai Open the app

Build an Interactive Data Visualization Readers Can Check

Prepare a clean spreadsheet, choose useful charts and filters, and publish an interactive data page with clear units, sources and validation checks.

Share X in f
Wei Hu

Suppose you have a spreadsheet of program completion counts by district and year. You want readers to compare districts, find a particular year and check the numbers behind a chart—without opening a spreadsheet application.

Interactive data visualization lets readers change or inspect a view of the data, rather than only look at a fixed image. That might mean filtering records, sorting a table or revealing a chart’s exact values. The useful interaction is the one that answers a reader’s question.

Here is a publication workflow using a small, fictional dataset.

1. Define the question and the row

Start with two questions:

  • Which district had the highest completion rate in 2025?
  • Which district recorded the most completions that year?

These require different measures. A high percentage does not necessarily mean a large number of completions.

Make each row one district in one year. In this example, completed counts members of that row’s enrolled group who completed the program; each participant belongs to only one district within a year. Keep counts and calculated rates in separate columns:

district_id,district,year,enrolled,completed,completion_rate_pct
D01,North,2024,100,80,80
D02,Central,2024,20,18,90
D03,South,2024,60,45,75
D01,North,2025,120,90,75
D02,Central,2025,30,27,90
D03,South,2025,70,56,80

These figures are invented for demonstration, not results from a real program.

Calculate the rate as completed / enrolled × 100. Here, 90 means 90%, not the decimal fraction 0.9. Document that convention and check that the publishing tool’s percentage formatting preserves its meaning.

Before publishing:

  • Use one header row, with no merged cells or subtotal rows mixed into the records.
  • Check that each district–year combination appears only once.
  • Keep district IDs as identifiers, not chart measures.
  • Define missing values separately from confirmed zeros. If enrollment is zero, do not divide by it or silently label the rate 0%.
  • Create a public-release copy containing only information approved for public access. Remove sensitive records, unnecessary personal fields and private workbook content before uploading.

For a broader file-cleaning workflow, see how to prepare and publish a data table.

2. Match the visualization to the comparison

For this example, use a bar chart of completion rates for one selected year, alongside the underlying table. A second bar chart of completion counts can answer the volume question if that comparison matters to your audience.

Bars suit comparisons between categories; lines suit changes over time; scatter plots suit relationships between numerical measures. Choose from the question, not from the number of available chart types. Datawrapper’s chart-selection guide explains these distinctions.

Keep the rate chart’s scale at 0–100%. Label the measure “Completion rate (%)” and make enrollment and completion counts available in the table. Those counts provide context for a percentage calculated from a small group.

For an overall participant completion rate, divide the combined counts rather than averaging district percentages. In the fictional 2025 data, the combined rate is:

(90 + 27 + 56) / (120 + 30 + 70) × 100 = 78.6%

The simple average of the three district rates is 81.7%. It answers a different question because each district receives equal weight.

3. Add only interactions that help

Specify the behavior you need before choosing a publisher:

Reader task Useful interaction Acceptance check
Compare one year Year filter The displayed records match that year
Find a district District filter or search The matching row retains its counts and rate
Rank districts Numeric table sorting Rates sort numerically, not alphabetically
Check a value Labeled chart details and table Both show the same measure and period

Do not assume a table filter also changes the charts. Check the selected tool’s behavior. If the views are independent, label their scopes clearly rather than presenting them as synchronized. If year-specific charts are essential, use a publisher that supports them or publish a separately labeled, single-year release file.

4. Publish with enough context to interpret it

As of October 11, 2026, TablePage’s homepage describes uploads of CSV, TSV, XLSX and XLS files that generate public dataset pages with a shareable link, a filterable table and automatically generated charts. Readers can explore without signing up.

Use that workflow for a reviewed release file, then inspect the generated page. Treat automatic charts as candidates: check whether they use the intended measure, grouping and aggregation before sharing them.

On the dataset page where supported—or in the accompanying article—include:

  • A title naming the subject and period.
  • A row definition and units for every measure.
  • The original source, release or retrieval date, and any transformations.
  • The rate formula, missing-value convention and relevant limitations.

For this sample, the source note should say “Fictional demonstration data.” For a real dataset, link to the original publisher, not just your visualization.

5. Test the page as a reader

Filter to 2025. Central should have the highest rate, at 90%; North should have the most completions, at 90. Clear the filter and check all six records against the release file, then test sorting and opening the public link while signed out.

Inspect the page on a narrow screen and with a keyboard. Filters and other functionality should have keyboard equivalents; this is a requirement of WCAG’s Keyboard success criterion.

Keep a readable table and a short explanation alongside the chart. Do not make readers rely solely on hover to understand the result. W3C’s guidance for complex images recommends accompanying summaries and descriptions that communicate values, relationships and trends.

Share the page once a reader can identify the comparison, change the relevant view and trace a displayed value back to a documented row.