Skip to main content
SimilarExport ZIP
100%

Simple Scatter Plot

✓ Published6🌍 Public
CCurran Kelleher
Last edited Jul 16, 2025
Created on Jul 8, 2025

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.

AI-generated description

Iris Dataset Scatter Plot

An interactive scatter plot visualization of the famous Iris dataset built with D3.js and the d3-rosetta library. This visualization demonstrates the unidirectional data flow pattern for creating reusable, framework-agnostic data visualizations.

Features

  • Scatter plot visualization showing the relationship between sepal length and sepal width
  • Asynchronous data loading with loading states and error handling
  • Responsive design that adapts to container dimensions
  • Clean architecture using the unidirectional data flow pattern
  • Modular codebase with separation of concerns

What it shows

The visualization displays:

  • X-axis: Sepal Length (cm)
  • Y-axis: Sepal Width (cm)
  • Data points: Each circle represents one iris flower sample
  • Dataset: 150 iris flower measurements from the classic iris dataset

Architecture

This project demonstrates modern D3.js patterns using d3-rosetta:

Core Pattern

  • Unidirectional Data Flow: Single viz function handles all rendering logic
  • State Management: Centralized state with immutable updates
  • Idempotent Rendering: Safe to call multiple times without side effects

Key Files

  • viz.js - Main visualization entry point
  • scatterPlot.js - Scatter plot rendering logic
  • loadAndParseData.js - Data loading and parsing
  • config.js - Visualization configuration
  • setupSVG.js - SVG container management

Utilities Used

  • createStateField() - Simplified state property management
  • one() - Single DOM element management
  • Async request handling with loading states
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for individual flower samples. Built with React and D3 v7, the visualization renders as an SVG, using `d3.csv` to load data from a GitHub-hosted CSV file. The code employs D3's `scaleLinear` for axis scaling, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each data point appears as a filled circle with a tooltip showing its sepal length value, while the axes are labeled "Sepal Length" and "Sepal Width." The visualization demonstrates a clean, functional scatterplot with interactive hover details.

AArefa Patwary
91% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal width and sepal length for individual flowers. The visualization uses D3 v5 functions like `scaleLinear` and `extent` to compute scales, while React components render SVG circles for each data point, complete with tooltips displaying the exact measurements. The chart includes styled axes with tick marks, and the data is loaded asynchronously via the `csv` function from a remote URL. The clean design, featuring teal markers and a Poppins font, emphasizes the distribution and correlation between the two sepal dimensions across the flower species.

Zzarioualid@gmail.com
91% match
Loading thumbnail…

Iris Scatter Plot v1

This interactive scatter plot displays sepal length against sepal width for the classic Iris dataset, with each of the 150 flowers represented as a teal circle positioned by linear scales. The visualization includes labeled axes with formatted tick marks and hover tooltips that reveal exact sepal length values. Built with React and D3 v7, the code uses d3.scaleLinear and d3.extent to map data coordinates to SVG space, while custom React components (AxisBottom, AxisLeft, and Marks) render the axes and circles from CSV data loaded via d3.csv.

JJohn Lewis
91% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the Iris dataset, plotting sepal width against sepal length for individual flowers. The visualization is rendered as an SVG using React components, with D3.v7 utility functions like `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map data values to pixel coordinates. The chart includes labeled axes with grid lines and translucent turquoise circles, each featuring a tooltip that reveals the exact measurements on hover.

Sszchee1
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. The visualization uses React with D3 scales to map data values to screen coordinates, rendering SVG circles as marks with native tooltips. Axes are generated using D3’s scaleLinear and tick methods, with formatted axis labels. The data is loaded asynchronously via D3’s csv function from a GitHub gist containing the classic Fisher iris measurements.

33ssalunke
91% match
Loading thumbnail…

Basic Scatter Plot with React & D3

This example shows the classic Iris flower dataset in a basic scatter plot. It plots sepal length on the x-axis against sepal width on the y-axis, with each of the 150 data points rendered as a small black circle. The code uses React for component state and effects, while D3 v7’s `select`, `scaleLinear`, and `extent` functions handle the SVG element selection and linear scale mapping. The data is loaded from a CSV file using D3’s `csv` method and passed to a reusable `viz` function for rendering, following a clean separation between React and D3 logic.

BBismark Kofi Owusu Sarfo
91% match
Loading thumbnail…

Basic Scatter Plot with React & D3

This example shows a basic scatter plot of the classic Iris flower dataset, plotting sepal length on the x-axis against sepal width on the y-axis. Each point is rendered as a black circle with a fixed radius of 12 pixels. The visualization is built with React and D3 v7, where React manages the component lifecycle and state, while D3's `scaleLinear` and `extent` functions compute the scales. The `csv` loader reads the data, and the `select` and `join` methods render the circles into an SVG element.

CCurran Kelleher
90% match