reactive-vis

Reactive mixins for data visualization.

This project is about encapsulating dynamic behaviors that are common to many data visualization types. It is intended to be the foundation for authoring reusable interactive data visualization components that can easily be extended and composed.

API Reference

Each function is a "reactive mixin", meaning that it can be invoked using model.call. For all functions, the first argument model is an instance of reactive-model. Each function adds new properties and reactive functions to the specified model.

Note that names for nodes in the data flow graph diagrams follow the convention that camelCase names are properties with values, and dash-separated names reactive functions that have side effects but no returned value (typically these are DOM manipulations). Hyphenated names serve only to document what the reactive function does, they are never actually assigned values.

• SVG
• Margin
• Data

SVG

# ReactiveVis.SVG(model)

Properties added:

• model.svg An SVG DOM element. This may be set any number of times. This will be the root of the visualization DOM tree, and will be accessed by other mixins.
• model.width An integer representing the width (in pixels) of the SVG element. The default value is 960 (the default width of examples on bl.ocks.org).
• model.height An integer representing the width (in pixels) of the SVG element. The default value is 500 (the default height of examples on bl.ocks.org.

Reactive functions:

• svg-width Sets the width attribute of the SVG element based on the value of model.width.
• svg-height Sets the height attribute of the SVG element based on the value of model.height.

Margin

# ReactiveVis.Margin(model)

Encapsulates margins. Inspired by D3 Margin Convention. Depends on SVG.

Properties added:

• model.marginRight The right side margin (in pixels).
• model.marginLeft The left side margin (in pixels).
• model.marginTop The top side margin (in pixels).
• model.marginBottom The bottom side margin (in pixels).
• model.innerWidth The width of the inner rectangle, after margins have been applied. This is computed and updated based on model.marginRight, model.marginLeft, and model.width.
• model.innerHeight The height of the inner rectangle, after margins have been applied. This is computed and updated based on model.marginTop, model.marginBottom, and model.height.
• model.g An SVG <g> element, appended as a child to model.svg.

Reactive functions:

• g-transform Computes and updates the transform attribute of model.g based on model.marginTop and model.marginLeft.

Data

# ReactiveVis.Data(model)

Properties added:

• model.data This property accepts the input data for the component. Typically this is expected to be an array of objects (e.g. the output from parsing a CSV file using d3-dsv).

Related Work

This project is similar to:

• Vega
• C3
• Dimple
• NVD3

The build tooling for this project draws from:

• D3 Custom Bundle II
• rollup-starter-project

Previous initiatives that feed into this work:

• chiasm-charts
• Model.js
• Reactive Data Visualizations (pdf)