AI-Assisted Web & Dashboards

Moderate · Data & Analysis track · ~35 min hands-on + readings and quiz

← Back to the Data & Analysis track

Turn data into a shareable dashboard or web page — and verify every number.

What you’ll be able to do

  • Generate a working dashboard or simple web page from your data
  • Iterate on layout and visuals with AI, one change at a time
  • Verify figures and keep published data non-sensitive

Overview

AI can generate a working dashboard or HTML page from your data and a description — charts, filters, tables — in minutes. You guide the design and verify the numbers.

Anything you publish should use non-sensitive data, and every displayed figure should be checked against the source before sharing.

Practice activities

Activity 1 · Moderate — Describe a crash dashboard

Time ~20 min · Tools ChatGPT Edu (or Claude) + a browser

Goal. Turn data into a shareable, self-contained dashboard.

Setup. Download the Crash Data 2020–2024 (CSV) — it includes crash coordinates.

Steps.

  1. Describe exactly what you want:

    Build a self-contained HTML dashboard from this Philadelphia crash CSV with three views: (1) a map of pedestrian-involved crashes, (2) a bar chart of crashes by year, (3) a table of the top collision types. Use only public libraries from a CDN, and keep all data processing inside the file.

  2. Open the produced HTML file in a browser.

  3. Check one number on the dashboard against the raw data.

Expected result. A working local dashboard (map + chart + table), much like the crash-data explorers already in your course.

Check your work. The “by year” totals should match your earlier counts, and all map points should fall within Philadelphia.

Common pitfalls. Verify every displayed figure. Only use public data in anything you’ll share. Watch for points at (0,0) caused by missing coordinates.

Stretch (optional). Ask AI to add a year filter that updates all three views at once.

Activity 2 · Moderate — Iterate the design

Time ~13 min · Tools same as Activity 1

Goal. Improve a dashboard with small, controlled changes.

Steps.

  1. Make one change at a time:

    Change the map to a heatmap of pedestrian crashes.

    Add a dropdown to filter by year.

    Fix the chart’s axis labels and add a title.

  2. Keep the prompts that worked in a short note for reuse.

Expected result. A cleaner dashboard with a working filter.

Check your work. After each change, confirm the underlying numbers didn’t shift unexpectedly.

Common pitfalls. Changing many things at once makes failures hard to localize — iterate singly.

Stretch (optional). Ask AI to add a short methods note: data source, years covered, and what “pedestrian-involved” means.

Activity 3 · Moderate — Same dashboard, built by an agent: Claude Code

Time ~20 min · Tools Claude Code

Goal. Build the same crash dashboard as Activity 1, but let Claude Code read the real CSV, write the HTML file to disk, and verify its own numbers — no copy-pasting code out of a chat window.

Setup. Download the Crash Data 2020–2024 CSV into an empty folder (e.g., crash-dashboard/). Open a terminal in that folder and start Claude Code (claude). Note: Claude Code is a consumer/PI-purchased tool, not Drexel-supported — Low Risk Data only, and this public dataset qualifies.

Steps.

  1. Describe the dashboard and let it work from the actual file, not a description of it: > Read the crash CSV in this folder and inspect its columns. Then create dashboard.html — a single self-contained file with three views: a map of pedestrian crashes, a bar chart of crashes by year, and a table of the top 10 collision types. Compute the counts from the CSV and bake them into the HTML; don’t load the CSV at runtime.
  2. Once it writes the file, make it check its own math against the source: > Before we call this done: re-read the CSV and count crashes for 2022 directly. Does that number match the 2022 bar in dashboard.html? Show me both numbers. Because Claude Code can read the data and the file it just wrote, it can catch its own mismatch — a chat window can’t.
  3. Open dashboard.html in your browser, then iterate in place: > Add a dropdown filter to the table so I can filter collision types by year. Update dashboard.html. Refresh the browser and confirm the change landed in the same file — no re-pasting, no dashboard_v2_final.html.

Expected result. A working dashboard.html on disk with map, chart, and table — and the agent has verified at least one figure (the 2022 count) against the raw CSV itself.

Check your work. Its self-check is a start, not a substitute: spot-check one more year’s total against your earlier counts, confirm map points fall within Philadelphia, and skim the table for obviously miscoded collision types.

Common pitfalls. Claude Code is a consumer/PI-purchased tool and not Drexel-supported — use it with Low Risk Data only, and as always, publish only non-sensitive data. Also, an agent that can write files can overwrite them: work in a dedicated folder, not your Documents directory, and review what it changed before you share the result.

Stretch (optional). Ask Claude Code to write a small script that regenerates dashboard.html from a fresh CSV download, so next year’s data update is one command.

Check your readiness

Answer these, then check — your score suggests whether to dive in or skim the readings first.

Useful resources

  • Quarto Dashboards — build dashboards from R/Python.
  • Shiny — interactive web apps from R or Python.
  • Plotly — interactive charts for web output.