Fork of Visual Editor Demo

100%

Fork of Visual Editor Demo

✓ Published0🌍 Public

Last edited Aug 20, 2025

Created on Aug 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Visual Editor Demo

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.

XXiaojun

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

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

88% 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 React & D3 Starter

This visualization displays the classic Iris flower dataset as a scatter plot, plotting sepal length against petal length. It demonstrates a decoupled integration of React and D3, where the React component manages the SVG element lifecycle while D3 handles the rendering logic. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to compute scales and draw axes, with React hooks managing data loading via `useData`.

RRevanthGrreddy

86% match

Loading thumbnail…

Fork of Fork of React & D3 Starter-2

This example displays a scatterplot of the classic Iris flower dataset, using sepal length for the x-axis and petal length for the y-axis, with each point drawn as a semi-transparent circle. The visualization is implemented using React for the component structure and D3 v7 for the rendering logic, specifically leveraging D3's `scaleLinear`, `extent`, and axis functions to map data values to pixel coordinates. The SVG output is generated within a React wrapper that uses a `useRef` hook to pass the target element to the D3 visualization function. The data is loaded asynchronously via D3's `csv` parser, and the chart scales to the full size of the browser window.

RROU

86% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

A scatter plot of the classic Iris flower dataset, mapping sepal length against petal length and rendering each sample as a semi-transparent circle. The visualization is built with React, which manages the interface and data loading, while D3 v7 handles the rendering logic, including linear scales, axes, and SVG circle elements. It serves as a template demonstrating a decoupled React-D3 integration pattern, loading data via D3's CSV parser and using D3's scaleLinear for coordinate mapping.

IIndhuKrishnaraj

86% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatterplot of the Iris dataset, plotting sepal length against petal length for each flower sample. The visualization is built with React and D3 v7, where React manages the component lifecycle and D3 handles the rendering of circles, axes, and scales. The visualization uses D3's `csv` loader to parse the data, `scaleLinear` for coordinate mapping, and `axisLeft`/`axisBottom` for the axes, all output as SVG elements.

SSimone Tolomelli

86% match