Fork of ICE-8:Network graph

100%

Fork of ICE-8:Network graph

✓ Published1🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

86% match

Loading thumbnail…

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.

KKusumaKumariDama@my.unt.edu

85% match

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

85% match

Loading thumbnail…

Fork of ICE-8 Tree graph

This example visualizes hospital emergency room patient data as a hierarchical tree graph, grouping patients by department referral and showing attributes like date, gender, and age for each individual. The visualization uses D3.js version 7 with the `d3.tree()` layout and `d3.hierarchy()` to structure the data loaded from an external CSV file. Nodes are rendered as white circles with steelblue strokes, connected by gray curved paths generated using `d3.linkHorizontal()`, with text labels positioned based on whether each node has children. The SVG rendering includes custom CSS styling for the nodes and links.

BBALAJI MANDAVA

85% match

Loading thumbnail…

Fork of ICE8-network

This collaborative network visualization uses a force-directed layout to show relationships between students, projects, and a lab. D3’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` position colored nodes by group, while link thickness encodes connection value. The SVG rendering includes draggable nodes via `d3.drag()` and hover tooltips that display each node’s name and group. Data loads from two CSV files, with node color mapped by a `d3.scaleOrdinal`.

Ssaiprasadpilla937@gmail.com

83% match

Loading thumbnail…

Fork of ICE8-Network

This example visualizes a collaboration network among six team members, with nodes colored by department and links showing connections. Using D3.js’s force-directed layout, the `d3.forceSimulation` API applies link, many-body charge, and centering forces to arrange the vertices dynamically. Circles and lines are rendered as SVG elements, and labels place names beside each node. The simulation updates positions on each tick, while drag handlers allow interactive repositioning of nodes, restarting the physics as needed.

Kkmuktha09@gmail.com

82% match