Static dataset

Until now, every chart used a hardcoded array at the top of the file. Time to load real data from a local file (JSON or CSV) sitting next to your code.

Members only
5 minutes read

Outline (draft)

  • Hook: hardcoded arrays at the top of every chart file don't scale. Real projects keep data in its own file.
  • The bundler trick: any modern bundler (Vite, Webpack, Next) imports JSON natively.
    import data from "./data.json" and you have a typed array.
  • Loading CSV: import the raw text (Vite: ?raw suffix) then parse with d3.csvParse(text). Result is an array of objects.
  • The string trap: d3.csvParse always returns strings. Coerce numbers and dates explicitly with + or new Date() before passing to scales.
  • Project organisation: where to put a /data/ folder, how to share the dataset between charts.
  • When imports break down: bundle size, dynamic queries, data that changes daily. Bridge to the next lesson on fetching.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! 🙏

← Previous

Project

Next →

Data fetching