jmukul1997

@jmukul1997·4 public vizzes

Fork asd

This visualization presents a hierarchical tree of world regions and countries, using a tidy tree layout with horizontal links and zooming support. The data is loaded from a local JSON file containing a nested structure of continents, subregions, and nations. Built with D3 v5, the code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to position nodes and draw connecting paths, while `d3.zoom` enables pan and zoom interactions on the SVG container. Text labels are styled with a Playfair Display font and sized inversely to node depth.

Apr 1, 2021

Loading thumbnail…

Fork of Fork of Fork of World Countries asd

A hierarchical tree diagram maps countries grouped by continent and subregion, using a D3.js v5 layout with horizontal link paths. The visualization reads country names from a local `data.json` file, displaying text labels sized inversely to their depth in the tree. Built with the `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` APIs, it supports interactive zooming via a custom `zoom` event that applies SVG transforms.

Apr 1, 2021

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion. It uses a left-to-right tree layout with curved links and sized text labels, where font size decreases with depth. The rendering is built with D3 v5, using `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and `d3.zoom` for pan and zoom interactions. Data comes from a nested JSON file containing country groupings.

Apr 1, 2021

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, with the root labeled "Asia" and branches extending to regions like Southern Asia and individual nations. The D3 v5 code uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkHorizontal` to draw curved links between nodes, and `d3.zoom` for panning and zooming. Text labels render each node’s name with font sizes that shrink by depth, while styles.css applies a serif font and green stroke. The data comes from the bundled `data.json` file.

Apr 1, 2021