Topic 0.1
What You Will Learn and What You Get
In one line
This course takes you from drawing one rectangle to building a live, fast, accessible dashboard. Here is the whole route, what you will be able to do at the end, and what you need before you start.
Think of it like this
Before a long train journey you look at the route map. You see every stop, where you change trains and where you arrive. Nothing on the map is hard, but knowing the whole route makes each stop make sense. This topic is the route map of the course.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- chart
- A picture where the size, position or colour of shapes comes from numbers, so the eye can compare them at once.
- data visualization
- Turning data into pictures that answer a question. Charts, maps and diagrams are all data visualizations.
- dashboard
- One page that shows several charts and key numbers together, so a team can see how things are going.
- SVG
- Scalable Vector Graphics: a way to describe shapes (rectangles, circles, lines) as tags inside a web page. The browser draws them sharp at any size.
- Canvas
- An HTML element that is a grid of pixels. Your JavaScript paints on it, like painting on a real canvas.
- D3
- A free JavaScript library of tools for charts: it turns numbers into positions, builds shapes and connects data to page elements. Most chart libraries are built on its parts.
- build-along
- A course where one project grows a little in every phase, so what you learn always ends up in something real.
Step by step
01Look at where you are going
Run the first example below. It loads the real Lumen Bikes data for 2025 and draws 12 bars, one per month. Don't try to understand the code yet: by Phase 7 you will have written every part of it yourself.
Look at the shape instead of the code. Rides climb from January to a peak in July and fall back in winter. That one look answers Tomás's question "how did our year go?" better than 365 rows of numbers.
02See the steps between here and there
The course climbs one step at a time. Each step uses only what the steps before it taught. The diagram shows the order.
03Make your first change
Open the second example. It is one SVG rectangle with width="120". Change 120 to 250 and press Run. The bar grows, and the Console prints the new width.
That is the whole idea of this course in one move: a number decides the size of a shape. A chart is that, repeated for every number in your data.
04Know what to do when you are stuck
Every topic has the same parts, in the same order: an everyday example, the problem it solves, the words you will meet, a step-by-step walkthrough, live examples, things to try, a "break it" section, and questions with model answers.
If something doesn't work: read the Console first (errors are printed there, in red), press Reset to get the original example back, and use the Ask AI button on the page to ask about the exact paragraph you are reading.
Try it yourself
- 1
Grow the bar
In the second example, change
width="120"towidth="250"and press Run. The bar is now about twice as long, and the Console printsThe bar is 250 pixels long. - 2
Make it longer than the drawing area
Change the width to
400. The SVG is only 320 pixels wide, so the bar runs off its right edge: you see it cut off at the border. Nothing warns you. The Console still saysThe bar is 400 pixels long.An SVG shows only what fits inside its own width and height. Phase 1.1 explains this "viewport". - 3
Read the preview's data
Under the first example, open Show the data. The first rows are January 2025, with one number of rides per day. The 12 bars are those 365 numbers added up month by month.
Code & diagrams
Real data: 365 days of made-up Lumen Bikes rides. Press Run, look at the shape, and open "Show the data" to see the rows behind it.
Preview
Console
Nothing logged yet.Expected console output
Days loaded: 365
Total rides: 933651
Busiest month: Jul 117803Try 250, then 400 (wider than the drawing area), then -5. The "Try it" and "Break it" sections below say what happens.
Preview
Console
Nothing logged yet.Expected console output
The bar is 120 pixels long.
The drawing area is 320 pixels wide.Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Give the bar a negative width
In the second example, set width="-5" and press Run.
Myth vs fact
Myth
You need to be good at maths to make charts.
Fact
School arithmetic is enough: multiply, divide, add. Every formula in this course (like "height = rides ÷ the biggest day × 160") is explained the first time it appears.
Myth
Charts are made with a chart library, so learning SVG and Canvas is a waste of time.
Fact
Libraries such as Recharts and Chart.js draw SVG or Canvas for you. When a chart looks wrong, is slow, or needs something the library can't do, you fix it by understanding what it draws. Phase 14 uses the libraries, with that understanding.
Myth
D3 is old and nobody uses it any more.
Fact
D3 7.9.0 is the current version, and its parts (scales, shapes, number formats) are inside Recharts, visx and nivo. npm counted about 98 million downloads of the d3 package in the month to 12 October 2026.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
The course teaches the layers in the order they depend on each other: the browser's drawing models (SVG DOM, Canvas bitmap), then the maths (scales), then the data join, then frameworks. Seniors who learned a chart library first usually meet these layers out of order, when something breaks.
- ▸
The preview runs D3 7.9.0 from Hectal's own server (not a CDN), the same version all course. When you read older tutorials, watch for D3 v3–v5 forms:
d3.event, callback-styled3.csv(url, callback), andenter().append().merge()everywhere. Topic 5.1 shows how to recognise them. - ▸
Everything in the course runs on one seeded, made-up data set, so every number in the text can be reproduced exactly. In your own work, keep a fixed sample of real data for the same reason: chart bugs are much easier to find when the data doesn't change under you.
Remember this
- 1
The problem this solves: charts look like magic until you know the steps. Without a map you copy chart code you don't understand, and it breaks the first time your data changes. With the map, every phase is one clear step towards a goal you can already see.
- 2
The route, in one story. First you draw shapes by hand: rectangles, circles, lines (Phases 0–1). Then you learn which chart answers which question (Phase 2), and you build real charts with no library at all (Phase 3). You load and clean real data files (Phase 4). Then D3, the toolbox most web charts are built on, takes over the arithmetic (Phases 5–7). Your charts learn to respond to the mouse and to move smoothly (Phases 8–9), to look right in every theme and on every screen (Phase 10). You draw with Canvas for huge amounts of data (Phases 11–12), make maps and networks (Phase 13), move everything into React (Phase 14), make it work with a screen reader (Phase 15), and run it as a live production dashboard (Phase 16). You finish with stories (Phase 17) and interviews (Phase 18).
- 3
One product the whole way. You build one thing: the operations dashboard of Lumen Bikes, a made-up bike-share company in the island city of Ardenvale. Each phase opens with a person from the team who needs something, and ends with a
buildtopic where the dashboard gets it. By the end you have a complete dashboard that loads real data, updates live, and works on a phone, on a wall screen and with a screen reader. - 4
What you get when you finish. You can draw any common chart (bar, line, area, scatter, histogram, heatmap, map, tree, network) from scratch in SVG or Canvas. You can read and change D3 code someone else wrote. You can add charts to a React app with a library such as Recharts, and say why you chose it. You can keep a chart smooth with 100,000 points, make it accessible, and handle loading, empty and error states. You can answer the chart and dashboard questions in frontend interviews. And you keep your own finished dashboard to show.
- 5
What you don't get. No certificate, and no promise of a job: nobody can honestly promise that. What you get is the skill, and a project that proves it.
- 6
What you need first. Basic HTML, CSS and JavaScript: tags and attributes, CSS selectors, variables, functions, arrays and loops. If any of those feel shaky, Hectal's
/html,/cssand/javascriptcourses cover them. You don't need maths beyond school arithmetic (every formula is explained when it appears), design training, or any installed software for the first four phases. - 7
How long it takes. Each topic is about 20–40 minutes of reading and trying. A steady pace of one or two topics a day finishes the course in a few months. Every topic is useful on its own, so you can stop after any phase with a skill you can use.
Explain it without notes
In your own words, what is a chart?
Why does this course draw charts by hand before it uses D3?
Name three things you will be able to build or do at the end of the course.
Practice
Look at the preview chart. Write down the busiest month, the quietest month, and one sentence that describes the year.
Change the second example so the bar is exactly half the width of the drawing area. What number did you use, and why?
Trade-offs
- ↔
Learning the layers first (SVG, Canvas, scales, joins) is slower to a first pretty chart than copying a library example, but much faster when a chart must be changed, debugged or made fast.
Done when you can
I can name the main stops of the course in order.
I can say what I will be able to build at the end.
I can run an example, change a number and run it again.
I know where errors appear (the Console) and how to get an example back (Reset).