🌍 Public
Viewing a saved revision (read-only)
ff8c7a0312dc4c86b7edcd5d45d3f743
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))),
);