Tarea 3

100%

✓ Published0🌍 Public

Last edited Apr 20, 2021

Created on Apr 20, 2021

This visualization displays a hierarchical tree of countries organized by regions, rooted at Costa Rica. The tree layout uses D3's `d3.hierarchy` and `d3.tree` functions to calculate node positions, with curved links drawn via `d3.linkHorizontal`. Text labels show region and country names, with font size decreasing by depth. The SVG canvas supports zooming and panning through D3's zoom behavior, while CSS styling applies a cyan stroke to paths and a serif font to labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Costa Rica

This radial tree visualization displays a hierarchical World→Asia→subregion→country structure using an SVG rendering with d3.cluster layout. The view supports panning and zooming through d3.zoom, allowing exploration of the dense country hierarchy. Node labels at third depth levels orient tangentially around the circle, while shallower levels remain horizontal, with font sizes scaled by depth via d3.scaleSqrt. The data originates from data.json, mirroring Curran Kelleher’s World Countries Hierarchy block, with teal links drawn as cubic Bézier curves connecting parent-child nodes.

Pporrasgp

83% match

Loading thumbnail…

Tree visualization of countries

This visualization uses a hierarchical tree layout to display the geographic organization of countries, grouping them by region and subregion under a top-level “World” node. The data is rendered as an interactive SVG graphic, with curved horizontal links connecting parent and child nodes, and text labels displayed at varying font sizes based on depth. Built with D3.js v5, it uses `d3.tree`, `d3.hierarchy`, `linkHorizontal`, and `d3.zoom` to support panning and zooming. Node labels are positioned according to the tree layout’s computed x and y coordinates, with leaf nodes oriented to the right.

CCalvin Gomez

80% match

Loading thumbnail…

Tidy Tree Visualization

A tidy tree visualization displays hierarchical country data organized by region, with the world at the root branching into continents, subregions, and individual countries. The layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates the curved connecting paths. Text labels scale in font size based on node depth, and d3.zoom enables panning and zooming of the SVG canvas.

Vvic126

79% match

Loading thumbnail…

Countries Tree

This visualization displays a hierarchical tree of countries organized by continent and subregion, rendered as an SVG with horizontal links and text labels. The example uses D3 v5’s `tree` layout, `hierarchy`, `linkHorizontal`, and `zoom` APIs to generate and interactively pan and scale the structure. Data from `data.json` feeds the hierarchy, with font size varying by depth and leaf nodes left-aligned while parent nodes are centered.

Jjeelong

79% match

Loading thumbnail…

Tree with Countries

This visualization shows the hierarchical structure of countries organized by continent and subregion, with each country’s name displayed as a leaf node. The tree layout, generated using `d3.tree` and `d3.hierarchy`, positions nodes horizontally, and links are drawn with `d3.linkHorizontal` as SVG paths. Labels scale in font size based on tree depth, from large continent names to smaller country names, while the entire diagram supports pan and zoom via `d3.zoom`. Data is loaded from a JSON file using `d3.json`, and the SVG output is styled with a tan path color and a custom font.

LLeora Wenger

79% match

Loading thumbnail…

Fork of Costa Rica

This radial tree visualization displays a hierarchical dataset of countries organized by continent and subregion, rooted at “PlaceMaking Pedagogy.” The D3 v4 code uses `d3.cluster` to compute the radial layout and `d3.zoom` for panning and zooming. Each node is rendered as an SVG text label with size scaled by depth. The project function converts polar coordinates to Cartesian positions, with curved links drawn using SVG path commands, and the data is loaded from `data.json` via `d3.json`.

Cchun0330

79% match

Loading thumbnail…

Tree Visualization of World Countries

This visualization displays the hierarchical relationship between world countries, continents, and subregions as a horizontal tree diagram. The code uses D3 v5’s `tree` and `hierarchy` layouts to compute node positions, with `linkHorizontal` generating curved connecting paths. Text labels show country names at varying font sizes based on tree depth. The SVG rendering supports zooming and panning through D3’s `zoom` behavior, and the data comes from a nested JSON file. The styling uses the IM Fell English SC font.

CCassie

79% match

Loading thumbnail…

Data Tree

This visualization shows a hierarchical tree of world regions and countries, with countries nested under their respective continents and subregions. The tree is rendered with SVG paths connecting parent and child nodes, using a horizontal layout where text labels display country names at sizes that decrease with depth. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout, and includes zoom functionality via `d3.zoom`. Data comes from a static JSON file containing the geographic hierarchy.

MMichael Milano

79% match