Home

Awesome

d3-state-visualizer

This package was merged into the redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests.

Enables real-time visualization of your application state.

Demo

Installation

npm install d3-state-visualizer

Usage

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();

Charts API

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

Tree

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

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

OptionTypeDefaultDescription
idString'd3svg'Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument
styleObject{}Sets the CSS style of the chart
sizeNumber500Sets size of the chart in pixels
aspectRatioFloat1.0Sets the chart height to size * aspectRatio and viewBox in order to preserve the aspect ratio of the chart. Great video if you want to learn more about how SVG works
widthBetweenNodesCoeffFloat1.0Alters the horizontal space between each node
heightBetweenNodesCoeffFloat1.0Alters the vertical space between each node
isSortedBooleanfalseSorts the chart in alphabetical order
transitionDurationNumber750Sets the duration of all the transitions used by the chart
tooltipOptionsObjecthereSets the options for the tooltip that is showing up when you're hovering the nodes
rootKeyNameString'state'Sets the first node's name of the resulting tree structure. Warning: only works if you provide a state option
pushMethodString'push'Sets the method that shall be used to add array children to the tree. Warning: only works if you provide a state option

More to come...

## Bindings

### Redux Dev tools

See this repository.

React

example implementation.

Roadmap