Sigma.js

100%

✓ Published0🌍 Public

Last edited Mar 4, 2014

Created on Mar 4, 2014

This example demonstrates interactive graph visualization using the Sigma.js library, rendering nodes and edges as an animated canvas display. The graph structure is defined through explicit node and edge objects, with each node carrying properties like position, size, degree, and label, while edges track source, target, weight, and type. The code initializes a graph instance via Sigma's `sigma.classes.Cascade` and `EventDispatcher` APIs, adding nodes and edges through methods like `addNode` and `addEdge`. Rendering relies on canvas-based animation, with the library handling dynamic updates to node positions and display attributes. The data originates from a gist, and the visualization emphasizes network topology through adjustable node and edge scaling parameters.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes a network graph by rendering a JSON-graph file (wEFP.json) into an interactive display using the Sigma.js library, specifically the sigma.parsers.json API. The graph is loaded into a container with a fixed 400x400px size, and its nodes are colored with a default red (#ec5148). The rendering leverages Sigma.js’s built-in graph layout and canvas-based drawing, with the sigma.min.js core script handling the visualization. The setup is minimal, relying on Sigma’s parser to directly convert the JSON structure into a visual network.

00-1CxH

80% match

Loading thumbnail…

Document

This example demonstrates a graph network visualization using Cytoscape.js, rendered as an interactive SVG-like canvas within a styled div. It shows four nodes connected by three directed edges, with nodes colored blue and labeled by their IDs, while edges appear as black lines with triangle arrowheads. The code initializes the graph via the `cy()` function, specifying node positions, a grid layout, and interaction options like zooming and panning. It loads Cytoscape from UNPKG and includes local ES6 module usage, though the imported message remains unused.

Tthemis223

72% match

Loading thumbnail…

Gist 160b8b16e4775e57e6f7736c7739dfd9

This visualization uses D3.js to render a network of interconnected nodes, positioned with `d3.forceSimulation` and drawn as circles on an SVG canvas. The code applies a color scale to nodes based on their degree (number of connections), and uses `d3.drag` to make nodes interactive and movable. It reads data from a simple array defined in the script, and displays the graph without axes or geographic elements. The example demonstrates force-directed layout and basic interactivity, with node colors and link strokes providing visual encoding of network structure.

Aandrei-antal

69% match

Loading thumbnail…

Node Graph Editor

This interactive node graph editor uses D3.js to render a scalable vector graphic (SVG) canvas. The visualization initially displays a red rectangle that transitions to a blue color over three seconds with a bouncing easing effect. The code sets up a fixed SVG viewport with margins and uses D3’s transition and ease methods to animate the rectangle’s fill. The example demonstrates basic D3 selection, attribute setting, and animated styling within an HTML document.

JJaapSuter

69% match

Loading thumbnail…

Gist f8b83c150e82b21c7d6fcadc802fb986

This example visualizes a network of interconnected nodes and links, revealing the structure of a graph through spatial clustering and connective pathways. It uses a force-directed layout powered by `d3.forceSimulation` to position nodes, with `d3.drag` enabling interactive repositioning. The rendering relies on SVG elements for both nodes and links, with node fill colors and radii encoding categorical data and degree. The underlying dataset is a static JSON structure of nodes and edges, drawn using standard SVG `circle` and `line` primitives within a responsive viewBox.

PPeleke

69% match

Loading thumbnail…

Gist e899f735aa7a47c42f7b2604c713bfef

This example visualizes a force-directed graph using D3’s `d3.forceSimulation` to position nodes, with links drawn as SVG lines. The rendering approach uses Canvas `getImageData` to sample pixel data for a custom background effect, while Three.js handles 3D-like sphere rendering for node highlights. The code reads node and edge data from an embedded JavaScript object, and the simulation runs continuously with a `tick` handler updating node positions. A dropdown menu lets users filter the graph by cluster, though the filtering logic only updates node visibility without altering the underlying simulation forces.

AAlexDaGr8

68% match

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor lets users create, drag, and connect nodes with labeled links, highlighting selected edges with dashed styling. The visualization is built using D3 v5's force simulation for node placement and SVG elements for rendering, with graph interactions handled through mouse events in a React application. The code uses `d3.forceSimulation` to manage node positions and link forces, while CSS controls visual feedback such as cursor changes and stroke styles. The graph is displayed in a full-window SVG canvas.

00-1CxH

68% match

Loading thumbnail…

Gist 55f895140a45a82f47b1e9ae0a9e1b85

This example shows an interactive network visualization built with D3.js, where nodes are positioned using `d3.forceSimulation` with charge and link forces. The visualization renders a graph of connected circles, with each node colored and sized based on its data attributes, and links drawn as straight lines between them. The code uses the Canvas API to draw the network, iterating over the simulation’s nodes and links each tick to render positions. It also includes drag behavior via `d3.drag` to let users move nodes, with the simulation restarting on interaction. The data comes from a hardcoded JSON structure embedded in the gist, containing node IDs and link source–target pairs.

Aachalvs

68% match