Skip to main content
Log in
P

parth-

@par-vathy·7 public vizzes

Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. The graphic uses a circular layout where the root node "World" sits at the center, with continents, subregions, and individual countries radiating outward as labeled branches. The D3.js v4 code employs the `d3.cluster()` layout algorithm to position nodes in a radial pattern, with curved links connecting parent and child nodes. Interactive panning and zooming are implemented using `d3.zoom()`, while text labels are dynamically rotated and positioned based on node depth and angle. The visualization reads hierarchical data from a JSON file containing the UN country classification system.

Jan 7, 2020
Loading thumbnail…

Chandrapur District Town and Villages

This visualization shows a hierarchical tree of Chandrapur District, with the district as the root and expanding to towns like Bramhapuri and Nagbhid, which then branch into their constituent villages. The tree layout uses `d3.tree` and `d3.hierarchy` to calculate node positions, with `d3.linkHorizontal` generating the curved connecting paths. The SVG text labels are sized inversely with depth, using larger fonts for higher-level nodes, and the entire view supports pan and zoom through the `d3.zoom` API. The data comes from a local JSON file that defines the nested district-town-village structure.

Jan 7, 2020
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. The graphic uses a circular layout where the root node "World" sits at the center, with continents, subregions, and individual countries radiating outward as labeled branches. The D3.js v4 code employs the `d3.cluster()` layout algorithm to position nodes in a radial pattern, with curved links connecting parent and child nodes. Interactive panning and zooming are implemented using `d3.zoom()`, while text labels are dynamically rotated and positioned based on node depth and angle. The visualization reads hierarchical data from a JSON file containing the UN country classification system.

Jan 7, 2020
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. The graphic uses a circular layout where the root node "World" sits at the center, with continents, subregions, and individual countries radiating outward as labeled branches. The D3.js v4 code employs the `d3.cluster()` layout algorithm to position nodes in a radial pattern, with curved links connecting parent and child nodes. Interactive panning and zooming are implemented using `d3.zoom()`, while text labels are dynamically rotated and positioned based on node depth and angle. The visualization reads hierarchical data from a JSON file containing the UN country classification system.

Jan 7, 2020
Loading thumbnail…

Untitled

This example displays a simple HTML car report with two unordered lists, one for cars and one for trucks, each containing a model item. The page uses a monospace font set to 2em, with the "Model" item in the car list highlighted with green text via the `.highlight` class. It demonstrates static HTML markup with CSS styling through `style.css`, and the body also sets a font-size property inline. The visualization relies on plain HTML elements rather than any JavaScript libraries or data sources.

Jan 7, 2020
Loading thumbnail…

Hello VizHub

This example demonstrates the basic structure of a VizHub visualization, showing a simple text message centered on the page. The code combines an HTML file with a linked stylesheet and external D3.js library, alongside ES6 modules for organizing content. It uses d3.select to target the `#message` div and sets its text content to a string exported from a separate module. The styling applies a large font size and text alignment via CSS.

Jan 7, 2020
Loading thumbnail…

Hello VizHub

This example demonstrates the basic structure of a VizHub visualization, showing a simple text message centered on the page. The code combines an HTML file with a linked stylesheet and external D3.js library, alongside ES6 modules for organizing content. It uses d3.select to target the `#message` div and sets its text content to a string exported from a separate module. The styling applies a large font size and text alignment via CSS.

Jan 6, 2020