Visualization Editor

100%

Visualization Editor

✓ Published0🌍 Public

Last edited Mar 20, 2015

Created on Mar 18, 2015

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.

AI-generated description

A demo of the Chiasm visualization runtime engine. Demonstrates the nested box layout and basic setup.

Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations. Also, click and drag the X lines in the dummy visualizations to see the changes propagate to the configuration.

Similar vizzes

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

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

84% match

Loading thumbnail…

Chiasm Foundation

This example showcases the Chiasm foundation by composing three interactive visualization components within a nested layout. Using SVG, a dummy visualization component renders colored rectangles with draggable X patterns that dynamically adjust stroke width via mouse interaction. An HTML5 Canvas-based wave simulation responds to clicks, while the layout plugin arranges all components in a flexible vertical/horizontal nested structure. A links plugin connects the line width of component B to component C, demonstrating reactive dataflow between components. The page is set against a black background with the visualization container filling the viewport, and all components are coordinated through Chiasm's functional reactive model.

CCurran Kelleher

75% match

Loading thumbnail…

Visualization Editor

This interactive visualization, built with the Chiasm runtime, combines a scatter plot with lines and a line chart to explore temperature data from the Data Canvas - Sense Your City API. The lower line chart displays temperature over time for all cities, while the upper chart allows zooming via brushing, inspired by the D3 Focus+Context example. Brushing in the top chart filters the scatter plot to show only the selected time range. The editor uses reactive dataflow to update scales, axes, and brush interactions dynamically.

CCurran Kelleher

74% match

Loading thumbnail…

Visualization Editor

This interactive editor uses the Chiasm runtime to coordinate a linked bar chart and line chart, both fed by the Data Canvas Sense Your City API. The line chart displays temperature trends across seven cities over the past 24 hours, while the bar chart shows current temperatures; both update every five minutes. Users can hover over the line chart to filter the bar chart to a specific time slice via Crossfilter. A gear icon toggles a configuration editor, enabling interactive editing of properties like color scales and title text. The editor is implemented with CodeMirror and Inlet.

CCurran Kelleher

74% match

Loading thumbnail…

Chiasm Boilerplate

This example shows a Chiasm application that divides the screen into a hierarchical grid of colored rectangles, each of which changes color when clicked. The Chiasm framework coordinates the layout, while the `chiasm-layout` plugin computes nested boxes and the custom `coloredRectangle` component uses D3.js to render and transition rectangle fills. The code sets up five interactive rectangles in a treemap-like arrangement, with each click triggering a smooth color transition via D3's `transition().duration(500)`.

CCurran Kelleher

70% match

Loading thumbnail…

Visual Editor Prototype

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.

CCurran Kelleher

70% match

Loading thumbnail…

Visualization Editor

This visualization editor presents a live scatter plot and line chart showing temperature and humidity data for seven cities, fetched from the Data Canvas Sense Your City API. The scatter plot maps humidity against temperature with lines connecting city-specific series, while the line chart shows temperature trends over time. Users can interact with a configuration editor pane, adjusting visualization parameters through Chiasm’s reactive model, built with D3.js, CodeMirror, and the Inlet library. The runtime loads data continuously in 24-hour intervals, displaying five-minute resolution records with SVG rendering.

CCurran Kelleher

69% match