Tran Ly Tan (@tantranlee), VizHub

Hello VizHub

This example demonstrates a hierarchical tree visualization of world geography, showing countries organized by continent and subregion. The SVG rendering uses d3.hierarchy and d3.tree to compute node positions, with d3.linkHorizontal generating curved paths between parent and child nodes. Country and region names are displayed as text labels positioned according to the tree layout coordinates. The visualization loads its nested JSON data via d3.json and renders entirely through SVG elements, with CSS styling for the connecting paths.

Oct 13, 2019

Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

Oct 13, 2019

Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

Oct 13, 2019

Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

Oct 13, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the simplest possible D3.js visualization: a static text message rendered to the screen. It imports the `select` function from D3 and uses it to set the text content of a `<div>` element with the ID `message`. The message string itself comes from a separate local ES6 module, `myMessage.js`, which exports the text "Hello VizHub!". The visualization is minimal, serving as a template for how to structure a D3 v5 project with modular JavaScript, an HTML entry point, and a linked CSS file.

Oct 13, 2019