Blank Canvas

100%

✓ Published0🌍 Public

Last edited Apr 8, 2024

Created on Apr 5, 2024

Forked from Let's make a face with D3.js!

This visualization displays a hierarchical tree of world regions, subregions, and countries using a horizontal dendrogram layout. It shows the organizational structure of global geography, from continents down to individual nations. The code uses d3.tree, d3.hierarchy, and d3.linkHorizontal to compute and draw the paths, with SVG text elements labeled with each node’s name. Data comes from a local data.json file, and the Montserrat font is loaded via Google Fonts, with zoom and pan functionality enabled through d3.zoom.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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

89% match