Farzand-e-Ali

@FarzandAli26·6 public vizzes

Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical structure of country records and their associated rules, such as "Incoming." The root node sits at the center, with branches extending outward to represent child nodes at varying depths. The visualization uses a circular layout where the radial position indicates hierarchical level, and the size of text labels decreases with depth. The implementation uses the D3 v4 library, specifically the `d3.cluster` and `d3.hierarchy` APIs to compute the radial tree layout. It features pan and zoom interactions through the `d3.zoom` function, which updates the SVG group's transform attribute. Data is loaded from an external JSON file, and the tree is rendered as SVG paths for links and circles with text labels for nodes. The code also applies a custom glow effect to text labels using CSS text-shadow properties.

Mar 17, 2020

Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JSON object as an interactive, collapsible tree diagram using D3 v5’s `tree` layout and SVG rendering. It converts arbitrary JSON data into a hierarchical structure with `hierarchy()` and renders nodes as text labels showing each key, type, and value. The tree supports zooming via `d3.zoom` and toggling branches on click, allowing users to explore nested objects and arrays. The sample data includes personal records with nested objects and arrays, demonstrating how different data types are represented visually.

Mar 17, 2020

Loading thumbnail…

ANY JSON tree (DRAFT)

This example renders any JSON object as an interactive tree diagram using D3 v5’s `tree` layout and `hierarchy` function. Clicking a node toggles its children, while a zoom behavior enables panning and scaling. The sample data includes nested objects and arrays, such as travel records and vehicle details, which are converted into a hierarchical structure via the `hierarchify` function. Links are drawn with `linkHorizontal`, and node labels display the key name, type, and value, with SVG text elements providing the visual output.

Mar 17, 2020

Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JSON object as an interactive tree diagram, allowing users to explore nested data structures and their values. The tree renders in SVG, with nodes labeled by key names and showing their type (object, array, string, number, etc.) alongside the value. The code uses D3 v5’s `tree` layout and `hierarchy` to structure the data, with `linkHorizontal` for the connecting paths and a zoom behavior for panning. Node labels are generated by a custom `hierarchify` function that recursively converts the JSON into a hierarchical format, and clicking branches toggles their children to collapse or expand the tree.

Mar 17, 2020

Loading thumbnail…

Radial Tree of Countries Hierarchy

A radial tree visualization displays the hierarchical relationship of countries grouped by continent and subregion. The code uses d3.json to load the data, d3.hierarchy to build the tree structure, and d3.cluster to compute the layout. Panning and zooming interactions are implemented with d3.zoom. SVG paths connect parent nodes to children with curved links, and text labels show country names with font sizes scaled by tree depth.

Mar 11, 2020

Loading thumbnail…

ANY JSON tree (DRAFT)

This visualization renders any JSON object as an interactive, collapsible tree using D3 v5’s `tree` layout and SVG rendering. It first converts the raw JSON into a hierarchical structure via a custom `hierarchify` function, then displays nodes with links drawn using `linkHorizontal`. The tree supports zooming through `d3.zoom` and click-to-toggle branches, with each node labeled by its key, type, and value, making it useful for exploring nested data like the included NADRA and travel records.

Mar 11, 2020