d3-state-visualizer

d3-state-visualizer

Enables real-time visualization of your application state. Demo

Installation

npm install d3-state-visualizer

Usage

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

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

// only 2 function calls and you're done!
const initialize = tree();

const render = initialize(d3, document.getElementById('root'), {
  state: appState,
  id: 'treeExample',
  size: 1000,
  aspectRatio: 0.5,
  isSorted: false,
  widthBetweenBranchCoeff: 2,
  heightBetweenNodesCoeff: 1.5,
  style: 'border: 1px solid black'
});

render();

## Bindings

Plain React

example implementation.

Roadmap

• Visualize React component hierarchy.
• Connect visualizations of the state with the component hierarchy of your application. This would allow to get a bird's eye view of your components' data dependencies.
• Provide example integrations with Redux and Mobservable.