Force

100%

✓ Published1🌍 Public

Last edited Nov 13, 2023

Created on Nov 13, 2023

Forked from Chord

This example visualizes a social network from the Caltech36 dataset, representing individuals as nodes and their connections as links in a force-directed graph. Node colors are assigned using a sequential rainbow scale based on index, and the layout is computed with d3.forceSimulation, incorporating many-body, center, and link forces. The SVG rendering updates positions on each tick, showing clusters and relationships within the network data loaded via d3.json.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Force

This visualization shows a force-directed network graph of social connections from the Caltech36 Facebook dataset, rendered as SVG circles and lines. The simulation uses `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceLink` to position nodes colored with a rainbow sequential scale. The code loads node and link data from a local JSON file, then applies ticked updates to redraw node positions and link endpoints as the layout stabilizes.

Vvivianaaai@qq.com

94% 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

89% match

Loading thumbnail…

Force Directed Graph

This visualization presents a network of interconnected nodes, with each node colored by its assigned group and links showing the connections between them. It combines a force-directed node-link diagram with an adjacency matrix display, revealing both the spatial clustering of relationships and the overall network structure. The force layout is built with `d3.forceSimulation`, including `d3.forceLink` and `d3.forceManyBody`, while user interactions like node dragging, zooming, and hover effects are handled through D3’s drag and zoom APIs. The adjacency matrix uses `d3.scaleBand` axes to map node IDs, and both SVG canvases render the data with animation driven by the simulation tick events.

ZZhou180

85% match

Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Ttkcj0912

85% match

Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang

84% match

Loading thumbnail…

Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to show the connections and community structure in a social network. The node-link diagram uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, which can be dragged and zoomed. Clicking a node or a matrix cell highlights the corresponding row and column in the matrix and the connected links in the graph. The adjacency matrix uses custom `rect` elements to represent edge weights, with colors mapping to node groups.

JJasonYeong0821

84% match

Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775

84% match

Loading thumbnail…

Force-directed Layout

This example shows a force-directed network layout of a graph dataset from the Network Data Repository. Nodes appear as orange circles, with gray links connecting them; hovering over a node displays its ID in a tooltip. The visualization uses D3.js v6 with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to compute node positions, while `d3.drag` enables interactive node repositioning. Data is loaded from a CSV file, and the SVG rendering updates continuously during simulation ticks, with node colors assigned via `d3.scaleOrdinal`.

PPranay Matalia

84% match