Chiasm is a browser based runtime environment and plugin architecture for interactive visualizations. It allows plugins for data access, data transformation, and interactive visualization to be loaded and configured dynamically.

Presentations on Chiasm:

• Chiasm presentation at Alpine Data Labs (slides) - May 2015
• Constructing Interactive Data Visualizations - Plans for Chiasm - February 2015

See also Model.js, which this project is built on.

thumbnail	description
	A demo of the Chiasm configuration editor and nested box layout.
	An example Chiasm configuration with a bar chart and line chart.
	The Chiasm kitchen sink (code), showing various configurations including scatter plot, line chart, and bar chart.
	An example demonstrating linked views and having a common color scale.
	A more complex example with linked views using Crossfilter and loading data from an API.

The core concept is that visualizations can be instantiated, configured with data, arranged on the screen, and coupled together to produce interactive linked views. A JSON configuration structure defines the entire state of an application. The configuration refers to plugins by name, which are loaded at runtime and called upon to instantiate instances of visualizations and other components. Configuration changes can be made at runtime, and Chiasm will propagate the changes through the system. The JSON configuration also updates in response to user interactions with visualizations, so can be used to serialize visualization state resulting from user interactions.

Please give this repo a star if you think it is cool. Also feel free to submit issues for feature requests, or reach out to me if you're at all interested in collaborating on this [email protected]

A configuration is a JSON object encapsulating an application state. This configuration contains specifications for a set of runtime components, each of which has:

• a unique name (called the "alias" of the component),
• an associated plugin that creates the runtime component, and
• a key-value dictionary specifying the state of the runtime component.

The configuration structure can be summarized as follows.

{ 
  alias -> {
    plugin: string,
    state: { property -> value }
  }
}

The runtime environment is responsible for synchronizing the JSON configuration with the running application. The runtime environment loads plugins referred to in the configuration using RequireJS. Each plugin is an AMD module that provides functionality to

• create a runtime component,
• manipulate the state of the component,
• listen for changes that occur within the component, and
• destroy the component.

This organization allows a dynamic configuration structure to drive the state of the application, and also allows changes resulting from user interactions with runtime components to be propagated to the configuration.

This diagram illustrates that

• Plugins create runtime components.
• Changes in configuration propagate to runtime components.
• Changes in runtime components propagate back to the configuration.

See also

• runtime module (chiasm.js) Documents exact configuration structure.
• runtime module unit tests Contains simple example plugins.

Here's documentation on how to create a Chiasm plugin.

The following sections describe foundational plugins that are included in the Chiasm project under src/plugins.

• bar chart
• line chart
• Scatter Plot
• Crossfilter

Targets for implementation as plugins include the following visualizations:

• Table
• Parallel Coordinates
• Stacked Area Chart
• Choropleth Map (using Leaflet)
• Calendar View

The following features common to many D3-based visualizations can reside in a separate module (prototyped in the Reactivis project):

• Margins
• Scales (X, Y, color)
• Axes
• Color Legend
• Brushing (draw a rectangle to select many records)
• Selecting (click/tap to select a single value)
• Hovering

If you're interested in contributing plugins, please experiment and get in touch! Feel free to email me at [email protected] or send a pull request with your work. I am looking for collaborators on this project.

The layout module provides tiled visualization containers using a nested box layout.

The above image is a simple example of a nested box layout, which can be configured by the following JSON structure.

{
  "orientation": "vertical",
  "children": [
    "A",
    "B",
    {
      "orientation": "horizontal",
      "children": [
        "C",
        "D"
      ]
    }
  ]
}

The following features are also present:

• Specifying relative (proportions to siblings) or absolute (fixed number of pixels) size of any node in the layout tree. Relative size makes sense for resizable visualizations, while absolute size makes sense for conventional UI widgets that only look good at a specific size in terms of pixels.
• Toggling visibility of components. When a component is marked as "hidden", it is excluded from the layout algorithm. This could be used to, for example, hide and show the JSON configuration editor when the user clicks on a "settings" button.

See also:

• computeLayout module unit tests
• layout plugin unit tests

The JSON Editor is an enhanced text editor for editing the configuration at runtime. Changes are propagated through the runtime environment to the instantiated plugins. When changes are made, only the differences are propagated through the system. This lays the foundation for undo/redo and real-time synchronization between many clients.

See also:

• CodeMirror - This provides the syntax highlighted code editor.
• Inlet - This provides interactive sliders and color pickers.

The DummyVis plugin is a simple example that demonstrates basic plugin structure and functionality. This plugin serves as a placeholder for real visualizations.

Features include:

• A colored background
  • Clicking on the background changes the color.
• A colored X that resizes to the plugin container
  • Clicking and dragging the X changes its size.
  • Clicking and dragging also sets the loading property for one second, to simulate asynchronous operations that may fetch data from a server.
• Text in front of the X.
• A progress indicator when a special property pending is set.

The Links plugin is for establishing bindings between runtime components. By specifying a link using the Links plugin in a configuration, the output resulting from a user interaction in one view can be used as input to another view. This is the foundation for linked views.

Plugins may be created for components that make requests to a server. The inputs and outputs of such components may also be bound to visualizations in order to establish linked views with an asynchronous step that leverages server-side capabilities.

The optic nerve fibres on the nasal sides of each retina cross over to the opposite side of the brain via the optic nerve at the optic chiasm. -- Wikipedia

The Chiasm was a junction of interdimensional networks and corridors that allowed for instantaneous travel over long distances of space. - Dr. Who

Chiasm, this project, relates to the above meanings of the word "Chiasm" in that it connects the "brain" of data to the "eyes" of users through interactive visualization. When Chiasm is set up to use an interactive data transformation like Crossfilter, the visualization system is an intersection of multidimensional "corridors" in data space, and interacting with it allows users to rapidly pivot and navigate through the data.