Skip to main content
SimilarExport ZIP
100%

categorical/quantitative transitory dynamic resusable d3 scattermap with options

✓ Published0🌍 Public
SSuperShreejit
Last edited May 14, 2022
Created on May 14, 2022

This interactive scatterplot displays Fisher’s Iris dataset, with dropdown menus to select categorical or quantitative attributes for the x- and y-axes. Built with React and D3.js, the visualization uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render axes, while `transition()` animates the points and axes as the user changes selections. The SVG rendering includes colored species markers with tooltips, and a dynamic legend updates accordingly.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Menu on Animated Reusable D3 Scatter Plot Following Along

This interactive scatter plot displays Fisher's Iris dataset with animated transitions between different variable pairings. Two dropdown menus let users select which measurements appear on the x and y axes, with all five attributes available for both dimensions. The visualization uses d3.scaleLinear for numerical values and d3.scalePoint for the species category, implementing smooth animations through d3.transition and the join/enter/update pattern. The chart renders as SVG with axis updates and label repositioning occurring over a one-second duration, while points drift to their new positions with staggered delays based on data index.

PParker-D5
87% match
Loading thumbnail…

Reusable D3 Scatter Plot (animated, menu)

This interactive scatter plot visualizes the Iris dataset, letting users dynamically select which flower measurements appear on the X and Y axes through two dropdown menus. Built with React and D3 v7, the visualization uses reusable chart components and SVG rendering to display data points as animated circles that smoothly transition between positions when axis selections change. The scatter plot employs d3.scaleLinear for coordinate mapping, d3.axisLeft and d3.axisBottom for scales, and d3.transition with a 1000ms duration to animate circle movements, while d3.csv loads the dataset from a remote URL.

PPeiyang Li
85% match
Loading thumbnail…

Polished Stylized Scatter Plot with Menus

This interactive scatter plot displays Fisher's Iris dataset, allowing users to select any of the five attributes for both the X and Y axes via dropdown menus. The visualization updates the axes, axis labels, and data point positions dynamically. Built with React and D3 v7, it uses `scaleLinear` for axis scaling and SVG circles for rendering data points. The chart features a polished Poppins font, styled tick lines, and a color scheme of teal and gray.

RRedSorrel
85% match
Loading thumbnail…

Stylized Scatter Plot with Menus

This example presents an interactive scatter plot of Fisher’s Iris dataset, letting users switch which flower measurements appear on the x- and y-axes via two dropdown menus. React manages the selected attributes and re-renders the SVG visualization, which is built with D3 scales (e.g., `scaleLinear`) and custom React components for axes and marks. Hovering over a circle reveals a tooltip with the formatted value of the x-axis variable for that point.

RRedSorrel
85% match
Loading thumbnail…

Dynamic Scatter Plot

This dynamic scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measured attributes through interactive dropdown menus. Built with React and D3.js, the visualization renders animated SVG circles that smoothly transition between positions when the X or Y axis selection changes. The chart includes axis labels, a title, and a legend, with data fetched from a CSV file. The code employs D3 modules like `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to handle scaling, axis rendering, and animation, while the menu interface uses a custom `menu` factory built on D3's `dispatch` event system.

SSubhamChhetri
85% match
Loading thumbnail…

Untitled

An interactive scatter plot explores the classic Iris dataset by Fisher, visualizing measurements of sepal and petal dimensions across three flower species. Dropdown menus allow the user to select which attributes appear on the x and y axes, while a color legend distinguishes species and fades non-hovered points. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and renders marks as SVG circles with tooltips.

TThe-World-Muda
85% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes Fisher's Iris dataset, with dropdown menus that let the user select which attribute is displayed on the x and y axes from options including sepal and petal measurements and species. The plot, rendered as an SVG using React, updates the axes and data points dynamically when the selection changes. The code uses `d3.scaleLinear` for axis scaling, `d3.extent` for domain calculation, and `d3.format` for tick labels, with data loaded from a CSV via `d3.csv`.

Ssagar limbu
85% match
Loading thumbnail…

11. Animated scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to select which quantitative attribute maps to the x- and y-axes via dropdown menus. Points smoothly animate to new positions with a staggered delay using D3 transitions when axes change. Built with D3 v7 and React, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the custom `scatterPlot` and `menu` modules handle SVG rendering and event-driven updates.

Kktshim@snu.ac.kr
84% match