Skip to main content
Log in
F

foorcun

@foorcun·3 public vizzes

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. Using D3.js v5, the code loads the country dataset from `data.json` and applies a `tree` layout with `linkHorizontal` edges to create the branching structure. The resulting SVG rendering shows country names as text nodes, with color-coded paths connecting them. A `zoom` event handler allows interactive panning and scaling, while the `Playfair Display` font and text-shadow styling enhance readability. The visualization presents geographic relationships in an expandable, navigable format.

Apr 13, 2023
Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout. It uses d3.hierarchy and d3.tree to compute the layout, then renders text labels for each node and curved linkHorizontal paths for the connections. The chart includes zoom functionality via d3.zoom, which applies a transform to the entire SVG group. The data comes from a JSON file containing a nested country classification by geographical regions.

Apr 13, 2023
Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. Using D3.js v5, the code loads the country dataset from `data.json` and applies a `tree` layout with `linkHorizontal` edges to create the branching structure. The resulting SVG rendering shows country names as text nodes, with color-coded paths connecting them. A `zoom` event handler allows interactive panning and scaling, while the `Playfair Display` font and text-shadow styling enhance readability. The visualization presents geographic relationships in an expandable, navigable format.

Apr 13, 2023