Visualization Component

The visualization-component is a dynamic, interactive graph component built using D3.js. It is designed to render graphs based on provided JSON data, making it ideal for visualizing complex relationships and networks in an intuitive manner. The component supports various interactive features like hover effects, node dragging, and click events to reveal connections between entities. This makes it an excellent tool for exploring and understanding intricate data relationships.

Customization Options

Users can easily customize the web component by setting various properties:

• data: Input your JSON data for graph visualization.
• size: Adjust the size of the graph (default is '1350px,650px').
• showAttributes: Choose to show or hide attributes in the graph. Defaults to true.
• showPrimaryLinks: Choose to show primary links in the graph. If true it will show all the links between primary nodes. Defaults to true.
• excludeProperties: Specify any properties to exclude from the visualization.
• displayHovered: Enable or disable hover effects on graph nodes.

These properties allow for flexible configuration, catering to different data sets and visualization requirements, making the Visualization Component a versatile tool for data analysis and presentation.

Currently, in its [development/beta/stable] phase, is an evolving project, open to contributions and feedback from the community. Dive into the world of seamless data visualization with

How to run - For developers

To start using the component clone this repo to a new directory:

git clone https://github.com/kit-data-manager/visualization-graph-web-component.git

and run:

npm install

To run storybook in dev mode

npm run build
npm run storybook

Attention: Do NOT run npm run start. It will cause the storybook to not work properly. If you did run npm run start, delete the following folders and run npm install again:

• node_modules
• www
• dist
• loader
• .stencil