Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Mar 13, 2021

Created on Mar 12, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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 different attributes from dropdown menus. The visualization uses React with d3.scaleLinear for positioning, d3.csv for data loading, and d3.format for axis tick labels. Rendered as SVG, the plot displays circles for each data point with axis labels and tick marks styled by the Poppins font.

RRED98310

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 four flower measurements (sepal and petal length/width) and species. Two dropdown menus, implemented as React components, let viewers independently select which attributes appear on the x- and y-axes. The visualization uses d3.scaleLinear for coordinate mapping, with React managing state updates and SVG rendering ticks, circles, and axis labels. Data loads asynchronously via d3.csv from a remote gist, and each data point includes a tooltip showing its exact value.

SShaneBowen1

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

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

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width. Users can select which attributes to plot on the x-axis and y-axis via dropdown menus, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses d3.scaleLinear for scaling, d3.extent for domain calculation, and SVG circles for data points. Each point includes a tooltip showing its x-axis value. The data loads asynchronously from a CSV file using d3.csv.

Cchamce

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 by switching the X and Y axes via dropdown menus. Built with React and D3 v5, the SVG renderings use d3.scaleLinear for axes and d3.extent for data domains. The code explicitly parses numeric CSV values and renders circles for each data point.

AAnkit-Ian-53787

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, comparing sepal width against petal length for individual flower specimens. The visualization uses React components to render SVG circles, with d3-scale’s `scaleLinear` mapping data values to pixel coordinates and d3-format’s `format` function for axis tick labels. Axes are built as reusable React components, and hovering over any point reveals its exact petal length via SVG `<title>` tooltips. The design features a clean, stylized aesthetic with Poppins typography and muted teal-colored markers.

Wweny1109

94% match