Skip to main content
SimilarExport ZIP
100%

Fork of Responsive Scatter Plot

✓ Published0🌍 Public
Rrobertotienonyaranga@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

This example visualizes penguin measurements from the `@curran/penguins` dataset, plotting bill length against flipper length in a scatter plot. The chart filters out rows with missing values and uses D3 v6 to render SVG circles with adjustable opacity and radius. It employs `observeResize` from `@curran/responsive-axes` to make the visualization responsive, updating the chart dimensions on container resize. The code imports `viz` from `./viz` and `select` from D3 to manage the SVG element, with axis labels and grid styling handled through the `viz` function.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes the relationship between bill length and flipper length of penguins from the `@curran/penguins` dataset. The plot uses a responsive scatter plot where each circle represents a penguin, with its position determined by the two measurements. The visualization filters out missing values and uses D3's `scaleLinear` and `axisLeft` to construct the axes, while the `observeResize` utility from `@curran/responsive-axes` handles responsive resizing. The chart includes a light gray inner rectangle background and semi-transparent circles, with labels for both axes indicating the measured traits in millimeters.

Rrobertotienonyaranga@gmail.com
94% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows the relationship between bill length and flipper length in penguins, with each circle representing an individual bird and its species identifiable by color. The plot uses a responsive layout that adapts to the container size via `observeResize`, recalculating the SVG dimensions accordingly. The visualization filters out rows with missing measurements, then applies `d3.scaleLinear` for both axes and renders the data points as semi-transparent circles. It leverages the `@curran/responsive-axes` library to draw labeled axes and a light gray inner rectangle behind the plotting area. Data comes from the `@curran/penguins` dataset, which includes species, island, and morphometric measurements.

Rrobertotienonyaranga@gmail.com
92% match