Scatter Plot with Color

100%

Scatter Plot with Color

✓ Published1🌍 Public

Last edited Aug 21, 2022

Created on Aug 21, 2022

Forked from Polished Scatter Plot with Menus

This interactive scatter plot explores the classic Iris dataset, allowing users to compare any two measured attributes (sepal and petal dimensions) by selecting them from dropdown menus. Each flower is rendered as a circle in SVG, with position mapped by the selected X and Y axes and color encoding species via a D3 `scaleOrdinal` color scale. Built with React and D3 v7, the visualization uses `scaleLinear` for axes and interactive dropdowns to dynamically re-bind the plotted data.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, letting users explore relationships between sepal and petal measurements across three flower species. Color encodes species, while dropdown menus dynamically select which attributes map to the x and y axes. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and SVG circles rendered by custom React components. Axis components generate ticks and labels, while `csv` loads the remote dataset. A native SVG `<title>` element provides hover tooltips.

AAudrey

96% match

Loading thumbnail…

Scatter plot with Colors

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which numerical attributes are plotted on the x and y axes. Each of the 150 flowers is rendered as a colored circle, with species mapped to a categorical color scale (`d3.scaleOrdinal`) using orange, teal, and purple. The chart is built with React and D3 v6, using SVG circles for marks and custom axis components that employ `d3.scaleLinear` for positioning.

Kkragovic

96% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Data Set, letting users explore relationships between four flower measurements. A dropdown menu for each axis allows selection of sepal length, sepal width, petal length, or petal width, with points colored by species. Built with React and D3 v6, it uses `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering SVG circles with tooltips showing formatted values.

RRMartins11

96% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus switch which numeric attribute appears on the x- and y-axes, while a categorical color scale distinguishes the three iris species. Powered by React and D3 v5, the SVG visualization uses `scaleLinear`, `scaleOrdinal`, and `csv` to load and render data from a GitHub gist, with axis and mark components built from reusable React functions.

Ccynichole

96% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React with d3.v5 scales, including scaleLinear for positioning and scaleOrdinal to encode species identity with distinct colors. SVG circles render the data points with tooltips showing exact values, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The code employs d3.csv for data loading and d3.format for axis tick formatting.

MMrMartin85

96% match

Loading thumbnail…

Scatterplot with color

This interactive scatterplot displays the Iris flower dataset, allowing users to compare any two measured attributes (sepal and petal length/width) by selecting them from dropdown menus. Each flower is rendered as a colored circle, with species distinguished through a d3.scaleOrdinal color mapping. The visualization uses React state to manage selections and render SVG marks, while d3.csv loads the data and d3.scaleLinear scales map attribute values to x and y positions. Axes are generated manually from d3 scale ticks, and hover tooltips show formatted values via SVG `<title>` elements.

MMarco Malvicini

95% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The chart uses color encoding to distinguish species, with dropdown menus to switch which quantitative attributes are plotted on the x- and y-axes. Built with React and D3 v5, it renders SVG circles for each data point, using d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.extent for domain computation. Data is loaded asynchronously via d3.csv from a remote source.

SSam Hege

95% match

Loading thumbnail…

Scatterplot w/ color

This interactive scatterplot visualizes the Iris dataset, plotting petal length and sepal width on the x- and y-axes, with points colored by species. Two dropdown menus allow users to switch which flower measurements are displayed on each axis. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for rendering SVG axes and circle marks.

MMichael Bergerson

95% match