ChiasmCurran Kelleher May 2015

Data Visualizations

Data Systems

Chiasm

Chiasmconfiguration visualizations

configuration

Chiasm Runtime

Components

Plugins

updates

updates

creates

creates

creates

configuration:alias →

plugin: Stringstate:

property → value

Config Diff → Actions

● create(alias, plugin)● set(alias, property, value)● unset(alias, property)● destroy(alias)

do: Array<Action>

undo: Array<Action>

History Graph Navigation

Real-time Synchronization

Server

Client Client Client

do: Array<Action>

Chiasm

Reactivis

Model.js

Bar ChartScatter Plot Line Chart

Chiasm Bundle

D3

Layout

Links

CSVLoader

...

Plugins

Chorus

DummyVis

Chiasm

Reactivis

Model.js

Bar ChartScatter Plot Line Chart

Chiasm Bundle

D3

Layout

Links

CSVLoader

...

Plugins

Chorus

DummyVis

currently AMD modulesin “plugins” directory

Chiasm

Reactivis

Model.js

Bar ChartScatter Plot Line Chart

Chiasm Bundle

D3

Layout

Links

CSVLoader

...

Plugins

Chorus

DummyVis

should all beseparate repositories

Plugin Architecture

● use a plugin● create a plugin● test a plugin● bundle an application

package managers

module loaders& bundlers

testing frameworks

task automation

SystemJS+ ES6

Module Loader

package managers

module loaders& bundlers

testing frameworks

task automation

SystemJS+ ES6

Module Loader

current strategy

Bower & RequireJS

create a plugin:● create GitHub repo

● tag a release

● publish to Bower

use a plugin:● add Bower dependency

● modify RequireJS config

● modify Chiasm config

package managers

module loaders& bundlers

testing frameworks

task automation

SystemJS+ ES6

Module Loader

proposed strategy

JSPM & SystemJS

create a plugin:● create GitHub repo

● tag a release

use a plugin:● modify Chiasm config