Vis.js

Vis.js is a dynamic, browser-based visualization library for creating interactive network graphs, timelines, and datasets. It's particularly powerful for visualizing relationships and temporal data.

Main Components

Component	Purpose
Network	Interactive graph/network diagrams
Timeline	Temporal data visualization
Graph2D	2D graph plotting
Graph3D	3D graph surfaces
DataSet	Reactive data management

Network Visualization

import { Network } from 'vis-network';

const nodes = new DataSet([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' },
]);

const edges = new DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 },
  { from: 3, to: 1 },
]);

const container = document.getElementById('network');
const network = new Network(container, { nodes, edges }, {
  nodes: {
    shape: 'dot',
    size: 20,
  },
  physics: {
    enabled: true,
    solver: 'forceAtlas2Based',
  },
});

Timeline Example

import { Timeline, DataSet } from 'vis-timeline';

const items = new DataSet([
  { id: 1, content: 'Task 1', start: '2024-01-01', end: '2024-01-15' },
  { id: 2, content: 'Task 2', start: '2024-01-10', end: '2024-01-25' },
  { id: 3, content: 'Milestone', start: '2024-01-20', type: 'point' },
]);

const timeline = new Timeline(container, items, {
  editable: true,
  stack: true,
});

Common Use Cases

• Org charts: Hierarchical organisation structures
• Knowledge graphs: Concept relationships
• Network topology: Infrastructure visualization
• Dependency graphs: Package/module dependencies
• Project timelines: Gantt-like scheduling
• Social networks: Relationship mapping

What We Like

• Interactivity: Zoom, pan, drag, and click built in
• Physics simulation: Nodes naturally arrange themselves
• Large datasets: Handles thousands of nodes
• Customisation: Extensive styling options
• Clustering: Automatic grouping of dense areas

What We Don't Like

• Learning curve: Many options can be overwhelming
• Bundle size: Can be heavy for simple use cases
• Documentation: Sometimes lacking examples
• Maintenance: Community-maintained, slower updates
• React integration: Requires wrapper components

Vis.js vs Alternatives

Library	Best For
Vis.js	General graphs and timelines
D3.js	Custom, low-level visualizations
Cytoscape.js	Complex network analysis
Chart.js	Standard charts (bar, line, pie)
ECharts	Large datasets, performance
Mermaid	Diagrams from text

React Integration

import { useEffect, useRef } from 'react';
import { Network } from 'vis-network';

function NetworkGraph({ nodes, edges }) {
  const containerRef = useRef(null);
  
  useEffect(() => {
    const network = new Network(
      containerRef.current,
      { nodes, edges },
      { physics: true }
    );
    
    return () => network.destroy();
  }, [nodes, edges]);
  
  return <div ref={containerRef} style={{ height: '500px' }} />;
}

When to Use Vis.js

• Interactive network/graph visualization
• Timeline and scheduling displays
• Relationship mapping
• Data exploration tools
• When physics-based layout is desired

For simpler charts, consider Chart.js. For highly custom visualizations, D3.js provides more control.