ICE-8 Network graph

Last edited Apr 2, 2024

Created on Apr 2, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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.

94% match

ICE8 - Node-link diagram with force-directed layout

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.

90% match

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.

89% match

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

87% match

ICE8 - Network Graph

A network graph visualizes the relationships between eight individuals, with nodes labeled by name and connected by directed, arrowed links. The layout is determined by a force-directed simulation, using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, with nodes rendered as pink circles and blue links. Data comes from a local `networkData.json` file, and the visualization includes interactive dragging via D3's `drag` handler, with hover effects that change the node stroke to green.

Sshiiva-surya

ICE8 - Network Graph

This interactive network graph visualizes connections between eight people using D3 version 6. Nodes are rendered as pink circles with name labels, linked by blue lines with arrow markers. The layout uses `d3.forceSimulation` with link, many-body charge, collision, and centering forces to position nodes dynamically. Users can drag nodes, and hovering changes the stroke color. Data comes from a JSON file containing node names and link relationships. The SVG output updates on each simulation tick, repositioning edges and nodes based on the force-directed physics.

KKande2011

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

ICE8: Network Graph

A network graph maps personal and professional connections radiating from a central node, with labeled circles and colored links showing relationships between individuals. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the SVG visualization computes node positions and supports drag interactions. Node sizes and colors differentiate hierarchy levels, while link distances vary by relationship type. Data is defined in JavaScript modules and rendered via D3 selections for circles, lines, and text labels.

SSharmaAshwini