Dataviz 2020_Ep34 - 26. Scatter Plot with Color Legend

100%

Dataviz 2020_Ep34 - 26. Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Jul 19, 2021

Created on Jul 19, 2021

Forked from Dataviz 2020_Ep33 - 26. Scatter Plot with Colors

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four physical measurements (sepal and petal dimensions) by selecting which variable appears on each axis via dropdown menus. D3.scaleLinear maps the numeric attributes to screen coordinates, while d3.scaleOrdinal assigns categorical colors to the three Iris species, displayed in a custom color legend rendered as SVG circles. The visualization uses React hooks to manage state, D3’s csv parser to load the data, and SVG marks with tooltips for each point.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 2020_Ep35 - 27. Interactive Color Legend

This scatter plot of the Iris dataset shows how petal and sepal dimensions vary across three species. An interactive color legend allows hovering over a species label to isolate its data points while dimming the others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping and SVG circles for marks. The dropdown menus let users select which quantitative attributes to plot on the x and y axes.

MMinwoo Pak

94% match

Loading thumbnail…

Dataviz 2020_Ep33 - 26. Scatter Plot with Colors

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. The visualization displays each flower as a colored circle, with the three species distinguished by a categorical color scale. Users can dynamically select which measurement to plot on the x and y axes via the dropdown menus. Built with D3 v6 for data loading and scaling, the chart uses React to render SVG elements, including axes, tick marks, and circles, with tooltips showing the y-value. Data is loaded from a remote CSV file using the `csv` function.

MMinwoo Pak

94% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

CCodeDuckie99

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, showing relationships between four measured attributes (sepal and petal length/width). Users can dynamically select which attributes appear on the x- and y-axes via dropdown menus, while a color legend distinguishes the three iris species. The visualization uses React with D3 v5 scales (d3.scaleLinear, d3.scaleOrdinal) for positioning and coloring, renders marks as SVG circles, and reads the data from a CSV using d3.csv.

RRiccardo De Lucia

93% 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

93% 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. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend distinguishes species using d3.scaleOrdinal. The visualization uses React to manage state and render SVG elements, with D3 scales (d3.scaleLinear, d3.extent) handling coordinate mappings and axes. Data loads asynchronously via d3.csv from a remote source.

Ttharuta

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements (sepal length, sepal width, petal length, petal width) by selecting attributes for the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding of species, and renders circles as SVG marks. React state management tracks the selected attributes, while d3.csv loads the data and d3.format formats axis tick labels, with a color legend indicating species.

CChristian Potdevin

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four measured attributes (sepal length/width, petal length/width) across three flower species. Dropdown menus dynamically change the x- and y-axis variables, while a color legend distinguishes species using a d3.scaleOrdinal with categorical colors. Built with React and d3.v5, the SVG-based visualization renders axes via custom components, circles with tooltips, and a color legend that updates proportionally to the selected attributes. Data is loaded asynchronously from a CSV file using d3.csv.

SSam Hege

93% match