Visual Editor PoC

100%

Visual Editor PoC

✓ Published0🌍 Public

Last edited May 18, 2026

Created on Jul 24, 2025

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.

AI-generated description

This is a PoC for some ideas around creating a "Visual Editor", with widgets like sliders and color pickers for tweaking config parameters.

Similar vizzes

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…

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

87% match

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

87% match

Loading thumbnail…

Polished Scatter Plot

This example shows an interactive scatter plot of the Iris flower dataset, with dropdown menus to select which measurements appear on the x- and y-axes. The visualization uses React class components in conjunction with D3 scales (scaleLinear, scaleOrdinal) to map sepal and petal dimensions to positions and colors by species. SVG circles render the data points, while D3 transitions animate the points to new positions when the axis selections change. The plot includes formatted axis ticks and tooltips displaying values on hover.

DDaniel Russell-Brain

80% match

Loading thumbnail…

D3 Example

This example visualizes the classic Iris dataset as a scatter plot using SVG, with axes and interactive hover effects that highlight individual points. The visualization is built using a reusable reactive architecture called Reactivis, which leverages D3’s data joins and scales to map sepal/petal measurements to x and y positions. It responds fluidly to browser resizing, as the layout dimensions are driven by CSS and propagated through the reactive data flow. The plot is styled with a dotted border, white background, and Poiret One font, and includes axis labels and tick formatting. The code is derived from a screencast tutorial and demonstrates how to structure D3 visualizations for reusability.

CCurran Kelleher

79% match

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements like petal length and sepal width as colored points. Users can explore the data by selecting different attributes from dropdown menus to change the x and y axes, while hovering over the color legend highlights points of a selected species and fades the rest. Built with React and D3 v5, the visualization uses scales and SVG rendering to create the chart, with React state managing attribute selections and hover interactions.

Ee-ines

78% match

Loading thumbnail…

Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements through dropdown menus that switch the X and Y axes. Points are colored by species, with a color legend that fades non-hovered points for focused comparison. Built with React and D3 v7, the visualization uses D3's `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering points as SVG circles. The code leverages React state for user selections and D3 utility functions like `csv` to load and parse the data.

Sstephanie0215

78% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes are plotted on the x- and y-axes via dropdown menus. The visualization uses React to manage component state and render SVG elements, with D3’s `scaleLinear`, `extent`, and `max` functions handling axis scaling and data mapping. Axis ticks and labels are generated through custom React components, while circles representing data points include tooltips using SVG `<title>` elements. The graph updates dynamically whenever the dropdown selections change.

AAudrey

78% match