Visualization Editor

100%

Visualization Editor

✓ Published0🌍 Public

Last edited Sep 26, 2015

Created on Mar 19, 2015

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.

AI-generated description

This program makes a bar chart and line chart from data in the Data Canvas - Sense Your City API and makes use of the Chiasm visualization runtime engine.

The line chart shows the temperature for all cities with available data for the past 24 hours, while the bar chart shows the current temperature of each city. The data is up to date, and updates every 5 minutes. Colors code the lines to the city.

Hovering over the line chart causes the bar chart to display data for the selected slice of time only (using Crossfilter).

The gear icon lets you open the configuration editor. Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations. For example, you can edit the color scale used by both visualizations, or edit the title text.

Draws from

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1956323&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

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

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

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

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

80% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the latest temperature readings from seven cities, using live data from the Data Canvas - Sense Your City API. Built with D3 v3 and an SVG rendering approach, it follows a reactive model-based architecture: the chart derives its width, height, scales, and axes from a set of properties, automatically updating when data or configuration changes. The X axis displays city names sorted by temperature, while the Y axis encodes the temperature values. The visualization includes animated transitions, a title, and axis labels, and is implemented as a reusable module that supports sorting and customizable margins. The data updates every five minutes, reflecting the most recent sensor readings.

CCurran Kelleher

77% match

Loading thumbnail…

Colors

This example uses the Sense Your City API to visualize temperature data from seven cities. A line chart shows temperature trends over the past 24 hours for each city, while a bar chart displays current temperatures. Colors code the lines to the city, with palettes generated automatically using the LAB color space for optimal distinctness. The visualization updates every five minutes, and the line and bar charts are built with reusable D3.js modules, animated via SVG.

CCurran Kelleher

74% match

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

74% match

Loading thumbnail…

Untitled

This interactive line chart displays temperature data through time, with a dropdown to switch between Fahrenheit and Celsius scales. The visualization renders multiple city temperature series as smooth cardinal curves, using D3 v5 with SVG and animated transitions. A mouse-over interaction uses a bisector to find the nearest date, displaying a vertical guide line, value labels, and colored circles for each city at the hovered position. The y-axis updates dynamically with the selected metric via a smooth transition.

RResl411

73% match