# d3-state-visualizer > Visualize your app state with a range of reusable charts Latest version **3.0.0** (published 2024-04-07) · MIT license · 0 weekly downloads ## Install ```sh npm install d3-state-visualizer pnpm add d3-state-visualizer yarn add d3-state-visualizer bun add d3-state-visualizer ``` ## Health **Score 45/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 3.0.0 | | Published | 2024-04-07 | | First published | 2015-08-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 46.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 14367 | | Author | romseguy | | Maintainers | timdorr, romseguy, zalmoxisus, kachkaev, methuselah96 | | Keywords | d3, state, store, tree, visualization | ## Links - npm: https://www.npmjs.com/package/d3-state-visualizer - Repository: https://github.com/reduxjs/redux-devtools - Homepage: https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer - Issues: https://github.com/reduxjs/redux-devtools/issues - npm.io page: https://npm.io/package/d3-state-visualizer ## Dependencies (6) - [d3](https://npm.io/package/d3.md) ^7.9.0 - [ramda](https://npm.io/package/ramda.md) ^0.29.1 - [map2tree](https://npm.io/package/map2tree.md) ^4.0.0 - [@types/d3](https://npm.io/package/@types/d3.md) ^7.4.3 - [d3tooltip](https://npm.io/package/d3tooltip.md) ^4.0.0 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1 ## Alternatives - [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads - [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads - [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads - [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads - [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads ## Recent versions - 3.0.0 (latest) — 2024-04-07 - 2.0.0 — 2023-01-05 - 1.6.0 — 2022-01-25 - 1.5.0 — 2022-01-10 - 1.4.2 — 2022-01-08 - 1.4.1 — 2021-11-06 - 1.4.0 — 2021-03-06 - 1.3.4 — 2020-09-07 - 1.3.3 — 2020-08-14 - 1.3.2 — 2018-11-21 - 1.3.1 — 2016-11-25 - 1.3.0 — 2016-11-21 - 1.2.1 — 2016-10-14 - 1.2.0 — 2016-10-14 - 1.1.1 — 2016-07-31 - … 19 more at https://npm.io/package/d3-state-visualizer/versions ## README # d3-state-visualizer Enables real-time visualization of your application state. Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer). [Demo](http://reduxjs.github.io/d3-state-visualizer) ## Installation `yarn install d3-state-visualizer` ## Usage ```javascript 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, chartStyles: { 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: - a DOM element - a plain old JS object for options. #### Tree 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](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree) - `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree). Other options are listed below and have reasonable default values if you want to omit them: | Option | Type | Default | Description | | ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | String | `'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 | | `chartStyles` | Object | `{}` | Sets the CSS style of the chart | | `size` | Number | `500` | Sets size of the chart in pixels | | `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works | | `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node | | `heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node | | `isSorted` | Boolean | `false` | Sorts the chart in alphabetical order | | `transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart | | `tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes | | `rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option | | `pushMethod` | String | `'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... ## Roadmap - 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. --- _Source: https://npm.io/package/d3-state-visualizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._