Fork of Visual Editor Demo

100%

Fork of Visual Editor Demo

✓ Published0🌍 Public

Last edited Aug 26, 2025

Created on Aug 26, 2025

This interactive scatter plot visualizes the classic Iris dataset, plotting sepal length against sepal width with each species color-coded. The visualization uses the d3-rosetta library for unidirectional data flow, allowing D3 v7 and React to work together while maintaining a single state. Users can adjust the point radius and left margin through a visual editor that updates the configuration via postMessage events. A loading state is shown while the CSV data loads asynchronously from config.json.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Visual Editor Demo

This visualization demonstrates a reactive scatterplot of the Iris dataset, displaying sepal length against sepal width with points colored by species. It uses D3 v7 for data loading, scales, and rendering marks, while integrating React for state management and the d3-rosetta library to enable unidirectional data flow. A config.json file drives interactive parameters like point radius and margins, which can be updated externally via window.postMessage, triggering automatic re-renders of the SVG visualization.

CCurran Kelleher

95% match

Loading thumbnail…

Visual Editor Demo

This demo shows how a visual editor could work, using sliders and widgets to tweak config parameters that control a scatter plot of the Iris dataset. The visualization renders sepal length against sepal width, with points colored by species from a configurable color scale. The code uses d3-rosetta’s `unidirectionalDataFlow` and `createStateField` to manage state, along with D3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling. It also listens for `postMessage` events to update the config dynamically.

CCurran Kelleher

90% match

Loading thumbnail…

Visual Editor PoC

This example demonstrates a proof-of-concept visual editor for interactive scatter plot configuration, displaying the Iris dataset with adjustable point radius via a slider widget. The visualization uses D3 v7 scales and axes for rendering, with d3-rosetta managing unidirectional data flow between state and DOM updates. Config parameters like margins, colors, and labels are loaded from JSON and can be modified through postMessage events.

CCurran Kelleher

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

86% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which measurement attributes are plotted on the x and y axes, with points colored by species. Built with D3.js v5 and rendered as SVG, the code uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` to construct the plot. The iris data is loaded via `d3.csv` from a linked gist.

Ssaivinay143

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

86% match

Loading thumbnail…

Fork of CV: Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying sepal length against sepal width for 150 flowers. Users can click individual data points to highlight them in yellow, with transitions animating the visual feedback. The React application uses D3 v7 methods like `scaleLinear`, `axisBottom`, and data joins to render axes and circles as SVG elements. A background iris flower illustration, decorative flower pot, and ornamental "SEEDS" text overlay enhance the visualization's aesthetic appeal.

JJohn A. Dodge

86% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length with semi-transparent circles. It demonstrates a scalable React and D3 integration, using React hooks (useState, useEffect, useRef) to manage data loading and the component lifecycle. D3 v7 handles SVG rendering and scales, including axis generation via d3.axisLeft and d3.axisBottom. The visualization fills the browser window, encoding each flower measurement as a point.

RRevanthGrreddy

85% match