Tree graph for the SHL dataset

100%

Tree graph for the SHL dataset

✓ Published1🌍 Public

Last edited Apr 3, 2024

Created on Mar 31, 2024

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.

AI-generated description

The tree graph is created using html,css and d3.js.

MIT Licensed

Similar vizzes

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

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

74% match

Loading thumbnail…

assign 2.8: tree

This visualization displays a hierarchical tree of employment sector categories, including government, private sector, and stock market nodes with subcategories like supply-demand and laborer. The code uses d3.tree and d3.hierarchy to compute the layout, then renders the structure as SVG text elements connected by d3.linkHorizontal paths. The dataset comes from data.json, and the visualization includes zoom functionality via d3.zoom. Nodes are de-duplicated and repositioned using underscore.js utilities, with the last root-level branch highlighted in steel blue. Transitions animate node movement using d3 transitions.

Ppjdhungana@gmail.com

71% match

Loading thumbnail…

Activity6_Question3

This interactive scatter plot visualizes the relationship between BMI and height, with each point colored by the individual's category (adult, teenager, child). The code uses D3 v6 to load the CSV dataset from a GitHub repository, scales the axes with `scaleLinear`, and renders the circles as SVG elements. The chart incorporates `axisLeft` and `axisBottom` for numeric axes, with custom labels in green, all sized to the browser window.

Aayeshamanzoor111798@gmail.com

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

70% match

Loading thumbnail…

Tree graph

This example shows a hierarchical tree graph of data job listings, grouping job titles by category and displaying salary and location details as leaf nodes. The visualization uses D3.js v7 with an SVG rendering approach, fetching CSV data from a GitHub gist and transforming it into a nested hierarchy. The tree layout (`d3.tree`) positions nodes with curved horizontal links (`d3.linkHorizontal`), while node shapes vary by depth—ellipses for the root, rectangles for category levels, and circles for leaf details. The CSV provides the underlying job data, which is subset to the first ten rows for display.

Ssatishnarne99@gmail.com

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

70% match

Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR

70% match