fresh block

100%

✓ Published0🌍 Public

Last edited Aug 24, 2018

Created on Aug 24, 2018

A force-directed network diagram displays the familial relationships between individual mice from a colony, using data from `colony.csv`. Nodes represent each animal, while links connect offspring to their fathers via the father ID. The visualization is interactive, allowing users to click a "Degree Size" button that scales node radius and repulsion strength based on each node's degree centrality. The code leverages the `d3.forceSimulation` API with custom charge and center forces, rendering the network as animated SVG elements. Styling is applied via CSS classes, with distinct colors for active, source, and target nodes to highlight the interaction.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Force Directed Layout - Animal Colony

This example displays a network of mouse breeding colonies through a force-directed layout. It shows how individual animals, represented as nodes, connect through parent–offspring relationships, with node color indicating animal role and node size reflecting degree centrality. The visualization uses D3 v4's forceSimulation API to run a physics-based layout, with multiple forces such as "charge" for repulsion and "link" for attraction between connected nodes. Links are rendered as SVG lines with arrow markers, while the underlying data comes from CSV files specifying the mouse pedigrees. A button allows the user to resize nodes by their calculated degree centrality.

PPragyagarg

82% match

Loading thumbnail…

fresh block

A force-directed network diagram visualizes a set of physiological and clinical monitoring parameters (like CVP, PAP, and SAO2) as linked nodes, with directed arrows and label paths showing relationships. The D3.js v4 code builds the SVG with `d3.forceSimulation` for layout, `d3.forceLink` for edges, and `d3.forceManyBody` for repulsion, using a drag interaction to reposition nodes. Each node is a colored circle with a text label, and edge labels align to the path direction. Data comes from the included `graph.json` file.

RRenaud-D-Harreville

78% match

Loading thumbnail…

fresh block

This example demonstrates an interactive force-directed graph of a hierarchical dataset, where nodes represent data points and links show parent-child relationships. The visualization uses D3.js version 3.5.5 with a force layout to position nodes, while a semantic zoom behavior (via `d3.behavior.zoom`) allows panning and scaling the entire graph. Nodes are colored by group or hierarchy level, with the root node highlighted in white, and can be dragged individually using `d3.behavior.drag`. The code applies linear scales for coordinate transformation during zoom and dynamically updates node positions and link lines on each tick event, with the data sourced from a Gist and rendered as an SVG.

DDinoJay

78% match

Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto

78% match

Loading thumbnail…

fresh block

This example uses D3.js (v5) to visualize a network of chemical compounds, targets, and annotations as linked circles. It shows how nodes are arranged in three concentric rings based on their group—compounds on the outer ring, targets on the middle, and annotations at the center—using `d3.forceSimulation` with a custom `forceRadial` constraint. Links between nodes are rendered as black lines, with stroke width and class names indicating link type. The code loads `nodes.csv` and `links.csv`, then applies forces for collision, link distance, and radial positioning. The resulting static SVG chart is built entirely through D3’s data-join and tick event updates.

GGerardoFurtado

76% match

Loading thumbnail…

fresh block

A force-directed network graph visualizes the study relationships between eleven academic or personal topics, such as Engineering, Maths, and AI. Node size encodes the magnitude of the `size` attribute, while link thickness reflects the `bond` strength. Data is loaded from a `graph.json` object. The graph is rendered to an SVG canvas using D3 v3 APIs including `d3.layout.force` and `d3.scale.sqrt`. The force simulation positions nodes with `charge`, `linkDistance`, and drag interactions.

OOllieFord

75% match

Loading thumbnail…

fresh block

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG circles and curved links. The code uses d3.forceSimulation with link, charge, and centering forces to position nodes, and a custom d3.hypergraph function to transform hyperedges (links connecting more than two nodes) into intermediate connection nodes with smaller gray circles. Zoom and drag interactions are enabled via d3.zoom and d3.drag.

MMNoichl

74% match

Loading thumbnail…

fresh block

A force-directed network diagram of character co-appearances from Les Misérables uses d3.forceSimulation to position nodes and links in an SVG. Node colors map to character groups via d3.scaleOrdinal, while link thickness reflects interaction strength. The simulation supports dragging nodes, with d3.drag handling positional updates and alphaTarget to restart motion.

CChmits

74% match