Fork of Fork of Fork of Stylized Scatter Plot

100%

Fork of Fork of Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Dec 30, 2021

Created on Dec 30, 2021

Forked from Fork of Fork of Stylized Scatter Plot

This interactive scatter plot lets users explore the classic Iris flower dataset by switching the x and y axes between sepal and petal measurements. Color encodes the three iris species, and hovering over a legend item fades all non-matching points to emphasize that group. The visualization uses D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, with React managing component state. SVG rendering draws axes, circles, and the color legend, with native `<title>` elements providing tooltips.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare flower measurements through dropdown menus that control the x and y axes. The visualization uses React with D3 v5 scales and SVG rendering, featuring a color legend that distinguishes iris species. Hovering over a legend item highlights matching data points while dimming others. The code employs `d3.scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data parsing and scaling.

Sstefanpullen

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.format for tick labels, with SVG circles rendered through React components. Data is loaded asynchronously using d3.csv from a GitHub gist, and the chart includes styled axes with tick marks, axis labels, and hover tooltips.

Sstefanpullen

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization displays points colored by species, with dropdown menus to select which measurements appear on the x and y axes, and maintains a color legend that highlights points of a selected species while dimming others. Built with React and d3.js using the `scaleLinear` and `scaleOrdinal` functions, the plot renders as SVG with custom axes and mark components.

Ssteelerfan107

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length and sepal width on the x and y axes while coloring each point by species. Built with React and D3 v5, the SVG chart uses `scaleLinear` and `scaleOrdinal` to position and color the circles, with a custom color legend and hover tooltips. The visualization eschews traditional chartjunk in favor of a minimalist design that emphasizes clear data-ink ratio through its stylized axes and typography.

Qqtrfx

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species, color-coded and accompanied by a legend. Hovering over a legend item dims all points except those belonging to that species. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scales, with custom SVG axes and a color legend. Data is loaded via `d3.csv` from a GitHub gist.

JJuan Raul de la Guardia

94% match

Loading thumbnail…

Fork of Stylised Iris Scatterplot Graph

This interactive scatterplot 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 appear on the x- and y-axes, with scales and axes updating dynamically. The visualization uses React for state management and component rendering, while d3.scaleLinear handles axis scaling and d3.csv loads the data. Each point is rendered as an SVG circle with a native tooltip, styled with the Poppins font and teal color scheme.

Qqtrfx

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and renders SVG circles as marks, with tooltips showing exact values. The code imports data via `d3.csv` from a GitHub gist, while custom React components handle axis rendering and mark placement. A Poppins font and teal color scheme give the plot its stylized appearance, with loading state shown until data arrives.

Ppakoensi

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris Dataset, mapping petal length and sepal width to the x- and y-axes. Each data point is rendered as an SVG circle colored by species, with a legend and tooltips. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom components like `AxisBottom` and `Marks` for layout.

SSandyWu7179290504

94% match