Skip to main content
SimilarExport ZIP
100%

Polished Scatter Plot with Color Legend

✓ Published1🌍 Public
Ssmile2git
Last edited Jun 5, 2021
Created on Jun 4, 2021

This interactive scatter plot visualizes the Iris dataset, plotting sepal and petal measurements against each other. Users can select which attributes to display on the X and Y axes via dropdown menus, while the color of each point encodes the iris species. The visualization is built with React and rendered as SVG using D3 v5, employing `scaleLinear` for axes, `scaleOrdinal` for the categorical color scale, and custom React components like `Marks`, `XAxis`, `YAxis`, and `ColorLegend`. A color legend identifies the species, and tooltips display the formatted X-axis value for each data point.

AI-generated description

Loads Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Stylized Scatter Plot with Color Legend

This interactive scatter plot explores the Iris dataset, displaying relationships between sepal and petal measurements with points colored by species and a corresponding legend. Users can select which attributes to plot on the x and y axes via dropdown menus, dynamically updating the visualization. Built with React and D3 v7, the chart renders as SVG, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for axes, marks, and legends.

RRedSorrel
97% match
Loading thumbnail…

Polished scatter plot with color legend interactive

This interactive scatter plot displays the Iris flower dataset, mapping sepal and petal measurements to the x and y axes via dropdown menus. A color legend distinguishes the three species, with hovering over a legend item dimming all points except those of the selected species. Built with React and D3 v6, the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors, rendering SVG circles with accessible tooltips.

Ssophievanderhorst
95% match
Loading thumbnail…

Color Polished Scatter plot with menus with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the X and Y axes via dropdown menus. A color legend distinguishes the three iris species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading, rendering as SVG with reusable axis and mark components.

Nn.koldovsky@gmail.com
95% match
Loading thumbnail…

Scatter plot with Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic
95% match
Loading thumbnail…

Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. It uses React state to track the selected axes, dynamically updating the chart when users change the X and Y dropdown menus. The visualization renders as an SVG, with each species color-coded via a `d3.scaleOrdinal` color scale, and includes a color legend to identify species. D3’s `scaleLinear` handles the continuous axes, while custom `AxisBottom` and `AxisLeft` components render the ticks.

Sstephanie0215
94% match
Loading thumbnail…

Polished Scatter with color Plot, color Legend with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between measurements like petal length and sepal width. A color legend maps the three Iris species to distinct hues, and hovering over a legend item highlights only the corresponding species points while dimming others. Built with React and D3 v5, the chart uses D3 scales for axes and colors, with custom SVG marks for data points. Dropdown menus for selecting X and Y attributes are implemented using the react-dropdown library, and axes are rendered via separate components.

Bblackbottt
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch the X and Y axes among four numeric attributes, while a color legend distinguishes species using d3.scaleOrdinal with three categorical colors. The visualization renders as SVG using React components, with d3.scaleLinear handling axis scales and d3.extent computing domains. Marks are drawn as colored circles with tooltips showing values. The data loads asynchronously via d3.csv from a GitHub gist.

MMichael Bruno
94% match
Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus, while a color legend distinguishes species using a categorical d3 scaleOrdinal palette. The visualization is rendered as an SVG using React components, with d3 scaleLinear handling axis scaling and the d3 csv loader fetching the dataset. Marks are drawn as circles with tooltips showing the x-axis value.

CChris Knight
94% match