Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

sleep data

Public visualization

sleep data

0 stars0🌍 Public
PPat Kwok
Last edited Jul 6, 2022
Created on Jul 6, 2022
Forked from React & D3 Starter

This visualization displays monthly Canadian economic data as a scatterplot, plotting implicit price index values over time from 1961 onward. Each circle represents a data point, with values derived from Statistics Canada’s CSV file, parsed to extract the year and numeric value. The React app uses D3’s `scaleLinear` and `extent` to map axes, while `csv` loads the dataset. Axes are rendered using `axisLeft` and `axisBottom` within a decoupled React-D3 architecture, where a wrapper component handles SVG rendering and the main `viz` function handles circles and scales.

AI-generated description

This viz is a starter that demonstrates patterns used in real world projects in which complexity is anticipated to scale.

  • Decoupled React & D3 integration
  • Opening moves for scalable complexity
  • Industry standard ES modules and JSX
  • Copy-paste into existing projects

Any questions? Ask on Twitter!

Also viewable in:

Comments

Sign in to join the discussion.

MIT Licensed