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.
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.
- 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.
- svg-width Sets the
widthattribute of the SVG element based on the value of model.width.
- svg-height Sets the
heightattribute of the SVG element based on the value of model.height.
- 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.
- g-transform Computes and updates the
transformattribute of model.g based on model.marginTop and model.marginLeft.
- 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).
This project is similar to:
The build tooling for this project draws from:
Previous initiatives that feed into this work: