1. Penguin Scatter Plot with Menus

100%

1. Penguin Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Apr 2, 2021

Created on Apr 2, 2021

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.

AI-generated description

A scatter plot of The Penguin Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

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`.

PPrashish Paudel

94% match

Loading thumbnail…

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.

PPrashish Paudel

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the penguins dataset, allowing users to choose which attributes appear on the x- and y-axes via dropdown menus. Built with React and the D3.js library, the SVG chart renders circles for each penguin, with axes and tick marks generated by D3's scale functions. The code imports data from a CSV file using D3's `csv` method. Tooltips show the x-axis value for each point, and axis labels dynamically update to reflect the selected attributes. The dropdowns use the `react-dropdown` library, while D3's `scaleLinear`, `extent`, and `format` utilities handle scaling and tick formatting.

Nnghosh319

92% match

Loading thumbnail…

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

91% match

Loading thumbnail…

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.

PPrashish Paudel

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

Scatter Plot of Penguin Dataset

This scatter plot displays the penguin dataset, mapping flipper length and body mass with colored circles that represent species (yellow for Adelie, green for Gentoo, brown for Chinstrap). It also encodes bill length and bill depth as circle radii, adding a second dimension of comparison. Built with React and d3.v5, the example loads CSV data via `csv`, scales with `scaleLinear`, and renders SVG circles with axes from `axisLeft` and `axisBottom`. Axis labels and a title are added manually, with styling applied through CSS.

NNithish Kumar

88% match

Loading thumbnail…

Scatter Plot for Penguin Dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping flipper length and bill length with points colored by species. Built with React and D3 v5, the visualization renders as an SVG with animated transitions. The code uses `d3.csv` to load data and `d3.scaleLinear` for axes, with `d3.axisLeft` and `d3.axisBottom` for chart scaffolding. A second implementation adds user controls through a D3 menu system, enabling dynamic re-mapping of axes.

NNavaneeth-Ragi

87% match