Fork of Simple Scatter Plot

100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public

Last edited Jul 16, 2025

Created on Jul 16, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

91% match

Loading thumbnail…

Fork of Iris Scatter Plot

This scatter plot visualizes the sepal length and width of Iris flowers from a CSV dataset. The visualization uses D3.js scaleLinear functions to map data to SVG coordinates within a React application. Axis components render tick marks and labels, while circular marks represent individual data points with tooltips. The code styles elements using CSS, including custom fonts and a teal color for the marks, and implements responsive loading with a "Loading..." indicator.

SSam Hege

91% match

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…

Fork of Scatter Plot

This visualization shows the relationship between sepal length and sepal width in the Iris dataset, with each flower represented by a circle. The scatter plot uses D3’s `scaleLinear` to map data values to SVG coordinates, with axes rendered by custom components that generate tick lines and labels. The React-based code loads the dataset via D3’s `csv` function, then lays out the plot within an SVG canvas, using a Poppins font and muted color palette for the marks and gridlines.

Aadewole-top

91% match

Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length to the x-axis and sepal width to the y-axis, with each point colored by species. The React component uses d3.scaleLinear and d3.extent to set the scales, while d3.csv loads the data from a gist. SVG circles are rendered with embedded tooltips showing the sepal length value on hover. The chart includes labeled axes, a bottom axis with tick formatting via d3.format, and a left axis, all built from custom React components that generate SVG elements.

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

91% match