Enables real-time visualization of your application state.

Demo

npm install d3-state-visualizer

import { tree } from 'd3-state-visualizer';

const appState = {
  todoStore: {
    todos: [
      { title: 'd3'},
      { title: 'state' },
      { title: 'visualizer' },
      { title: 'tree' }
    ],
    completedCount: 1
  }
};

const render = tree(document.getElementById('root'), {
  state: appState,
  id: 'treeExample',
  size: 1000,
  aspectRatio: 0.5,
  isSorted: false,
  widthBetweenNodesCoeff: 1.5,
  heightBetweenNodesCoeff: 2,
  style: {border: '1px solid black'},
  tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2}
});

render();

The APIs are minimal and consists of a single function you provide with:

• a DOM element
• a plain old JS object for options.

This chart is a bit special as it accepts either one of the two following options, but not both:

• tree: a properly formed tree structure such as one generated by map2tree or react2tree
• state: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using map2tree.

Other options are listed below and have reasonable default values if you want to omit them:

More to come...

## Bindings

### Redux Dev tools

See this repository.

example implementation.

• Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.