Scatter Plot with D3 Rosetta

100%

Scatter Plot with D3 Rosetta

✓ Published3🌍 Public

Last edited Jul 7, 2025

Created on Jul 3, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

IIrina Maystorovich

91% match

Loading thumbnail…

Simple Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationship between sepal length and sepal width across 150 flower samples. It uses D3.js v7 with the d3-rosetta library to implement a unidirectional data flow pattern, where a single `viz` function handles all rendering based on centralized state. The visualization loads data asynchronously with loading and error states, and includes responsive dimensions, axes with labels, and circle marks rendered via D3 scales and the `one` utility for DOM element management.

CCurran Kelleher

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

87% match

Loading thumbnail…

Scatter Plot with React & D3

This interactive visualization displays the Iris flower dataset, plotting sepal length over the dataset's row order. Users toggle between scatter plot and line chart views via React buttons, with species color-coded using d3.scaleOrdinal and a d3.schemeCategory10 legend. The D3 code builds linear scales, axes, and renders circles or a path using d3.line, while React manages state and the SVG element lifecycle.

BBismark Kofi Owusu Sarfo

86% match

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 within a React-free HTML page, leveraging `d3.csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. Circles are rendered via SVG with a fixed radius, and the code also destructures sepal dimensions but only uses them as unused attributes on each circle, not for positioning. The visualization fills the browser window with a large bottom margin.

RRohith arabati

86% match

Loading thumbnail…

1Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis for 150 individual flowers. The visualization is built using `d3.scaleLinear` for axis scaling and `d3.extent` to compute data domains, with React managing the SVG element lifecycle and state. It loads CSV data asynchronously via `d3.csv`, renders axes with `d3.axisBottom` and `d3.axisLeft`, and draws circles for each data point. The chart includes labeled axes and uses a fixed black fill for all points.

BBismark Kofi Owusu Sarfo

85% match

Loading thumbnail…

Scatter Plotting with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis, with each point colored by species (setosa, versicolor, or virginica) via a custom marker function. Built with React and D3 v6, it renders SVG circles using `select`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data. Axis labels and tick styling are customized with CSS, and the plot dynamically sizes to the browser window.

VVamsi Krishna

85% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers. The visualization uses React with D3 v5 scales and SVG rendering, with axes created by custom components. Data loads asynchronously via `d3.csv` and converts string values to numbers. Circles represent data points, and hovering reveals tooltips through SVG title elements, while axis tick formatting utilizes `d3.format` for compact notation.

Rrstrauss127

84% match