Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Responsive Scatter Plot

Public visualization

Viewing a saved revision (read-only)

cff89061be2a44a99b2930018f982c86

Fork of Responsive Scatter Plot

0 stars0🌍 Public
SShazil Taqi
Last edited Apr 13, 2024
Created on Apr 13, 2024

This example presents a responsive scatter plot that visualizes the relationship between bill length and flipper length for penguins, using data from the `@curran/penguins` package. The plot renders as an SVG with gray axes, labeled axis titles, and semi-transparent circles, with axis scales recalculated automatically upon window resize via `@curran/responsive-axes`. The implementation follows a grammar of graphics approach, employing D3's `scaleLinear`, `extent`, and `axisLeft` APIs to map data coordinates, while the `observeResize` function triggers re-rendering with updated dimensions.

AI-generated description

A responsive scatter plot.