Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in Neo4j Bloom and Explore(powered by Bloom). NVL is written in TypeScript and can be used in any JavaScript project. It is also available as a React component that can be used in React applications.
You can install the library with your preferred package manager, for example
npm install @neo4j-nvl/base
If you want to add common interactivity to the graph, you can install the NVL interaction handlers. If you are planning to use NVL in a React app, be sure to check out the NVL React wrappers.
This is a basic setup for a NVL instance.
const nodes = [{ id: '1' }, { id: '2' }]
const relationships = [{ id: '12', from: '1', to: '2' }]
const options = {
layout: 'forceDirected',
initialZoom: 0.5
}
const callbacks = {
onLayoutDone: () => console.log('Layout done')
}
const nvl = new NVL(document.getElementById('frame'), nodes, relationships, options, callbacks)
You can find more instructions and examples on how to use NVL in the docs.
In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior set the parameter disableTelemetry=true as a parameter in nvlOptions.