All examples
This page lists every interactive example available on this site. The Referenced in column shows which documentation pages embed each example.
Get started
Step-by-step tutorial examples
| Example | Links | Referenced in |
|---|---|---|
add-interactivity | embed · source | Add interactivity |
load-a-dataset | embed · source | Load a dataset |
quickstart | embed · source | Quickstart |
style-the-graph | embed · source | Style the graph |
Core features
Events, camera, viewport and performance
| Example | Links | Referenced in |
|---|---|---|
camera-control | embed · source | Camera and viewport |
custom-sizes | embed · source | Custom size handling |
drag-drop | embed · source | Drag and drop |
events | embed · source | Interactions and events |
fa2-gpu-datasets | embed · source | none |
fa2-gpu-layout | embed · source | none |
hover-search | embed · source | Hover and search highlight |
large-graph | embed · source | none |
multi-node-drag | embed · source | Drag and drop |
viewport-utilities | embed · source | Camera and viewport |
Styling
Nodes, edges and labels appearance
| Example | Links | Referenced in |
|---|---|---|
alpha-blending | embed · source | Colors and sizes |
backdrop-styles | embed · source | Backdrops |
custom-node-shape | embed · source | Shapes |
edge-extremities | embed · source | Extremities |
edge-label-styles | embed · source | Styles and positioning |
edge-styles | embed · source | Fill layers , Paths and colors |
label-attachments | embed · source | Attachments |
label-rendering | embed · source | Styles and positioning |
label-styles | embed · source | Styles and positioning |
node-borders | embed · source | Fill layers |
node-colors-sizes | embed · source | Colors and sizes |
node-hover-styles | embed · source | Styles and primitives |
node-images | embed · source | Fill layers |
node-layers-composed | embed · source | Fill layers |
node-piecharts | embed · source | Fill layers |
node-shapes | embed · source | Shapes |
parallel-edges | embed · source | Parallel edges and self-loops |
self-loops | embed · source | Parallel edges and self-loops |
Cookbook
Recipes for common graph visualization tasks
| Example | Links | Referenced in |
|---|---|---|
bipartite-network | embed · source | none |
cluster-labels | embed · source | Synchronize custom HTML/SVG elements |
csv-to-network | embed · source | none |
export-image | embed · source | Export as image |
independent-edge-labels | embed · source | none |
layouts | embed · source | none |
load-rdf | embed · source | none |
multiplex-network | embed · source | none |
rectangular-image-nodes | embed · source | Shapes |
Map layers
Geographic maps with Leaflet and MapLibre
| Example | Links | Referenced in |
|---|---|---|
leaflet-basic | embed · source | Geographic map layers |
leaflet-geojson | embed · source | Geographic map layers |
leaflet-tilelayer | embed · source | Geographic map layers |
maplibre-basic | embed · source | Geographic map layers |
maplibre-geojson | embed · source | Geographic map layers |
maplibre-styles | embed · source | Geographic map layers |
WebGL layers
Custom WebGL rendering layers and contours
| Example | Links | Referenced in |
|---|---|---|
heatmap | embed · source | Custom WebGL layers |
highlight-group | embed · source | Custom WebGL layers |
multi-levels | embed · source | Custom WebGL layers |