Skip to main content
SimilarExport ZIP
100%

Gist babc8f75061b530146ff

✓ Published0🌍 Public
JJonasHeylen
Last edited Feb 4, 2016
Created on Feb 4, 2016

This example demonstrates how a small graph can be converted into a linear system of equations and solved to compute node positions, here yielding values scaled to 50, 100, and 50 for nodes a, b, and c. It shows the process from defining nodes and weighted edges through constructing a matrix equation, solving it with NumPy’s `np.linalg.solve`, and rescaling the result. The visualization relies on Python code and array operations rather than a plotting library, with the final output presented as a list of node–value pairs.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 1b4899c75f0bfa91bbe6865157c3f87f

A force-directed graph places five labeled nodes on a Canvas, with each node’s position set by an explicit `x,y` coordinate pair from a hardcoded dataset rather than computed by simulation. The visualization uses `d3.forceSimulation` to manage node physics while a custom `tick` function redraws the scene via the Canvas 2D API. Edges are omitted, so the example focuses solely on spatial layout and node rendering, with node radii scaled by a fixed value. The data source is a simple inline array, and no interaction or animation beyond the initial layout is implemented.

FFerjopero
63% match
Loading thumbnail…

Matrix Graph

This matrix graph visualizes a network of 200 nodes and over 500 edges as a symmetric adjacency matrix. Each row and column represents a node, and a colored square marks the presence of an edge, with the plot mirrored along the diagonal to show both directions of each connection. The visualization is built with the p5.js library, loading edge data from a CSV file and sorting unique node IDs to calculate grid positions. Hovering over a square highlights it and reveals the corresponding node labels along the axes, and the code also draws the transpose position for each edge.

SShayRomayo
62% match
Loading thumbnail…

Gist b1e226dee3873401d52d4d7e4b9d9577

This example visualizes a clustered network of nodes using a force-directed layout, with three distinct groups highlighted by color. The graph is rendered on a Canvas element, and the simulation is powered by `d3.forceSimulation`, which computes the positions based on link and charge forces. The data appears to be a small hand-authored set of nodes and edges, likely from a Gist, and the visualization updates dynamically as the simulation runs, with each node’s position and radius drawn explicitly via Canvas drawing calls.

TTheLady
61% match
Loading thumbnail…

Node-Link Graph

A force-directed node-link graph visualizes a network of 200 nodes and over 400 undirected edges derived from a CSV file. The p5.js sketch implements a custom layout simulation, iteratively calculating repulsive forces between all node pairs and attractive forces along edges to position vertices. Nodes are rendered as purple ellipses, edges as black lines, and hovering over a node highlights its adjacent edges in cyan while displaying the node ID. The code uses p5.js functions like `loadTable`, `dist`, and `ellipse` to handle data loading, interaction, and drawing.

SShayRomayo
61% match
Loading thumbnail…

Gist 3e83522b4fd1d103c56977dac9442a3e

This example visualizes a force-directed network graph, showing nodes and edges arranged in a cluster layout. It uses D3’s `d3.forceSimulation` to compute node positions and `d3.forceLink` for edge constraints, rendering the result as an SVG. The graph data is generated locally in the code via a helper function that builds node and link arrays, with node colors reflecting a categorical scale. The visualization updates positions on each simulation tick, producing an interactive, animated network layout.

MMistyBlunch
60% 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
60% match
Loading thumbnail…

Gist 229dead74b506a3511cf501fa1075ace

This example visualizes a network graph using D3.js, showing nodes and edges with forces that pull elements together or push them apart. It relies on `d3.forceSimulation` to compute physics-based layout dynamics, while `d3.select` and the Canvas API render the moving particles and links. The data appears to be generated procedurally rather than loaded from an external file, with nodes positioned and colored via a custom loop. The code also integrates a minimal HTML structure, requiring Python’s pip for setup, but the visualization itself runs entirely in the browser.

MMistyBlunch
60% match
Loading thumbnail…

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

MMbrownshoes
59% match