Skip to main content
SimilarExport ZIP
100%

Blank Canvas Cross

✓ Published2🌍 Public
JJake
Last edited Jul 20, 2020
Created on Jul 19, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

Blank Canvas

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.

Aaidanoconnor1
87% match
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
86% 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
85% 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
84% 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
83% match
Loading thumbnail…

Blank Canvas Cross

A large circle is drawn on a full-screen SVG canvas, with a horizontal line bisecting its lower portion and a vertical line crossing the entire viewport, forming a cross-like composition. The visualization uses D3 v5 selections to append SVG elements, dynamically sizing the canvas based on the browser’s client dimensions. The circle and lines are styled via CSS, with the circle having a white fill and black stroke, while the lines use a black stroke and fixed 4-pixel width.

JJake
82% match