Diagrama Programatico MAYUa

100%

Diagrama Programatico MAYUa

✓ Published0🌍 Public

Last edited Nov 9, 2022

Created on Nov 2, 2022

This example presents a hierarchical tree diagram, called "MAYUa," that organizes the spatial program of a museum. The visualization distinguishes between experiential areas like public and private spaces and laboral areas, which are further subdivided by European regions. Using a d3.tree layout with a horizontal link generator, the diagram renders nested, color-coded labels with fontSize scaled by depth. The SVG canvas supports zooming via d3.zoom, and the visual style uses a Playfair Display font and teal path strokes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree MAYUa

This example visualizes a hierarchical tree of car companies and their brands, such as General Motors and Volkswagen, using a collapsible node-link diagram with orange curved links and white circular nodes. The data is hardcoded as a JavaScript array of nested objects. Built with D3.js v3, the visualization constructs the tree layout using `d3.layout.tree`, draws links with `d3.svg.diagonal`, and animates node expansions and collapses with SVG transitions over 750 milliseconds.

Wwjj1928

71% match

Loading thumbnail…

MINAUCE

This visualization displays a hierarchical tree of world regions and countries, branching from continents down to individual nations. It uses d3.tree and d3.hierarchy to compute the layout, with d3.linkHorizontal generating curved connecting paths and text labels sized by depth. The SVG output is rendered with zoom support via d3.zoom, and the data comes from a JSON file containing the geographic hierarchy.

Mmirojanuario

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

69% match

Loading thumbnail…

Tree Visualization

This example visualizes a hierarchical tree structure of a university’s departments and courses using D3 v5. Thecode imports data from a local ES6 module and renders an SVG tree layout with `d3.tree()`, `d3.hierarchy()`, and custom link paths via cubic Bézier curves. Each depth level is distinguished by a different shape (circle, rectangle, ellipse) and color, while node labels are positioned above or below based on whether they have children. The visualization runs entirely in the browser with SVG rendering.

VVenkat-Sumith-Thota

69% match

Loading thumbnail…

MIH Tree

This example shows an organizational hierarchy as a horizontal tree, with nodes labeled by name and sized by their depth in the structure, using a green link path and serif text. The visualization uses D3 v5’s `tree` layout, `linkHorizontal` generator, and `zoom` behavior, rendering the hierarchy from a local JSON file. The SVG canvas fills the browser window, and the interaction supports pan and zoom via the `d3.zoom` API.

Aawwest17

69% match

Loading thumbnail…

Art Tree

This example shows a horizontal tree diagram of world regions and countries, using a hierarchical dataset that groups nations by continent and subregion. The code builds the layout with `d3.tree()` and `d3.hierarchy()`, then renders the parent-child connections as curved SVG paths via `d3.linkHorizontal()`. Each node represents a geographic entity, with the root labeled “World” and branches extending through continents like Asia. The visualization responds to the full browser viewport, with the SVG sized to the window dimensions.

Ffernandotsurukawa

68% match

Loading thumbnail…

Art tree

This visualization is an artful "tree" diagram that displays the hierarchical structure of world geography, from continents down to individual countries. The tree layout is rendered as an SVG with paths and text labels, using a custom font and text-shadow effects to create a visually rich presentation. The code leverages D3 v5 functions including `tree`, `hierarchy`, `linkHorizontal`, and `zoom` to compute positions and enable interactive pan and zoom. The data, sourced from a JSON file, contains nested geographic regions and nation names, which are displayed as text at varying font sizes based on depth.

Fforeverworld1879

68% match

Loading thumbnail…

tree

The visualization presents a hierarchical university structure as a tree diagram, showing the Global University, its departments, faculties, and professors. Nodes are rendered as size‑coded circles with distinct colors per depth level, connected by straight links. Built with D3.js v7, the code uses `d3.hierarchy` and `d3.tree` to compute layout positions, then manually normalizes x-coordinates to fit the SVG canvas. Each node displays its label and adjusts fill color based on hierarchy depth.

LLaasyaJ256

68% match