🌍 Public
Viewing a saved revision (read-only)
e803c7bf29d844c8922fa3f035c78709
Responsive Scatter Plot
This responsive scatter plot visualizes the relationship between bill length and flipper length in penguins, using data from the `@curran/penguins` package. The plot filters out rows with missing values before rendering circles with opacity and radius determined by the code. Built with D3's `scaleLinear` and `axes` from `@curran/responsive-axes`, it dynamically adjusts its width and height to fit its container using `observeResize`. The chart includes labeled axes, a gray inner rectangle, and updates interactively as the viewport changes.
AI-generated descriptionA demonstration of how to filter out missing data, leveraging Array.filter and isNaN.
const filteredData = data.filter(
(d) => !(isNaN(xValue(d)) || isNaN(yValue(d))),
);