Command Palette

Search for a command to run...

Hectal
Phase 3Beginner4 of 19 in Data Visualization

Charts by Hand, No Library

Build bar, line and scatter charts with plain JavaScript and SVG: margins, scales, axes and nice ticks by hand, so you know what every chart library does for you.

Before you trust a chart library, you should know what it does. In this phase you build the three most common charts with no library at all: bars made of HTML boxes, then bar, line and scatter charts made of SVG shapes that plain JavaScript creates from your data.

You write the two ideas every chart needs by hand: the margin convention (a frame with room for axes) and a scale (a rule that turns a number into a position). You meet every awkward input on purpose: empty data, one value, all values equal, zero, negative numbers, missing days. Each one has a real symptom, and you see it.

At the end you draw all 365 days of Lumen's 2025 rides as a line with hand-made axes inside your own index.html. Then you list what hurt, and that list is the reason Phases 5 to 7 teach D3.

Phase 3 · the story

Arjun, engineer

“I want the team to understand what a chart library does for us before we trust one.”

Arjun is the one engineer at Lumen Bikes. Next month he will pick a chart library for the dashboard, and then the team will depend on it for years. Last time he trusted a library without looking inside, a chart showed a flat line, and nobody could say why.

So he asks the team for one afternoon with no library at all. "If we draw a bar, a line and a dot by hand, we will know what the library is doing for us, and we will know what to check when it goes wrong."

In this phase you spend that afternoon. You turn numbers into boxes, bars, a line and dots, you meet the empty, the zero and the negative, and you finish with a year of rides drawn by hand in the dashboard. You will also learn exactly which parts hurt, so every later tool has a reason.

In this phase

You will learn

  • Draw a bar chart, a line chart and a scatter plot with plain JavaScript and SVG
  • Write the margin convention and a linear scale by hand, with every edge case handled
  • Make axes with nice tick values by hand, and say what a library does instead
  • Draw all of Lumen's 2025 rides as a hand-made line chart inside your own index.html

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/6 · 0%
6 topics ~3 h 14 code blocks & diagrams
Start with the first topic
1
3.1

Bars with HTML and CSS

A bar chart can be a stack of coloured boxes whose width comes from a number. HTML and CSS draw it with tools you already know, and it is often all a small chart needs. It also teaches the first rule of every chart: turn a number into a size.

27 min 2 code practice

2
3.2

The Margin Convention and a Scale by Hand

Every chart needs two things before it draws a single mark: a frame with room around it for axis labels (the margin convention), and a rule that turns a data value into a pixel position (a scale). You write both by hand, including the inputs that break them.

33 min 3 code practice

3
3.3

A Bar Chart in Plain SVG

Build a bar chart from data with a loop: one SVG rectangle per row, with bar width and position worked out from the number of bars. Then meet the cases that break it: zero, negative and missing values, long names and sorting.

34 min 3 code practice

4
3.4

A Line Chart from Points

A line chart is one SVG path: a string of commands that moves a pen to the first point and draws to every next one. You build that string from your data, put time on the x axis, and decide what to do with gaps, a single point and 365 values.

33 min 3 code practice

5
3.5

Scatter Plots and Axes by Hand

A scatter plot puts one dot per row, with two numbers deciding where it sits. To read it, the chart needs axes: tick marks at round numbers, labels and gridlines. You write the rule for choosing nice ticks yourself, and meet overlapping dots and an outlier that squashes everything else.

34 min 2 code practice

6
3.6

Build: Rides This Year, Hand-Drawn

Draw all 365 days of Lumen's 2025 rides as a line chart with hand-made axes inside the dashboard's index.html. It answers Arjun's request: the team now knows what a chart library does, because they did it by hand.

34 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 three HTML bars

Three rows show rides: Monday 2,979, Tuesday 3,992 and Saturday 3,013. Tuesday is the busiest day, so its bar is 100% of the track.

Beginner
2

Move the plot area inside the margins

The SVG is 400 × 200 with margins top 20, right 20, bottom 30, left 50. The group #plot should start at the plot area's corner, and the frame inside it should be exactly the plot area's size.

Beginner
3

Write a linear scale

Write scale(v) so that 0 rides gives y = 160 and 4,000 rides gives y = 0 (the y axis is flipped). 2,000 should give 80.

Beginner
4

Turn points into a line

The array points holds five [x, y] pairs. Build the path text with M for the first point and L for the others, and put it in the d of #line. Keep fill="none".

Intermediate
5

A bar chart that survives empty data

render(rows) draws one SVG bar per row. With an empty array it should instead write No data into #msg and draw no bars, without any SVG error.

Intermediate