Fork of Scatter Plot with D3 Rosetta

100%

Fork of Scatter Plot with D3 Rosetta

✓ Published0🌍 Public

Last edited Jul 5, 2025

Created on Jul 5, 2025

Forked from Scatter Plot with D3 Rosetta

This fork of a D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against sepal width and coloring each point by flower species. Users can hover over legend items to highlight corresponding data points, which receive a black outline and full opacity. Built with React and d3.v7, it uses the d3-rosetta library’s unidirectional data flow pattern to manage rendering and state. The chart features linear scales, axes via `axisBottom` and `axisLeft`, a categorical color scheme, and a loading state while parsing the CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with D3 Rosetta

This example shows an interactive scatter plot of the Iris dataset, visualizing sepal length and width with points colored by species. The visualization includes a legend that highlights data points of a species when hovered. It demonstrates the d3-rosetta library's unidirectional data flow pattern, using `one` for DOM element management and `createStateField` for state handling. The code uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` within a React framework.

CCurran Kelleher

91% match

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Built with D3.js and the d3-rosetta utility library, it uses a unidirectional data flow pattern, initializing with a loading state before rendering the axes, labels, and circular marks. Data is loaded asynchronously from a CSV file, with scales created via `scaleLinear` and `extent`. Axes are rendered using `axisBottom` and `axisLeft`, while SVG elements are managed through the `one` utility.

CCurran Kelleher

91% match

Loading thumbnail…

Fork of Scatter Plot - Iris Flower - Color & Legend

This scatter plot visualizes the Iris flower dataset, showing sepal length against sepal width with each species distinguished by color. A legend on the right maps the three species to their respective hues, while axes display the quantitative measurements. Built with React and D3 v6, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` for the color mapping, and renders SVG circles. The data is loaded asynchronously via `csv()` from a remote URL, with custom axis and legend components generated through D3 tick functions.

AAndres de la Garza

88% match

Loading thumbnail…

Fork of Iris Scatterplot

This fork of the classic Iris Scatterplot visualizes sepal length against sepal width using the Iris Dataset. The chart renders as an SVG with a teal circular mark for each data point. Built with React and d3.v7, it constructs its axes and scales using `scaleLinear` and `extent`, while `csv` loads the dataset. The `AxisBottom` and `AxisLeft` components generate ticks, and a tooltip showing a formatted value appears via the native SVG `<title>` element. The code includes a message function that summarizes the loaded data’s size and row count.

Ssaidhiraj16

88% match

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It also attaches sepal length and width values as redundant radius properties on the SVG circles, though these do not affect the visual size. The code loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom` in an SVG element within a React-less HTML page.

Rrohinikotha

88% match

Loading thumbnail…

Fork of Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for 150 flower samples. The visualization uses React to manage component state and lifecycle, with D3 v7 handling the rendering pipeline. D3’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` functions generate the axes and scales, while reusable modules for axes and labels keep the code modular. Circles are bound to the data via D3’s data join, with fixed radius and color. Data loads asynchronously from a CSV file and is parsed into numeric values before rendering.

Sskasliwal@wpi.edu

88% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This fork of a scatter plot visualizes the Iris Dataset, showing sepal width against petal length for individual flowers, with species determining color. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color scale, and a custom `ColorLegend` component. Data is loaded via D3’s `csv` function from a GitHub gist. The chart includes axis labels, formatted tick marks, and hover tooltips via SVG `<title>` elements.

RRoberto

88% match

Loading thumbnail…

Fork of Scatter Plot for Iris DataSet

This scatter plot visualizes the Iris dataset, displaying petal length and width for three species of iris flowers, each marked by a distinct color. Built with React and D3 v6, the visualization uses `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map values to SVG circle positions. The code creates axes with `d3.axisLeft` and `d3.axisBottom`, and applies non-standard `rx` and `ry` attributes to the circles, which are not used for scaling. Data is sourced from a GitHub gist.

Rrohinikotha

88% match