Command Palette

Search for a command to run...

Hectal
Phase 0Beginner1 of 19 in Data Visualization

Start Here: A Chart Is Just Shapes

What you will learn, what you get, where you write code, and your first pictures in SVG and Canvas: a chart is numbers turned into shapes.

This phase is your map. Before any library, you find out what the whole course teaches, what you will be able to build at the end, and exactly where you will type your code: first in the editor on this page, then in one file on your own computer.

Then you draw. A chart is only shapes whose size or position comes from numbers, so you start with shapes: a bar, a circle, a smiley face, in both of the browser's drawing systems, SVG and Canvas. You see what each one is good at and how each one fails.

At the end you build the first page of the Lumen Bikes dashboard: a title, three boxes, and a week of rides drawn as seven bars by hand. Every later phase grows this same page.

Phase 0 · the story

Tomás, founder

“I have 365 days of rides in a spreadsheet and I still can't tell you how our year went.”

Lumen Bikes rents bikes from 25 stations across Ardenvale, a small island city in the Atlantic. On Monday morning Tomás, the founder, opens the spreadsheet of last year's rides: 365 rows, one number per day. He scrolls for a minute, then gives up.

"Were summers busy? Did the rain hurt us? Was there a bad day?" Every answer is in those numbers, but nobody can see it. The board meets in a few weeks, and he wants a page that shows the city's bikes at a glance.

So the team starts a dashboard. In this phase you meet the plan, set up the place where you will write code, and draw the dashboard's very first picture: last week's rides as seven bars.

In this phase

You will learn

  • Say what this course teaches, in order, and what you can build when you finish it
  • Write and run code in the editor on this page, and in a file on your own computer
  • Draw simple shapes in SVG and in Canvas, and explain how the two differ
  • Start the project folder you will grow for the whole course

You write code in

In the editor on this page, and in your own lumen-dashboard/index.html (no install needed)

Files you touch

  • index.html
0/7 · 0%
7 topics ~2 h 16 code blocks & diagrams
Start with the first topic
1
0.1

What You Will Learn and What You Get

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.

21 min 2 code practice

2
0.2

What a Chart Is

A chart turns numbers into shapes (lengths, positions, sizes, colours) so the eye can compare them in one look. It answers a question, and it can also hide or bend the answer if it is drawn carelessly.

23 min 3 code practice

3
0.3

Two Ways to Draw: SVG and Canvas

The browser can draw in two ways. SVG keeps every shape as an element you can find, style and click. Canvas paints pixels and forgets the shapes. Each is best at different jobs, and good chart developers use both.

22 min 3 code practice

4
0.4

Where You Write Code

You write code in two places in this course: the live editor on these pages (nothing to install), and from now on also one file on your own computer, lumen-dashboard/index.html, opened by double-clicking it. In Phase 4 the project moves to a small local server.

20 min 2 code practice

5
0.5

Your First Picture: a Smiley in SVG and in Canvas

Draw a smiling face twice: once with SVG tags (a circle, two eyes and a curved path) and once with Canvas commands. Along the way you meet the coordinate grid, fill and stroke, and the mistakes everyone makes first.

21 min 3 code practice

6
0.6

Your Project Folder

Your dashboard will grow into a small project with a clear folder layout: the page, the data, the code for loading data, one file per chart, shared parts and styles. Here is the final layout, what each part is for, and how it grows from a single index.html.

21 min 2 code practice

7
0.7

Build: The Dashboard's First Page

Turn your index.html into the first page of the Lumen Bikes dashboard: a header, three boxes, and last week's rides as seven bars you size by hand. It answers Tomás's first question: how did last week go?

20 min 1 code practice

Practise this phase

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

1

Size a bar from a number

Thursday 5 June had 3,742 rides. In this drawing, 1 pixel stands for 10 rides.

Beginner
2

Make room for a hidden circle

This SVG has no size, so it is 300 × 150 by default, and the orange circle at x = 330 is cut off.

Beginner
3

Give the face two eyes

Add two eyes to the face: circles with radius 10, filled #333, centred at (70, 80) and (130, 80).

Beginner
4

Paint a dot on a canvas

The canvas has no size yet. Give it width="120" and height="120" attributes (not CSS).

Beginner
5

The week in seven bars

Draw the dashboard's week chart. Monday's bar is already there. Add the other six days as <rect>s, using the build's rule:

Beginner