Skip to main content
SimilarExport ZIP
100%

Network Graph Of the project Data

✓ Published0🌍 Public
Ttejasviteegala@my.unt.edu
Last edited Apr 2, 2024
Created on Apr 2, 2024
Forked from HTML Starter

This network graph visualizes the connections between the first twenty people in a sleep health dataset and their associated gender and BMI category attributes. Each person appears as a steelblue node, with pink nodes for gender values and red nodes for BMI categories. The graph uses a force-directed layout powered by d3.forceSimulation, with forceLink, forceManyBody, forceCenter, and forceCollide forces to position nodes, while the d3.drag API enables interactive node movement. Data is loaded from a remote CSV file and rendered as an SVG.

AI-generated description

The above network graph is created by using html,css and d3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

Mmounishnaidu96@gmail.com
78% match
Loading thumbnail…

Network graph for SHL dataset

This network graph displays the relationships between the first twenty people in the SHL dataset and their associated attributes, including occupation and sleep disorder status. The visualization uses a force-directed layout with color-coded nodes—blue for persons, red for occupations, and yellow for sleep disorders—connected by gray links. Built with d3.v7, the code employs `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and drag interactions via `d3.drag`. Node tooltips appear on hover, and the SVG rendering includes labeled circles for each entity.

Kkoteswararao614@gmail.com
77% 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
74% match
Loading thumbnail…

Tree graph of the project data(ICE-8)

This tree graph visualizes the distribution of sleep disorders across different occupations from a CSV dataset. The hierarchical structure shows disorder categories as root nodes, with occupation leaves displaying aggregated counts. Built with React and D3.js v6, the visualization uses `d3.tree` layout and `linkHorizontal` for curved connections. Node symbols vary by depth using `d3.symbol` with circle, square, and triangle shapes, rendered as SVG paths. A legend and color-coded nodes distinguish hierarchical levels.

Ttejasviteegala@my.unt.edu
73% match
Loading thumbnail…

Tree Graph ICE

This interactive tree diagram displays hierarchical health data, structuring gender, age, and sleep/stress metrics as a branching network. The visualization uses colored nodes—red for gender, blue for age, and green for metrics—with connecting links, and the D3.js library (v7) builds the layout via `d3.tree()`, `d3.hierarchy()`, and `d3.linkVertical()`. Each metric leaf node labels specific sleep quality and stress level values, with the SVG rendering driven by direct DOM manipulation through D3 selections. The chart is populated from hardcoded JSON data embedded in the HTML file.

GGorantla Vishnusai
73% match
Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten individuals, using pink rectangles as nodes and brown, arrowed lines to depict friendships. The graph is rendered as an SVG and uses a force-directed layout via `d3.forceSimulation` with forces for links, charge, collision, and centering. Users can drag nodes, which triggers the simulation to restart. Data is loaded from a local `graph.json` file, and node highlighting occurs on mouseover via CSS class changes.

BBhavyaMammai
72% match
Loading thumbnail…

Network Graph of Cardio Attributes

This network graph shows the relationships between cardiovascular disease and its associated medical attributes, with the central "cardio" node connected to each attribute such as age, gender, cholesterol, and blood pressure. Using D3 v6, the visualization builds a force-directed layout with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position nodes, while an ordinal color scale (`d3.scaleOrdinal`) assigns categorical colors. Data is loaded from a semicolon-delimited CSV file via `d3.dsv`, and all nodes and links are rendered as SVG elements with labels.

Ffreyatran124@gmail.com
71% match
Loading thumbnail…

HeartDisease

This example visualizes the relationship between SleepTime and BMI using a scatter plot, where each point represents an individual, colored red or green based on HeartDisease status. The x-axis maps BMI and the y-axis maps SleepTime, with point sizes varying according to PhysicalHealth and MentalHealth values. It loads CSV data via d3.csv, scales the axes with d3.scaleLinear, renders circles in SVG, and uses d3.axisBottom and d3.axisLeft for the axes. The chart’s margins and dimensions adapt to the browser window.

Cchandanagandla
71% match