Scatter Plot with Menus

1. Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the Penguin Dataset, a cleaned CSV of penguin measurements, displaying relationships between physical attributes such as bill length, bill depth, flipper length, and body mass. Built with React and D3 v5, the chart renders circles as SVG marks, with two dropdown menus allowing viewers to dynamically change which numerical columns are mapped to the x- and y-axes. The visualization uses D3's `scaleLinear` and `extent` for axis scaling, `csv` for loading the data, and React's `useState` to manage menu-driven attribute selection.

92% match

Scatter plot with menus

This interactive scatter plot displays penguin measurements from a CSV dataset, allowing viewers to change both the x- and y-axes via dropdown menus while the points re-scale dynamically. Built with React and D3 v7 (including `scaleLinear`, `extent`, and `csv` for data loading), it renders as SVG circles with native `<title>` tooltips. Axis tick marks, labels, and a light grid are drawn in separate React components, with dot color fixed to dodger blue. The menus let users explore correlations among attributes like bill length, flipper length, and body mass.

Rrvdv

Rough of 1. Penguin Scatter Plot with Menus

This interactive scatter plot from the Observable-style D3.js gallery displays the palmerpenguins dataset. Two dropdown menus allow users to switch between different numeric attributes for the x and y axes. The scatterplot, rendered as SVG, plots species data points with tooltips showing the x-axis value. The React application uses D3 v5 modules for data loading and linear scaling, with axis components built from D3 scale ticks.

Polished Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the cleaned Palmer Penguins dataset, enabling comparison of six attributes such as bill length, flipper length, and body mass. Users select attributes for both the x- and y-axes via dropdown menus built with ReactDropdown. The visualization, rendered as SVG using React, employs D3’s `scaleLinear` for axis scaling and `extent` for domain calculation. Circles representing each penguin include a tooltip showing the x-value. The code uses the D3 `csv` module and a custom `useData` hook for data loading.

Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the Palmer Penguins dataset, allowing users to switch both the x- and y-axis attributes between bill length, bill depth, flipper length, body mass, species, and sex. Built with React and D3 v5, it renders the plot as SVG circles with tooltips, axes, and dropdown menus for dynamic attribute selection. The code uses `scaleLinear`, `extent`, and `format` from D3, with React hooks like `useState` and `useEffect` to manage state and load the CSV data via `d3.csv`.

Polished scatter plot with menus

This example shows a scatter plot of Palmer penguin measurements, where users can interactively choose which numerical or categorical attributes to plot on the x- and y-axes via two dropdown menus. The visualization uses React with the `react-dropdown` component for the controls, while D3 v7 functions like `scaleLinear`, `extent`, and `csv` handle data loading, scaling, and axis generation. The plot is rendered as an SVG, with marks drawn as circles and a tooltip showing the x-axis value on hover.

Rrvdv

88% match

Penguins Scatter

This interactive scatter plot visualizes the penguins dataset, allowing users to explore relationships between four physical measurements—bill depth, bill length, body mass, and flipper length—for three species. The visualization uses D3’s scale functions (`scaleLinear`, `scaleOrdinal`) to map data to SVG circles, with React managing state for axis selections and hover interactions. Users can switch the X and Y axes via dropdown menus, and hovering over a species name in the color legend highlights only that species’ points by fading others. The plot includes labeled axes and a legend, rendered with SVG elements and custom React components.

AAnthony Ynami

86% match