CSV Canvas Dashboard - Web Replay Lab

CSV data is filtered in JavaScript and then drawn as bars on a canvas, producing replay frames for data and graphics together.

Program

Applied browser examples combine data parsing and visual output. The keyframes track the data table shrinking before the chart changes.

csv_canvas_dashboard.html

<canvas id="chart" width="320" height="180"></canvas>
<script>
  const chart = document.querySelector("#chart");
  const csv = "day,status,count\nMon,open,4\nTue,done,3\nWed,open,6";
  const rows = csv.split("\n").slice(1).map(line => line.split(","));
  const openRows = rows.filter(row => row[1] === "open");
  const ctx = chart.getContext("2d");
  openRows.forEach((row, index) => {
    const count = Number(row[2]);
    ctx.fillRect(30 + index * 80, 140 - count * 16, 48, count * 16);
  });
</script>

data keyframes The replay can show parsed rows, filtered rows, and the rendered chart as separate steps.

canvas chart Canvas draws chart pixels from numeric data.