Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
d3-state-visualizer
Advanced tools
Enables real-time visualization of your application state.
Created by @romseguy and merged from reduxjs/d3-state-visualizer
.
yarn 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:
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 react2treestate
: 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:
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 |
style | 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 in order to preserve the aspect ratio of the chart. Great video 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 | Sets the options for the tooltip 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...
## Bindings
example implementation.
FAQs
Visualize your app state with a range of reusable charts
The npm package d3-state-visualizer receives a total of 4,484 weekly downloads. As such, d3-state-visualizer popularity was classified as popular.
We found that d3-state-visualizer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.