networks

100%

✓ Published0🌍 Public

Last edited Feb 5, 2018

Created on Jan 30, 2018

This interactive network visualization uses a force-directed layout to display relationships between functional categories, with nodes representing biological functions and links indicating correlations. Users can switch between six pre-loaded datasets and drag nodes after the simulation stabilizes. Built with D3 v3 (d3.layout.force) and rendered as SVG with zoom and pan support, it encodes node size via radius scale and link strength through stroke width, with optional color coding by category or monochrome themes.

AI-generated description

Built with blockbuilder.org

The *.js file is compressed and this demo just for capability showcase.

This app is writen with d3-v3, pepole need to wait until the node cooling down then all them will be fixed.

But you can drag the node if you want.

mit Licensed

Similar vizzes

Loading thumbnail…

Networks

This network visualization uses d3.layout.force to simulate a force-directed graph, displaying nine nodes and eight weighted links from graph.json. Nodes appear as grey circles with gold borders and red labels, while link thickness reflects edge weight. The SVG elements update position on each force tick, and nodes are interactive via d3.force.drag. The example demonstrates basic force layout mechanics with custom styling.

GGogineni44

83% match

Loading thumbnail…

Network

A force-directed network graph displays nodes and directed links, colored by categorical group and relationship type. Redundant labels and relationships are deduplicated from the input. Users can click a node to view its ID or double-click to filter the graph to that node's subgraph. The visualization uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter, and d3.drag, rendering data from data.json with SVG.

Aala-wahibi

82% match

Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater

81% match

Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics

81% match

Loading thumbnail…

Network Force Layout

A network force layout visualizes relationships in a sample dataset through an interactive SVG graph. Nodes appear as distinct geometric symbols (circles, diamonds, triangles) colored steelblue, connected by thin gray links on a white canvas. The D3 v3 layout positions elements using `d3.layout.force` with configurable link distance and charge, while pan-and-zoom via `d3.behavior.zoom` enables exploration. The interface offers client-side download buttons for saving the visualization as SVG or PNG, with data and chart options supplied externally via JSON.

11Cr18Ni9

81% match

Loading thumbnail…

Organisation Network Graph

Four organization networks form a force-directed graph, with colored clusters of main nodes and smaller child nodes connected by links. The visualization uses d3's simulation API—`forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter`—to compute node positions, rendered as SVG circles and lines. Dragging nodes via d3's `drag` interaction repositions them, triggering the simulation to restart. Node colors come from a custom palette in `colors.js`, and the graph is built from static data in `data.js`.

Nnexus1058

81% match

Loading thumbnail…

Networks

This visualization displays a small social network of nine named individuals organized into five groups, with weighted connections represented by lines whose thickness scales with link weight. Using D3.js v4 and a force-directed layout, nodes are rendered as blue circles with red name labels and are draggable. The code employs `d3.layout.force` for simulation, with gravity, charge, and distance parameters, and loads node and link data from an external `graph.json` file. The SVG output includes dynamic positioning updated on each tick event.

SSurikanti Swathi

81% match

Loading thumbnail…

Network Graph

This network graph visualizes hierarchical relationships between main nodes, child nodes, and leaf nodes using a force-directed layout. The d3.forceSimulation API with forceManyBody, forceLink, and forceCenter forces positions nodes and links, while SVG circles and lines render the graph. Node size encodes hierarchy level, and colors distinguish four main site clusters. Users can drag circles to reposition nodes, with drag interaction restarting the simulation. The data.js file programmatically defines nodes and links, including parent-child connections and inter-site links.

Mmiloparra

80% match