Skip to main content
SimilarExport ZIP
100%

Link Tree Viz of World Countries

✓ Published0🌍 Public
JJoris Compernol
Last edited Aug 6, 2020
Created on Jul 30, 2020
Forked from HTML Starter

This example displays five circles and five rectangles representing score and population data, with circle size and opacity mapped to scores and bar width corresponding to city populations. Built with React and D3 v5, it uses SVG selections and data joins to bind arrays from `scores.js` and inline city objects. Circles are styled conditionally via CSS classes, while rectangles change fill on hover.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Link Tree Viz of World Countries

This visualization displays a hierarchical tree of world countries as an interactive node-link diagram. The view uses blue circles for nodes and curved, arrow-headed paths for directed links, with all elements offset vertically by 150 pixels. The implementation relies on D3 v5's `linkHorizontal` generator to create smooth horizontal curves between connected nodes, while data is loaded from a local JSON file via `d3.json`. The SVG rendering positions nodes based on explicit x,y coordinates from the data, and the visualization includes marker definitions for the arrow tips.

JJoris Compernol
80% match
Loading thumbnail…

Link Tree Viz of World Countries

This visualization displays a directed link tree of world countries using a simplified node-link diagram. It renders six circular nodes with horizontal curved paths connecting them, using an arrow marker to indicate link direction. The code uses D3 v5 with SVG rendering, employing `linkHorizontal()` to generate the curved paths from predefined x/y coordinates in a static JSON data file. Nodes and links are styled with a blue color scheme, though the layout is not computed by any force simulation or tree layout algorithm.

QqOp3
79% match
Loading thumbnail…

Link Tree Viz of World Countries

A link tree visualization displays world countries as nodes connected by directional links, with arrow markers indicating flow direction. The SVG rendering positions nodes at fixed coordinates from a JSON data file and offsets them vertically for link path generation. Using d3.json, d3.linkHorizontal, and D3 v5 selection joins, the visualization draws curved horizontal paths with blue strokes and circles for nodes. The code includes a marker definition for arrowheads, though no interactive behavior or force simulation is currently active.

SSubhas Ramdass
78% match
Loading thumbnail…

Link Tree Viz of World Countries

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. It uses a D3.js v5 tree layout with horizontal link paths to show the branching structure. The SVG rendering applies a zoom feature that allows users to pan and scale the visualization. Text labels are styled with the Sriracha font, while data is loaded from a JSON file containing the country hierarchy. The code uses D3's `tree`, `hierarchy`, `linkHorizontal`, and `zoom` components to generate the chart.

Mmla341
78% match
Loading thumbnail…

World Countries Tree

A circular tree layout displays population data for ten major countries, with each country as a leaf node sized by its population value. The visualization uses a fixed-size SVG canvas with a rounded background rectangle. The code builds the hierarchical layout using D3's tree module and renders the nodes and links as SVG elements. The data comes from a static CSV file read through D3's data-loading methods, and the visualization updates through D3's standard enter-update-exit pattern.

LLlubi-l
75% match
Loading thumbnail…

World countries tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. Using D3.js v5 with a React framework, it renders SVG elements with the `tree` layout and `linkHorizontal` generator to create branching paths. The code loads hierarchical JSON data and supports pan-and-zoom interactions via `d3.zoom`, with text labels sized proportionally to depth within the hierarchy.

Eevapavlinek
75% match
Loading thumbnail…

World Tree

This visualization shows the hierarchical structure of world regions and countries as an interactive tree. The root node “World” branches into continents, subregions, and individual nations, with text labels sized by depth. Built with D3 v5 in React, it uses `d3.tree` and `d3.hierarchy` with `d3.linkHorizontal` for curved links, while `d3.zoom` enables panning and scaling. Country data comes from `data.json`, rendered as an SVG with Playfair Display typography.

JJake
75% match
Loading thumbnail…

World Tree

This visualization shows the hierarchical structure of world regions and countries as an interactive tree. The root node “World” branches into continents, subregions, and individual nations, with text labels sized by depth. Built with D3 v5 in React, it uses `d3.tree` and `d3.hierarchy` with `d3.linkHorizontal` for curved links, while `d3.zoom` enables panning and scaling. Country data comes from `data.json`, rendered as an SVG with Playfair Display typography.

JJake
75% match