Command Palette

Search for a command to run...

Hectal
Phase 18Advanced19 of 19 in Data Visualization

Interviews and Capstone

Answer data-visualization interview questions with working code, build a chart live in 30 minutes, design a metrics dashboard, debug broken charts, and ship your own Lumen dashboard.

This phase turns what you built into what a hiring team asks for. First, the concept questions: SVG against Canvas against WebGL, joins and keys, scales, accessibility, performance, testing, React and honest charts, each with an answer you can back up by running code.

Then the two rounds that scare people most. In a live-coding round you build a bar chart, a line with a tooltip and a sparkline in about 30 minutes while you talk. In a system-design round you plan a whole metrics dashboard on a whiteboard: data flow, rendering choice, real-time updates, states, accessibility and a performance budget.

Last, you learn to debug a chart the way a senior does (the NaN hunt, the blank SVG, the blurry canvas, the chart that is wrong but looks fine) and you finish the Lumen dashboard: a checklist across every phase, your own data bucket, and a published site.

Phase 18 · the story

Arjun, engineer

“The dashboard is done and live; now I have to hire the person who will keep it alive, and I don't know what to ask them.”

The Lumen dashboard has been on the wall screen for three weeks. Tomás showed it to the board. Meera uses it every morning. Priya has stopped asking for spreadsheets. The team is happy, and Arjun is tired: for a year he was the only one who understood the charts.

The company can afford one more frontend developer. Arjun has to write the interview. "I don't want trivia," he tells Priya. "I want to know whether someone can choose between SVG and Canvas, build a bar chart while they think out loud, and find out why a chart is blank." Preparing the questions makes him realise they are the same ones a candidate should practise.

In this phase you take both seats: the candidate's and the interviewer's. By the end you can answer the questions, build the charts under a clock, plan a dashboard on a whiteboard, debug with a method, and hand your own finished dashboard to the world.

In this phase

You will learn

  • Answer the common data-visualization interview questions with a clear sentence and a proof you can run
  • Build a bar chart, a line with a tooltip and a sparkline from a blank page in a timed round, and talk through your choices
  • Plan a metrics dashboard in a frontend system-design round, with numbers for the performance budget
  • Find the cause of a NaN, a blank SVG, a blurry canvas or a wrong-but-pretty chart with a repeatable method

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

  • src/utils/config.js
0/5 · 0%
5 topics ~3 h 15 code blocks & diagrams
Start with the first topic
1
18.1

Interview Questions: Concepts

The questions that come up again and again for data-visualization roles: SVG, Canvas or WebGL; joins and keys; scales; accessibility; performance; testing; React; honest charts. Each answer here is short enough to say aloud and backed by something you can run.

28 min 2 code practice

2
18.2

Live-Coding Rounds: Build This Chart in 30 Minutes

A live-coding round asks you to build a small chart from a blank page while someone watches and listens. You learn the clock, the order of work, what interviewers score, and three complete builds: a bar chart, a line with a tooltip and a sparkline.

33 min 3 code practice

3
18.3

Frontend System Design: a Metrics Dashboard

A frontend system-design round asks you to plan a whole product screen, not write one function. You practise the order of a good answer on a live metrics dashboard: requirements, data flow, rendering choice, real-time updates, states, accessibility and a performance budget with numbers.

31 min 2 code practice

4
18.4

Debugging Charts

Charts fail in four ways: they show NaN, they show nothing, they look blurry, or they look fine and are wrong. You learn one method (reproduce, shrink, observe, guess, change one thing) and apply it to each failure with real error messages.

30 min 3 code practice

5
18.5

Capstone: Your Lumen Dashboard, Finished

Put every part of the Lumen dashboard together, check it against a checklist from Phase 0 to Phase 17, point it at your own cloud bucket by changing one line, build it for production and publish the result. Then see where to go next.

34 min 5 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Timed: three sorted bars (10 minutes)

Interview-style task, about 10 minutes. Draw one bar per station into #chart for Quay (58,584 rides), Lantern (58,090) and Library (55,536), sorted with the largest first.

Advanced
2

Timed: a tooltip on a line (15 minutes)

Interview-style task, about 15 minutes. The line shows seven days at x = 20, 80, 140, 200, 260, 320 and 380. When the pointer moves over the chart, #tip must show the nearest day and its rides, as Wed: 3,759.

Advanced
3

Timed: a sparkline that survives odd data (5 minutes)

Interview-style task, about 5 minutes. Finish spark(values), which draws into #spark (an SVG 120 by 24) and is available as window.spark.

Advanced
4

Timed: find the NaN (10 minutes)

Interview-style task, about 10 minutes. The chart draws three days from a messy export, and one value is the text n/a, so a bar gets a NaN height and the console shows an error.

Advanced
5

Timed: make the canvas sharp (10 minutes)

Interview-style task, about 10 minutes. The canvas is 400 by 120 CSS pixels, but its backing store is the default 300 by 150, so it is stretched and blurry.

Advanced