@graphty/graphty-element
v1.9.3
Published
A Web Component library for 3D/2D graph visualization built with Lit and Babylon.js
Maintainers
apowers313Readme
@graphty/graphty-element
A Web Component for 3D/2D graph visualization built with Lit and Babylon.js.
Quick Start
npm install @graphty/graphty-element @babylonjs/core lit<!DOCTYPE html>
<html>
<head>
<style>
graphty-element {
width: 100vw;
height: 100vh;
display: block;
}
</style>
</head>
<body>
<graphty-element id="graph"></graphty-element>
<script type="module">
import "@graphty/graphty-element";
const graph = document.getElementById("graph");
graph.nodeData = [
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
];
graph.edgeData = [
{ src: 1, dst: 2 },
{ src: 2, dst: 3 },
{ src: 3, dst: 1 },
];
</script>
</body>
</html>Documentation
Features
- 3D and 2D Rendering - Full 3D graph visualization with camera controls, or simplified 2D mode (Camera Guide)
- Multiple Layout Algorithms - Force-directed, circular, hierarchical, and more (Layouts Guide)
- Rich Styling System - CSS-like styling with layers, selectors, and dynamic properties (Styling Guide)
- Interactive - Node dragging, hover effects, selection, and custom behaviors (Events Guide)
- Extensible - Plugin architecture for custom layouts, algorithms, and data sources (Extending Guide)
- Graph Algorithms - Built-in algorithms for analysis (Algorithms Guide)
- VR/AR Support - WebXR integration for immersive visualization (VR/AR Guide)
Browser Support
Graphty works in all modern browsers that support Web Components:
- Chrome/Edge 88+
- Firefox 78+
- Safari 14+
License
MIT
Inspired by three-forcegraph.