Alejandromartinms

@Alejandromartinms·2 public vizzes

Diagrama Programatico MAYUa

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.

Nov 9, 2022

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree MAYUa

This example visualizes a hierarchical tree of automotive brands and their parent companies, such as General Motors, Volkswagen, and Stellantis, using an interactive SVG diagram. The code constructs the tree from an embedded JavaScript data object and renders it with the D3.js v3 layout API, specifically `d3.layout.tree` and `d3.svg.diagonal` for curved links. Animated transitions update node positions over 750 milliseconds, while orange links and steelblue node circles provide clear visual separation. Clicking a node toggles the expansion of its children, making the brand ownership structure explorable.

Nov 2, 2022