Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Mmounishnaidu96@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from HTML Starter

This network graph visualizes relationships between people and their health attributes, including BMI category and sleep disorder status. Each person appears as a red node, while attribute categories use blue and yellow nodes, with links connecting individuals to their associated health traits. The visualization uses D3.js v7's `forceSimulation` with link, charge, and positioning forces to arrange nodes dynamically. Users can drag nodes to explore connections, while the simulation repositions elements in real time. The code processes only the first 20 records from the dataset, rendering the graph as SVG within a React framework.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Network graph

This visualization shows a force-directed network graph of hospital ER patient IDs, with nodes representing individual records and links indicating connections between them, weighted by line thickness. It uses D3 v4's `layout.force()` API to simulate the physical forces of gravity, charge, and distance, positioning the nine nodes and eleven links dynamically. Each node is rendered as a green circle with a white stroke and labeled with its ID, while blue lines connect the nodes, and the graph updates through the force simulation’s `tick` event, which recomputes node and link positions on each frame. The data is loaded asynchronously from a local `data.json` file using D3's `json()` method.

66264kusuma@gmail.com
79% match
Loading thumbnail…

Fork of HTML Starter

This interactive tree chart visualizes a hierarchy of physical activity levels across demographic categories. The radial layout displays branches for gender, age, and activity rating, with distinct colors and shapes distinguishing each level. Built with D3.js version 3, the visualization uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for connecting links. The SVG rendering includes clickable nodes and a color-coded legend, with data structured as nested JSON objects within the HTML page.

Mmounishnaidu96@gmail.com
79% match
Loading thumbnail…

Fork of Network graph of social connection

This network graph visualizes social connections among nine named people, with nodes positioned by a force-directed layout and links indicating relationships. The code loads data from a JSON file and uses d3.layout.force with gravity, distance, and charge parameters to simulate node placement. Node circles are green with maroon strokes, while link thickness varies with the weight value from the data. Text labels display each person’s name, and dragging is enabled via force.drag. The visualization renders in SVG on an HTML canvas using D3 v4.

NNaveed945
79% match
Loading thumbnail…

Fork of network ICE

This example visualizes a small health data network as a force-directed graph, organizing records by gender, then age, and finally metric values for sleep quality and stress level. Nodes are colored by hierarchy level: purple for gender, gold for age, and teal for metric leaves. The layout is computed with `d3.forceSimulation`, using `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, with draggable nodes via a custom drag handler. Rendering is SVG-based, with node labels and a legend showing the color mapping.

GGorantla Vishnusai
78% match
Loading thumbnail…

Fork of HTML Starter

This interactive network graph visualizes the connections among a team of six individuals, mapping their professional relationships and displaying each person's role in a tooltip on hover. Using D3.js v7, the simulation employs `d3.forceSimulation` with `d3.forceLink` for link constraints, `d3.forceManyBody` for charge-based repulsion, and `d3.forceCenter` for layout anchoring. Nodes are rendered as draggable SVG circles with labels, and the `.on('mousemove')` handler feeds data to a tooltip div. The code utilizes `d3.select` and the `.join()` operator for element creation.

Bbalaaswitha@gmail.com
78% match
Loading thumbnail…

Network Graph

This network graph visualizes relationships between patients, using nodes to represent individuals and links to show connections such as shared race or departmental referrals. The graph is rendered as an SVG within a React framework, using D3 v6's `forceSimulation` API to calculate node positions and `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to manage the physics. Users can drag nodes to explore the network, and the visualization updates dynamically through the `simulation.on('tick')` event.

66264kusuma@gmail.com
78% match
Loading thumbnail…

Fork of Network Graph

This network graph visualizes relationships among factors associated with heart disease, using nodes and weighted links from a JSON dataset. Built with D3 v4 and the legacy `d3.layout.force`, the SVG rendering positions labeled circles with drag-and-drop interaction. The code also implements a tooltip on hover, displaying each node's name, and styles links with stroke widths proportional to link weight, while the force simulation updates positions on each tick.

Sshreyasribearelly@gmail.com
78% 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
78% match