Skip to main content
SimilarExport ZIP
100%

Tree Map

✓ Published0🌍 Public
Hhappymail6
Last edited Jul 8, 2022
Created on Jul 8, 2022
Forked from Family Tree ICE-8

This tree map visualizes the hierarchical relationships among characters in the "One Piece" anime, using a node-link diagram with color-coded categories. The visualization, built with D3.js v3 and jQuery, presents a branching structure where nodes representing character groups expand into subcategories. Interactive features include zooming, dragging, and tooltips that display additional information on hover. Data is loaded from an external JSON file and rendered as SVG, with CSS styling for node colors, link styles, and tooltip formatting.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree

This visualization displays a hierarchical tree structure from a JSON data file, representing cartoon characters and their relationships. The tree branches from a central root node, with child nodes extending outward horizontally. Each node is labeled with its character's name and colored according to the `color` property in the data, while gray connecting lines link parent and child nodes. The implementation uses D3 v5's `json()`, `hierarchy()`, `tree()`, and `linkHorizontal()` APIs to parse the data, compute the layout, and draw the SVG paths and text elements. The visualization also includes zoom functionality through the `zoom()` API, allowing interactive exploration of the tree.

SSaiSreya1
73% match
Loading thumbnail…

Tree

This radial tree visualization displays hierarchical cartoon character data, with nodes color-coded by category and sized by depth. The root “Cartoons” branches into two main groups—minion and mickeymouse—each with child nodes and leaf labels. Using d3.hierarchy, d3.tree, and d3.linkHorizontal, it renders SVG paths and text elements, while a zoom behavior enables interactive panning. The JSON data source defines node ids and colors, applied directly to text fill. Font size decreases with depth to emphasize hierarchy.

SSharmilaChowdhari
72% match
Loading thumbnail…

Tree

This hierarchical tree visualization displays cartoon character relationships with color-coded labels, where node text size decreases with depth. Using D3 v5’s `tree()` layout and `linkHorizontal()` generator, it renders an SVG with curved links and zoomable panes via `zoom()`. The data comes from nested JSON, binding each node’s `id` and `color` from `d.data.data` to text elements. Font sizing scales by depth, while text shadows and the `event.transform` handler enhance readability and interaction.

Ssumitradevipolina
72% match
Loading thumbnail…

Tree Map

A Tree Map visualization displays a hierarchical dataset of names using an expandable and collapsible tree diagram. The code uses D3.js version 3.5.17 with the `d3.layout.tree` for layout and `d3.svg.diagonal` for drawing curved links between nodes. Nodes are rendered as purple circles with labels, and clicking a node toggles its children to show or hide them. The visualization animates with 750ms transitions, updating node positions and link paths smoothly as the tree structure changes.

SSamanvitha1
70% match
Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi
70% match
Loading thumbnail…

Tree map

A hierarchical tree map visualizes a family tree of names, rendered as collapsible nodes linked by curved paths. Clicking a node toggles its children, with animated transitions using d3.layout.tree, d3.svg.diagonal, and SVG circle and text elements. The data is a hardcoded JavaScript array of nested objects. Node positions shift horizontally by depth, and all updates animate over 750 milliseconds using D3’s transition methods, with styling for links and node circles defined in CSS.

SSamanvitha1
69% match
Loading thumbnail…

Tree Diagram

This interactive tree diagram displays hierarchical animal classification data from a JSON file, with nodes that collapse and expand on click. Built with D3 v3, it uses the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links, with SVG rendering and animated transitions between states via `transition.attr`. Node styling includes green circles and comic sans labels, while purple links highlight parent-child relationships.

SSai Kaushik
69% match
Loading thumbnail…

Family tree

This interactive family tree visualization displays hierarchical relationships using a box-and-link diagram, with color-coded nodes representing different family member categories. Built with D3.js v3 and jQuery, the SVG-based tree supports zooming, dragging, and click interactions to explore the nested JSON data structure. The layout uses d3.layout.tree to position nodes, with animated transitions and tooltips that appear on hover, while custom utilities like breadthFirstTraversal handle collision detection and dynamic height calculation.

Bbindhureddy98
68% match