Arastu-360

100%

✓ Published1🌍 Public

Last edited Oct 18, 2020

Created on Oct 18, 2020

Arastu-360 shows a radial genealogical tree of Arastu Yar Jung’s family, with individuals as leaf labels and parent–child relationships drawn as curved links. The entire tree slowly rotates, while nodes fade in sequentially. It uses D3 v5’s `tree` layout, `linkRadial` for link paths, and `transition` to animate opacity. Data comes from a local `data.json` file, and rendering is done with SVG text and path elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Arastu-360

Hhyderhusainarastu

100% match

Loading thumbnail…

Arastu-360

Arastu-360 visualizes a family tree as a radial layout, with the patriarch Arastu Yar Jung at the center and descendants radiating outward. The entire tree slowly rotates in a continuous circular animation, while individual nodes and links fade in sequentially. Built with D3.js v5, it uses `d3.tree`, `hierarchy`, and `linkRadial` to compute the radial positions and paths, and `.transition()` to animate the opacity of elements. The data is loaded from a JSON file, and the visualization renders as SVG with an animated rotation driven by a recursive timer.

Nnadia-el

95% match

Loading thumbnail…

Arastu-360

Arastu-360 visualizes a family tree as a radial dendrogram, with each named ancestor and descendant positioned along concentric rings radiating from the center. The entire tree slowly rotates around its origin, and nodes and links fade in sequentially from the root outward. Using D3 v5’s `d3.tree`, `d3.hierarchy`, and `d3.linkRadial`, the SVG renders genealogical data loaded from a JSON file, while `d3.transition` and `d3.easeLinear` drive the rotation and phased appearance.

Nnadia-el

94% match

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.

Ssameerarastu

93% match

Loading thumbnail…

Arastu Family Tree

A radial tree diagram visualizes the Arastu family's genealogical data from a JSON file. The D3.js v5 layout positions descendants around a central root, with curved link paths and rotated text labels. Upon loading, the tree's paths and labels fade in sequentially, and the entire structure slowly rotates. The visualization supports interactive zooming and dragging through D3's zoom and drag behaviors, with the SVG rendering updated accordingly.

SShanthi Acharya

90% match

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.

Ssameerarastu

90% match

Loading thumbnail…

Family Tree :)

This interactive family tree visualization displays a three-generation genealogy, with the root ancestor ’Bhadraiah’ at the top and his children and grandchildren branching downward. The diagram uses a collapsible tree layout that responds to clicks, allowing users to expand or collapse nodes. Built with D3.js (version 3.5.17), it employs the `d3.layout.tree` for node positioning and `d3.svg.diagonal` to draw curved links between relatives. The SVG rendering includes animated transitions (750ms duration) that smoothly move nodes to new positions when the tree structure changes, while circle and text elements are styled via CSS classes.

Vvagdevi-369

74% match

Loading thumbnail…

Family tree

A radial family tree plots descendants around a central root, with each node’s radial position mapping birth year. Concentric decade rings and labels provide temporal context, while curved links connect parents to children. The visualization is built with D3.js, using `d3.layout.tree` for hierarchical layout and `d3.svg.diagonal.radial` for curved edge paths. Node colors vary by depth, and the SVG rendering uses a custom year-to-radius scale derived from birth dates in the JSON data.

AAce

73% match