Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows an interactive tree diagram visualizing a hierarchical data model of actions, children, and parents with attributes. Built with D3.js v3 and React, it renders nodes as blue circles connected by lines, using a tree layout with animated transitions as nodes expand or collapse on click. The data structure contains nested objects with type and name properties, while SVG rendering and D3’s hierarchy and tree APIs handle positioning and updates.

SShinyaHosoyamada

84% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a hierarchical food category tree, with food items as leaf nodes branching from broader categories like fruits, vegetables, and proteins. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders the structure as SVG paths and circles with `d3.linkVertical`. Node shapes vary by depth: a red rectangle for the root, blue circles for categories, and green circles for individual food items. Colors and node sizes are set directly in the D3 v7 code, which generates all elements dynamically from an inline JavaScript data object.

Bbalaaswitha@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

This example presents a hierarchical tree visualization of movies organized by year, genre, and title. It uses D3.js version 3 to render SVG shapes—circles for years, rectangles for genres, and ellipses for individual movies—with distinct color coding per category. The tree layout is built from a static JavaScript data structure that lists movies under release years and genres. A legend in the top-right corner explains the shape-color mappings, while CSS styling controls the visual appearance, including node cursors and link colors. The visualization demonstrates a simple, static branching structure without interactive behavior.

Ppavan vasamsetti

81% match

Loading thumbnail…

Fork of Tree

This radial tree visualization presents a four-level food hierarchy, from the root "Food" down to categories like Fruits and Vegetables, then subcategories, and finally individual items like Orange and Spinach. The D3.js v7 code uses `d3.select`, `svg.append`, and partition/treemap-style layout functions to position colored nodes and link strokes. The hierarchical JSON data is rendered as a dynamic tree, with node fill colors indicating depth level, from pink at the root to blue at the leaves.

Ssravya7136@gmail.com

80% match

Loading thumbnail…

Fork of Tree Structure

This fork of a D3 tree structure visualizes a dataset on cardiovascular disease, breaking down the root "Heart Disease" node by sex and age category, with leaf nodes displaying related statistics. The chart uses a hierarchical layout created with `d3.tree()` and `d3.hierarchy()` to position nodes, rendered as SVG paths and circles. Node text labels are styled via CSS, while links and node colors are set through inline styles in JavaScript. The source code defines the data structure explicitly, and the visualization updates dynamically based on this nested hierarchy.

Sshreyasribearelly@gmail.com

80% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

80% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

80% match

Loading thumbnail…

Fork of Tree Example

This interactive tree diagram visualizes a hierarchical family tree using D3.js. Users can click on nodes to collapse or expand branches, with smooth animated transitions between states. The visualization uses D3’s tree layout and diagonal path generator to render SVG links, while node positions animate via `transition()` calls. Data is structured as a nested JSON array, and the code employs `d3.layout.tree`, `d3.svg.diagonal`, and event handlers for node toggling.

TTejucmandava

79% match