Blank Canvas

100%

✓ Published0🌍 Public

Last edited Dec 2, 2019

Created on Dec 2, 2019

A hierarchical tree visualization displays the geographic regions and countries of the world as a branching structure. The page implements a zoomable, horizontally-oriented tree using `d3.tree` and `d3.hierarchy` on the loaded hierarchical JSON data, with `d3.linkHorizontal` generating curved paths and `d3.zoom` enabling pan and zoom interactions. Node labels are rendered as SVG text elements, with font size decreasing per depth level.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas

A hierarchical tree chart displays the nested structure of world regions and countries, with each node labeled by name. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to draw curved paths between parent and child nodes, while `zoom` enables interactive panning and scaling of the entire diagram. Text size decreases with depth, and labels are positioned to align with leaf nodes or center over branching nodes, all rendered as SVG elements within a fixed, full-viewport canvas.

AAnShed

93% match

Loading thumbnail…

Blank Canvas

This visualization displays a hierarchical tree of global geographic regions, from World down to individual countries. The tree uses a horizontal layout where parent nodes are centered above their children, with nodes positioned along the vertical axis. The code uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and render the structure, while d3.zoom handles panning and zooming. Text labels have a white text-shadow effect for legibility, and all elements are drawn using standard SVG paths and text elements. The data is loaded from a JSON file containing sub-region nesting.

TTomoyukiEguchi

92% match

Loading thumbnail…

Blank Canvas

This visualization renders a hierarchical dataset of world regions and countries as a horizontal tree layout, with the root node ("World") anchored on the left and descendants extending rightward. The SVG output uses `d3.tree` and `d3.hierarchy` to compute node positions, while `d3.linkHorizontal` generates the curved connecting paths. Text labels, sized inversely to their depth, are placed at each node, and a `d3.zoom` handler enables panning and scaling of the entire canvas. The styling employs the Playfair Display font and teal strokes for the links.

AAnShed

92% match

Loading thumbnail…

Blank Canvas

This visualization presents a hierarchical tree of geographic regions and countries, rendered as an SVG using D3’s `tree` layout and `linkHorizontal` path generator. The code loads JSON data and positions nodes by their depth, with labels anchored left or center depending on whether they have children. The viewport fills the browser window, and the tree spans the full available width and height, though zoom functionality is present but commented out.

Lliyaxuanliyaxuan

91% match

Loading thumbnail…

Blank Canvas

An interactive tree diagram displays hierarchical country data, organized by continent and region from root World node down to individual nations. The visualization uses D3 v5's tree layout with horizontal link paths to connect parent and child nodes, while the SVG canvas spans the full viewport. The blank white background emphasizes the structural relationships between geographic classifications without additional styling or node labels.

Aaidanoconnor1

90% match

Loading thumbnail…

Fork of Blank Canvas

This visualization shows a hierarchical tree of world countries organized by continent and region, displaying each country’s name as text connected by branching paths. The layout uses d3.tree and d3.hierarchy to process the nested JSON data, while d3.linkHorizontal generates the curved connector paths. All elements are rendered as SVG paths and text nodes, with the tree oriented left-to-right across the full viewport. The code explicitly sets the SVG dimensions from the document body and loads data asynchronously via d3.json.

Ddanish-nix

88% match

Loading thumbnail…

Blank Canvas

A treemap displays the hierarchical structure of world regions and countries, with nested rectangles representing continents, subregions, and individual nations. The visualization uses SVG rendering with D3 v5, building the tree from a `data.json` file containing geographic groupings. The underlying code employs a force-directed simulation approach, though the visible output is a static hierarchical layout of geographic areas.

Mmohdabidali

87% match

Loading thumbnail…

Blank Canvas Cross

On page load, the visualization populates its blank SVG canvas with a horizontal dendrogram derived from a nested JSON dataset of world regions and countries. The tree layout recursively positions each node in a hierarchical branching pattern, with links drawn as smooth horizontal curves. The layout uses d3.tree() and d3.hierarchy() to process the data, while d3.linkHorizontal() generates the path coordinates. The code author uses D3 v5 within a React framework, though the direct SVG rendering bypasses React and relies on raw DOM selection.

JJake

87% match