Visual Editor Prototype

100%

Visual Editor Prototype

✓ Published0🌍 Public

Last edited May 23, 2022

Created on May 23, 2022

This example demonstrates a simple visual editor interface for configuring chart properties. It renders a control panel with a color picker and a range slider for adjusting bar color and border radius, respectively. The interface is built using React, with the App component mapping over a configuration array to generate labeled input controls. The layout uses flexbox and a dark background, with styling provided by a separate CSS file. The prototype does not yet include a live chart or data binding, focusing solely on the editor's UI structure.

AI-generated description

Rough first mockup / prototype for VizHub Visual Editor.

ISC Licensed

Similar vizzes

Loading thumbnail…

Visualization Editor

This example demonstrates a visualization editor built on the Chiasm runtime engine, where a configuration file drives the layout and properties of interactive dummy visualizations. The code uses the `configEditor` plugin to render a side panel with clickable numbers and colors, while the `layout` plugin arranges panels A, B, and C in a nested box layout. Dragging the X lines in the dummy visualizations propagates changes back to the configuration. The implementation relies on RequireJS, D3.js for JSON loading, and the Chiasm package system to wire together plugins at runtime.

CCurran Kelleher

70% match

Loading thumbnail…

Prototyp

This dashboard prototype demonstrates the integration of four distinct visualizations: a bar chart depicting Berlin district populations from 2005 to 2020, a line chart of cumulative COVID-19 cases with a brushable timeline for filtering, and two scatter plots exploring demographic data (LOR codes and population attributes) and COVID-19 statistics by age group. Built with React and D3 v6, the interactive visualizations feature dropdown menus for attribute selection, color legends with hover filtering, and data loaded from CSV files via `d3.csv`. Each chart component—axes, marks, and legends—is modularized within the React framework, rendered as SVG elements.

CChrisHeinirch

68% match

Loading thumbnail…

Visualization Editor

This animated demo of Chiasm, a visualization runtime engine, cycles through configurations that combine a bar chart and a line chart in a split view, alongside a live configuration editor. The interactive editor lets you modify chart properties—such as data bindings, axes, colors, and titles—and see the updates render instantly. Built with reusable D3-based plugins, the example demonstrates how different chart types and data sources can be composed dynamically, with the bar chart plotting letter frequencies and the line chart showing temperature over time.

CCurran Kelleher

68% match

Loading thumbnail…

Chart Editor

This example is an interactive organization chart editor. Users can select, edit, and add nodes, with a detail inspector for editing properties and a tree layout for hierarchical relationships. It uses GoJS for diagram editing and tree layout, and D3 v7 for additional data handling. Node colors shift by tree depth level, and the editor supports undo/redo.

FFereidoun Mianji

67% match

Loading thumbnail…

DatGUI Demo

This example showcases dat.GUI, a lightweight JavaScript library for creating on-screen control panels that manipulate variables in real time. The code instantiates a GUI object and populates it with a variety of input types, including text fields, checkboxes, buttons, sliders with defined minimum, maximum, and step values, dropdown menus, and color pickers. It also demonstrates organizing controls into nested folders and using the `remember()` method to preserve state. No data visualization occurs; the demo focuses exclusively on the GUI's API and its handling of different parameter formats like CSS strings, RGB arrays, and HSV objects.

Ddvinubius

66% match

Loading thumbnail…

Visualization Editor

This example demonstrates the Chiasm visualization runtime engine, which enables live configuration of visualizations through an interactive editor. The layout divides the screen between a configuration editor and two charts—a bar chart and a line chart—displaying data from CSV files. Users can click on numbers and colors in the editor to open interactive widgets that adjust the visual properties of the charts in real time. The runtime uses a reactive data model, where changes to the configuration JSON propagate to the visualizations instantly. The bar chart shows categorical frequencies from `simpleBars.csv`, while the line chart plots temperature over time from `simpleTime.csv`, styled with axes from a shared stylesheet. This setup demonstrates how Chiasm's reactive architecture enables dynamic, code-free customization of visualizations.

CCurran Kelleher

66% match

Loading thumbnail…

Untitled

This example shows a stylized dashboard layout in SVG, with minimal decorative elements like circular and oval shapes, small icons, and annotated lines drawn in grayscale tones. The visual centers on two large rounded rectangles that appear to frame data areas, flanked by bar-chart-like segments and small circular markers. The rendering uses React to produce static SVG markup, with no interactive or dynamic behavior. The included JavaScript and CSS files are referenced but not detailed, so the composition is purely presentational, illustrating a clean, grid-like interface design.

Ppreethamkesa

66% match

Loading thumbnail…

Untitled

This example demonstrates an interactive coloring book application built with the React framework and rendered on HTML Canvas. Users select colors from a customizable palette and apply them to images using a brush tool, with an eraser option and adjustable brush size. The component is implemented as a custom HTML element using JavaScript's Custom Elements API and relies on jQuery for DOM manipulation. Images are stored as static assets, and the interface includes navigation thumbnails, undo, clear, save, and print functions. The styling is controlled through CSS overrides, allowing for theme customization.

Sslawson48

66% match