Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Visual Editor PoC

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

97b12b3826c74d829f13fb6f8988165b

Open

Visual Editor PoC

0 stars0🌍 Public
CCurran Kelleher
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

Interactive Scatter Plot

This application visualizes the Iris dataset as an interactive scatter plot using D3.js and the d3-rosetta library for unidirectional data flow.

Configuration

All configurable settings are stored in config.js, including:

  • Data visualization settings (axes, margins, labels)
  • Visual styles (colors, sizes, fonts)
  • Data source URL

To customize the visualization, modify the values in config.js.