d3-state-visualizer

d3-state-visualizer

Enables real-time visualization of your application state. Demo

Installation

npm install d3-state-visualizer

Usage

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

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

const render = charts.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();

## Bindings

View components are now provided along with the charts, but it makes sense to have different repositories if this project gets some attention.

Plain React

TreeChart component.

import { components } from 'd3-state-visualizer'

const { TreeChart } = components;
const options = {
  id: 'chartSvgId',
  size: 1000,
  aspectRation: 0.5,
  heightBetweenNodesCoeff: 1,
  widthBetweenNodesCoeff: 1.5,
  style: {float: 'left'},
  tooltipOptions: {left: 0, top: 0, indentationSize: 2}
};

class MyApp extends React.Component {
  render() {
    return (
      <div>
        <TreeChart state={this.props.state} ...options />
        <Container/>
      </div>
    );
  }
}

example implementation.

Roadmap

• Provide more components such as DockedTreeChart
• Search box to filter the tree down
• Panning/zooming features for large state trees
• 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.