Skip to main content
SimilarExport ZIP
100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public
MMohammed Jumail Shibily
Last edited Jun 29, 2021
Created on Jun 29, 2021

A scatter plot of the Iris Dataset rendered as SVG circles, with interactive dropdown menus to select which measured attribute (sepal length, sepal width, petal length, petal width, or species) maps to the x- and y-axes. Built with React and d3.scaleLinear for axis scaling, the visualization updates axis labels and tick formatting in real time as menu selections change, with tooltips showing formatted x-values on hover.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses D3.js scaleLinear for axis scaling and extent for domain calculation, with React managing the interactive dropdown menus. Users can select which attributes to plot on the X and Y axes via react-dropdown components, triggering state changes that update the SVG circles and axis labels accordingly. The plot renders using SVG elements, with each data point displayed as a circle with a tooltip showing its value.

AAnnie Ulichney
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes to plot on the x and y axes, while the SVG renders circles for each data point. Built with React, the example uses D3's `scaleLinear` for axis scaling and formatting. Hovering over a circle displays a tooltip with the corresponding measurement value. The interface includes axis labels that update dynamically based on the selected dimensions.

RROU
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset displays measurements like sepal length and petal width, letting users change which attribute appears on each axis via ReactDropdown menus. The visualization uses React for component structure and SVG for rendering, with d3.scaleLinear for axes and d3.csv for data loading. Circles represent individual flowers, and hovering reveals the numeric value through a native SVG title tooltip.

JJaya Durga V
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes from X and Y dropdown menus. Data points are colored by species using a d3.scaleOrdinal color scale. The React-based visualization uses d3.scaleLinear for axes, d3.extent for domain calculation, and renders SVG circles with native tooltips. Menu selections trigger state updates that re-scale the axes and reposition marks dynamically.

YYi-Qing
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the x- and y-axes via dropdown menus. The visualization is built with React and D3 v5, using D3 scales and SVG circles for rendering. Users can explore relationships between sepal and petal measurements across all species, with axis labels updating dynamically based on menu selections. The chart includes tooltips showing exact values, and axis ticks are generated from the D3 linear scales with custom formatting.

Cchris_nieber
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from two dropdown menus. Built with React and D3 v5, it renders SVG circles and axes using components like `scaleLinear` for scaling and `extent` for domains. The visualization updates dynamically through React state management, with dropdowns provided by ReactDropdown, and styling applied via Poppins typography.

MMar-99
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attribute appears on each axis. The visualization renders as SVG using React components, with D3 v5 handling data loading, scales, and axis generation. The implementation uses `useState` hooks to manage the selected attributes and ReactDropdown for menu interactions, while the `Marks` component renders circles with tooltips showing formatted values.

SSnapika
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotting sepal and petal measurements against each other. Two dropdown menus let users select which flower attributes appear on the x and y axes, updating the scales and axes dynamically. Built with React and D3 v5, the visualization uses `scaleLinear` for both scales, renders data points as SVG circles via components like `AxisBottom`, `AxisLeft`, and `Marks`, and loads data asynchronously with `d3.csv`. Axis labels and tick formatting follow the selected attributes.

CChintan Sawla
96% match