Skip to main content
SimilarExport ZIP
100%

Network graph for SHL dataset

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

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Network Graph Of the project Data

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.

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

Tree graph for the SHL dataset

An interactive HTML page displays the BMI distribution across occupations as a tree graph, with the SHL dataset transformed from CSV into a three-level hierarchy of BMI categories and individual occupations. The d3.v6 library builds the layout, while SVG rendering handles the nodes and links, using colored rectangles and circles to distinguish depths and animated tooltips to reveal data on hover. The code relies on custom functions like `csvToHierarchy` and the d3 `tree` layout, with styling applied through a separate CSS file.

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

Network graph for SHL dataset

This example renders a static network graph for the SHL dataset. It displays a title and uses an HTML5 Canvas or SVG rendering approach to draw nodes and edges, visualizing the relationships within the dataset. The implementation is built with React and relies on standard JavaScript and CSS, as shown in the provided `index.html` and `README.md` files. The code does not include external libraries such as D3 or custom force-directed algorithms; it primarily demonstrates a minimal starter template with a centered message. The dataset’s network structure is not yet visualized in this version.

Kkoteswararao614@gmail.com
73% match
Loading thumbnail…

Fork of Tree graph for the SHL dataset

This fork of a tree graph visualizes the SHL dataset using D3.js, HTML, and CSS. It displays a hierarchical network where nodes are represented as white circles with steelblue strokes, connected by grey links, while text labels appear beside each node. The code uses D3.js force-directed layout algorithms to position nodes, with custom styling applied through CSS classes for links, circles, and text. The visualization renders the data in a clear, readable format against a warm background, with a title styled in a contrasting brown header.

BBALAJI MANDAVA
72% match
Loading thumbnail…

Network Graph

This network graph visualizes relationships among six people using a force-directed layout. It loads data from an external JSON file specifying nodes and weighted links, then renders nodes as orange circles with name labels and green lines for connections. The example uses D3 v4 and v2 APIs simultaneously, relying on `d3.layout.force` to simulate the physical forces that position the nodes. Link thickness scales with the square root of each connection’s weight, while a tick handler updates the SVG elements’ positions during the simulation.

SSai Kaushik
71% match
Loading thumbnail…

Social Network Graph

A social network diagram shows ten fictional people grouped by academic department, with colored nodes and gray edges representing connections. Red links highlight relationships between members of different groups, such as Math and English. The visualization uses D3 v5’s `forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG circles and text labels render each person’s name. A `scaleOrdinal` with `schemeCategory10` assigns distinct colors to each department, and a tick handler updates node and link coordinates.

OOluoch Odhiambo
71% match
Loading thumbnail…

Social Network graph

A social network graph displays nine named individuals as nodes grouped by color-coded categories, with weighted links connecting them by relationships. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link stroke-width scaled by the square root of the connection weight. Node circles are styled with blue fills and pink stroke, while purple links and text labels are rendered as SVG elements defined in CSS. Data comes from an external `graph.json` file containing node names, group assignments, and weighted edge pairs, and nodes support dragging through the force layout's drag behavior.

Aadapavaishnavi12
70% match