Skip to main content
SimilarExport ZIP
100%

Vizz

✓ Published0🌍 Public
RRahel Gunaratne
Last edited Jun 19, 2021
Created on Jun 18, 2021
Forked from Force Network

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.

AI-generated description

Force Network chart using D3 v6

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

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.

Hhelen azad
80% match
Loading thumbnail…

Student_Viz_Categories

A force-directed network graph visualizes student outcomes as colored nodes, with green for graduates, blue for enrolled students, and red for dropouts. Three large circles above the network act as filters, toggling the opacity of each category on click. The visualization uses D3 v5’s `d3.forceSimulation` with charge, position, and collision forces, rendering to SVG. Student data is loaded from a CSV file containing academic and demographic attributes.

Zzeyneb.mhamedi@gmail.com
79% match
Loading thumbnail…

Student Network Graph

A force-directed node-link diagram displays a network of students, with each node colored by academic outcome (green for graduate, blue for enrolled, red for dropout). The visualization uses `d3.forceSimulation` with `d3.forceManyBody` and `d3.forceCenter` to compute node positions, rendered as SVG circles. Student data from a CSV file is loaded via `d3.csv`. Hovering over a node logs its information to the console.

Zzeyneb.mhamedi@gmail.com
78% 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
78% match
Loading thumbnail…

social data network

A force-directed graph visualizes a social data network, mapping connections between a root node and nested groups of related entities. Larger nodes represent primary hubs, while smaller leaf nodes cluster at the edges. The visualization uses D3 v6's `forceSimulation`, `forceLink`, and `forceManyBody` to position nodes, with SVG circles and text labels rendered for each element. The `drag` and `zoom` handlers let users pan and reposition nodes. Node colors indicate checked (green) versus unchecked (red) states, and the data mimics a network hierarchy.

Pprajoth0405
77% match
Loading thumbnail…

D3 Node-Link Diagram

This example shows a node-link diagram of social network data, using a force-directed layout to position 16 nodes and their connecting links. The visualization uses D3 v7's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to calculate the layout, while rendering nodes as SVG circles and edges as lines with animated tick updates. Node colors come from `d3.scaleOrdinal` with the `schemeSet1` palette, and hovering a node triggers a tooltip via mouseover events. Data is loaded from a CSV file containing source, target, and link values.

Mmariahdiaz
77% match
Loading thumbnail…

Force

This interactive network visualization shows a force-directed graph of connected nodes, with larger colored circles representing main hubs and smaller ones as children. Using d3.forceSimulation's many-body and link forces, the graph settles into a clustered layout. Users can drag nodes, which restarts the simulation. The SVG renders colored edges and circles, with labels for main nodes, built with d3.v6 in a React framework.

Hheters
77% match
Loading thumbnail…

D3 Force Directed Graph

This force-directed network visualization uses D3’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes in an SVG canvas. It displays a hierarchical dataset from `data.js`, where main nodes (e.g., Gemini, Leo) link to colored child and leaf nodes, with link distances defined per relationship (e.g., `MAIN_NODE_DISTANCE`). Nodes are draggable via D3’s `drag` interaction, and the simulation updates circle, text, and line positions on each tick. Colors come from a Paletton-generated palette in `colors.js`.

AAlbert
77% match