Lab 1: Getting Started with D3.js

Assignment — Student Score Bar Chart

Each bar is one student, and the height of the bar encodes their score. The data is loaded at runtime from data/students.csv with d3.csv, and the bars are created with D3 data binding — no rectangle is written by hand.

Task 2 — Set up D3

Original message

D3 is loaded from a CDN before this page's own scripts. Its version number is logged to the browser console.

Task 3 — Understanding the DOM

3.3 and 3.4 — Selecting and styling

The heading directly above was restyled with d3.select and chained .style() calls.

3.5 — Adding elements

3.6 — Data binding

Task 4 — SVG

4.1 to 4.3 — SVG written by hand

4.4 — The same shapes built with D3

4.5 — Several circles from data

Task 5 — Loading CSV and JSON

Both tables below are loaded at runtime from the data/ folder with d3.csv and d3.json — nothing here is typed into the HTML. They are also logged to the console.

data/students.csv

data/students.json