Skip to main content
SimilarExport ZIP
100%

ICE8 - Node-link diagram with force-directed layout

✓ Published0🌍 Public
KKusumaKumariDama@my.unt.edu
Last edited Apr 2, 2024
Created on Apr 2, 2024

This example shows a patient network as a node-link diagram, where each circle represents a patient and lines connect patients who share at least one attribute, such as race, gender, or department referral. The layout is generated with d3.forceSimulation, using d3.forceLink, d3.forceManyBody, and d3.forceCenter to position nodes and links. Hovering over a node enlarges it and displays a tooltip with the patient ID, implemented via mouseover and mouseout events. The visualization renders in SVG with animation, based on an array of patient objects containing demographic and referral data.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 Node link

This example visualizes hospital emergency room data as a node-link diagram with a force-directed layout. Each orange circle represents a patient ID, and gray lines show random connections between patients. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes dynamically. Hovering over a node triggers a tooltip displaying the patient ID. The data includes patient attributes like age, gender, race, and wait times, rendered as an animated SVG with d3.v7.

KKusumaKumariDama@my.unt.edu
93% match
Loading thumbnail…

ICE-8 Network graph

A network graph visualization shows patient data as linked nodes, with each circle representing a patient and lines indicating shared attributes like age, race, or wait time. The graph uses d3.forceSimulation with forceLink and forceManyBody to position the nodes, while the SVG renders labels for each patient ID. The code includes a sample data array but the visualization connects patients based on matching criteria, creating a web of relationships. The layout updates dynamically on each simulation tick.

KKusumaKumariDama@my.unt.edu
90% match
Loading thumbnail…

ICE-8:Network graph

This network graph visualizes patient admission data, representing each patient as a node and random connections as links. It uses d3.forceSimulation with link, charge, and center forces to position the nodes, which are rendered as SVG circles with draggable behavior. The graph displays patient IDs as tooltips, with data attributes like gender, age, and wait time stored but not shown in the visualization.

KKusumaKumariDama@my.unt.edu
88% match
Loading thumbnail…

Fork of ICE-8:Network graph

This network graph visualizes connections between patients and hospital departments using a force-directed layout. Blue circles represent patients, green circles represent departments, and gray lines show their relationships. The D3.js code builds the interactive diagram with `d3.forceSimulation` combining link, many-body repulsion, and center forces to position nodes dynamically, while SVG elements render the nodes, labels, and connecting lines. The sample dataset is hardcoded within the HTML file, and the visualization updates positions on each simulation tick.

BBALAJI MANDAVA
85% match
Loading thumbnail…

Fork of Fork of ICE-8:Network graph

This interactive network graph visualizes relationships between patients and hospital departments using a force-directed layout. The visualization distinguishes node types through color coding—steelblue for patients and lightgreen for departments—with labeled circular nodes connected by gray links. The code employs d3.forceSimulation to compute node positions, combining d3.forceLink for link constraints, d3.forceManyBody for repulsion, and d3.forceCenter for centering. Arrow markers indicate link direction on the SVG canvas, while titles and labels are rendered as SVG text elements.

BBavya Vemulapalli
84% match
Loading thumbnail…

ICE 8 Network Graph

This example visualizes a network graph of eight named nodes connected by seven links, with two large main nodes and smaller child nodes. A force-directed layout using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` positions the nodes, while SVG circles, lines, and text labels render the structure. Node colors and sizes are assigned from a separate color module, and dragging is enabled via the D3 drag behavior.

PPrasanth Damarla
82% match
Loading thumbnail…

ICE-8

This example shows a network of nine people connected by weighted links, with each node labeled by name and grouped by color-coded circles. The visualization uses a force-directed layout to position the nodes and links dynamically. The code implements this with `d3.layout.force`, specifying gravity, distance, and charge parameters to control the simulation. Links are rendered as black lines with stroke width proportional to link weight, while nodes appear as blue circles with red text labels. The graph data comes from a local JSON file, and the SVG rendering updates positions on each tick event.

DDineshK2602
81% match
Loading thumbnail…

Network Graph

The network graph visualizes patient relationships using force-directed layout, where nodes represent individual patients from the dataset and links show connections between them. The visualization is rendered as SVG in a React framework using d3.v7, with d3.forceSimulation handling the physics-based positioning and collision detection. The graph displays patient attributes such as age, gender, and race through node styling, with interactive zoom and pan capabilities enabled through d3.zoom. The code uses d3.select and .join() to manage the SVG elements dynamically based on state changes.

66264kusuma@gmail.com
81% match