Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published1🌍 Public

Last edited Mar 10, 2024

Created on Mar 8, 2024

This example demonstrates a force-directed network graph of a university and its academic departments, visualized as a star topology with a central node connected to five satellite nodes. Built with D3 version 7, it uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate node movement. The SVG rendering shows nodes as red and blue circles, with labels and links updated on each simulation tick. Node and link positions are computed dynamically, producing an interactive and animated layout.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a force-directed network graph of interconnected hubs—Email, Search Engine, OpenVas, and NFV—each with child nodes and leaf clusters. Built with D3 version 7, it uses `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG elements (`circle`, `line`, `text`) are rendered and updated on each tick. The visualization includes draggable nodes via `drag` interaction, with colors sourced from `color.js` and network data defined in `data.js`.

Ppwnnoob

82% match

Loading thumbnail…

Fork of Force Directed Graph Starter

This example shows a force-directed network of twenty-three nodes, where one central hub labeled “Community Vision” connects to many smaller unnamed nodes, while two larger labeled nodes (“Arts Web” and “Silicon Valley Creates”) branch from it. Built with d3.forceSimulation, it applies d3.forceManyBody for repulsion, d3.forceLink for edges, and d3.forceCenter to keep the graph centered in an SVG canvas. Node radii derive from data size values, and labels render as text elements positioned each tick. The data uses numeric link indices to define source–target relationships.

WwiebsS

82% match

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization shows the organizational network of Columbia University’s DSI Department, with a central node connected to dozens of labeled department clusters, each surrounded by small leaf nodes. It uses D3’s force simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, `d3.forceCenter`) to layout the graph, with drag interaction enabled. Nodes are rendered as SVG circles and links as lines, with data defined in separate modules for node/link generation and a color palette. The example adapts a pre-existing graph structure to display academic department connections.

Ttracy3057

81% match

Loading thumbnail…

Fork of Force Directed Graph Starter

This example demonstrates a simple force-directed graph visualization using D3.js. It shows three circular nodes connected by two links, representing a small network of relationships. The layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes dynamically. Data is loaded from a CSV file containing movie information, though the current implementation focuses on the basic graph structure. The visualization renders using SVG elements, with circles for nodes and lines for links, updating their positions on each simulation tick.

KKyle?

80% match

Loading thumbnail…

Fork of HTML Starter

This example shows a force-directed network graph with 20 nodes arranged in a circle and connected sequentially by links. Using D3 v7, it employs `d3.forceSimulation` with link, charge, and center forces to animate the layout. Nodes are rendered as SVG circles with labels, and drag behavior is implemented via `d3.drag` to reposition nodes interactively. The data consists of synthetic nodes and links generated with `d3.range`, and the visualization updates positions on each simulation tick.

Yyuvraj khanna

80% match

Loading thumbnail…

Fork of Force Directed Graph Starter

This force-directed graph example visualizes a small network of three nodes (Alice, Bob, Carol) connected by two links, using a D3 v6 simulation to position the nodes. The SVG rendering shows circles for nodes and lines for edges, which update their coordinates on each simulation tick. The code employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to compute layout dynamics, while `selection.attr` updates the circle and line positions in real time.

SSatpreet Makhija

80% match

Loading thumbnail…

Vizz

This force-directed network diagram visualizes hierarchical relationships between demographic, academic, and enrollment data categories, with linked nodes representing attributes such as degree type, academic unit, and academic year. The D3 v6 simulation uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, forceCenter, and forceRadial to position nodes and links. SVG circles are color-coded by group and rendered as labels within the 960×500 container. Users can drag nodes to reposition them, which triggers hover effects that highlight nodes with a thicker stroke. Data is loaded from a JSON file containing nodes and links.

RRahel Gunaratne

80% match

Loading thumbnail…

Fork of Network Practice

This example shows a force-directed network of 13 nodes connected by 17 links, with nodes colored by group using a categorical scale and link thickness varying with edge weight. The visualization loads node and link data from a JSON file and renders it as SVG circles and lines. It uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the layout, updating node positions and link endpoints on each tick.

Hherbertamakloe

80% match