Skip to main content
SimilarExport ZIP
100%

Scatter plot with menus

✓ Published1🌍 Public
Rrvdv
Last edited Jan 2, 2022
Created on Jan 2, 2022

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.

AI-generated description

https://www.youtube.com/watch?v=2LhoCfjm8R4&t=26861s

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

PPrashish Paudel
91% 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
91% match
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
90% 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
88% 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
87% match
Loading thumbnail…

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
87% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores the Iris dataset, plotting measurements like petal and sepal length and width as adjustable axes. Two dropdown menus let a user select which quantitative attribute drives the x- and y-axes, with axes labels updating accordingly. Built in React (v17) with d3.v7, it uses `scaleLinear`, `extent`, and reusable SVG axis and circle mark components. The axes and points render as SVG, formatted with a custom tick format that abbreviates large numbers.

AAlex Stulov
86% 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
85% match