@adaptivekind/graph-gizmo
v0.0.28
Published
D3 interactive visualisation of a nodes and links in a graph
Readme
Link Graph
A D3.js-based link graph visualization library built with TypeScript.
See Live Demo
Features
- Interactive graph visualization using D3.js
- TypeScript support for type safety
- Configurable layout and styling
- Hot reload development environment
- Collision detection for node positioning
Installation
npm install @adaptivekind/knowledge-graphQuick Start
<!doctype html>
<html>
<head>
<title>Graph Gizmo Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-quadtree.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@adaptivekind/[email protected]"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adaptivekind/[email protected]/dist/default.css"
/>
</head>
<body>
<div id="gizmo" />
<script>
graphGizmo.render({
nodes: { a: {}, b: {}, c: {}, d: {}, e: {} },
links: [
{ source: "a", target: "b" },
{ source: "a", target: "c" },
{ source: "a", target: "d" },
{ source: "b", target: "c" },
{ source: "d", target: "e" },
],
});
</script>
</body>
</html>Development
Setup
npm installDevelopment Server
Start the development server with hot reload:
npm startThis will open http://localhost:3000 with a live preview of the graph.
Building
npm run build # Production build
npm run build:watch # Watch modeTesting
npm test # Run tests
npm run test:watch # Watch modeLinting
npm run lint # Check code style
npm run lint:fix # Fix issuesLicense
MIT