Skip to main content
Log in
S

sameerarastu

@sameerarastu·4 public vizzes

Loading thumbnail…

Arastu-360

Arastu-360 displays a family tree as a radial dendrogram, with the root ancestor at the center and descendants branching outward in a circular layout. The entire tree slowly rotates continuously, revealing all branches. The visualization loads hierarchical data from a JSON file, computes the radial layout with `d3.tree` and `d3.hierarchy`, and renders links using `d3.linkRadial`. Nodes are labeled with rotated text, and both links and labels fade in sequentially using D3 transitions. The rotation is achieved by repeatedly applying a transform with `d3.transition` and a linear easing function, creating a slow, automatic spin.

Aug 9, 2019
Loading thumbnail…

Arastu Family Tree

This radial tree visualization displays the Arastu family hierarchy, with each person’s name positioned along concentric rings according to their generational depth. The SVG elements fade in sequentially, creating a cascading reveal of the family structure. The code uses D3 v5’s `d3.tree`, `d3.hierarchy`, and `linkRadial` to compute the layout, while `transition.attrTween` animates a continuous 360-degree rotation of the entire tree. User interaction is supported via `d3.zoom` and `d3.drag`, allowing both pan and zoom control over the rendered paths and text labels.

Jul 29, 2019
Loading thumbnail…

World Countries Tree

The visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a radial tree. Country and region names appear as text nodes connected by curved, branching paths, with font size decreasing at deeper levels. The radial layout and linking paths are generated using D3’s `d3.tree`, `d3.hierarchy`, and `d3.linkRadial` APIs. Users can pan and zoom the entire SVG graphic via D3’s `d3.zoom` interaction, which applies a transform to a dedicated zoom group. The data is loaded from a local JSON file.

Jul 7, 2019
Loading thumbnail…

Family Tree

This radial tree visualization displays a hierarchical world geography dataset, grouping countries by continent and region. The code uses D3 v5’s `tree` layout with a radial point size, then draws curved links via `linkRadial` and places labels using `radialPoint`. Interaction includes D3’s `zoom` behavior for panning and scaling. Styling applies a custom Playfair Display font and teal strokes. The data comes from a static JSON file, rendered as SVG text and paths.

Jul 2, 2019