Skip to main content
SimilarExport ZIP
100%

Family Tree Shahaji Raje -By Sushil

✓ Published0🌍 Public
Sskambhore04
Last edited Apr 5, 2022
Created on Mar 29, 2022
Forked from HTML Starter

A family tree for Shahaji Raje and his descendants is shown as an animated, collapsible SVG diagram. The visualization uses D3.js version 3.5 to render a hierarchical tree layout, with nodes representing family members and links indicating parent-child relationships. Each node is a circle colored by a `type` property and labeled with the person’s name. Users can click nodes to collapse or expand branches, with transitions animating node positions over 750 milliseconds. The code defines the tree data inline as a JavaScript array and uses `d3.layout.tree` and `d3.svg.diagonal` for layout and path generation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Create a family tree

This example builds a family tree visualization from a small dataset of parent-child relationships, using D3.js v5 and React. The tree structure is created with `d3.stratify()` and `d3.tree()`, which arranges nodes hierarchically, and the SVG rendering places circles for each family member connected by links. The data includes historical figures like ShahajiRaje and ShivajiRaje, with the resulting diagram displayed on a light gray background.

Sskambhore04
83% 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
80% match
Loading thumbnail…

Family Tree

This visualization presents a family tree as an animated, zoomable node-link diagram. It reads hierarchical data from a JSON file and renders it as colored, clickable rectangles connected by labeled links, using D3.js v3 and React. The layout, computed via `d3.layout.tree`, supports interactive expansion and collapse of nodes, with tooltips and drag-to-pan functionality. The tree's size adjusts dynamically based on the data, and the code includes custom SVG definitions for arrows and drop shadows.

Ssathwikrajidi
78% match
Loading thumbnail…

Family Tree

This interactive D3.js v3 visualization displays a hierarchical family tree, with nodes representing individuals like Mohan, Ishaan, and Ananya, connected by labeled links indicating relationships. The tree uses colored rectangles for nodes, with SVG and animation enabling a dynamic, zoomable interface. Users can click nodes to expand or collapse branches, and tooltips provide additional information. The layout is computed using D3's tree layout API, with data loaded from a JSON file.

AAkrutiKhurana2103
78% match
Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships using an expandable node-link diagram. The tree structure is defined in a JSON file with nodes representing family members and links depicting connections. Using D3.js v3, the visualization renders nodes as colored rectangles with descriptive labels, while animated transitions and zooming capabilities enhance navigation. Each node can be clicked to reveal or hide its children, and the layout automatically adjusts to accommodate the expanded structure. The tree is built using the `d3.layout.tree` algorithm, with SVG for rendering and CSS classes for styling node states like selected links and tooltips.

SSravyaAnnadi
78% match
Loading thumbnail…

family tree

This example shows an animated family tree using D3.js v6, with nodes representing family members and lime-green links indicating parent-child relationships. The visualization uses `d3.stratify()` to build the hierarchical structure from a flat data array, then applies `d3.tree()` to compute node positions in a 900x350 layout. SVG elements—circles for nodes and paths for connections—are rendered with transitions that animate the links over 1000 milliseconds and the node radii over 800 milliseconds. The data includes ten named family members, with the root node "Surya" having no parent.

VVaishnavi6199
78% match
Loading thumbnail…

family tree

This example shows an animated family tree using D3.js v6, with nodes representing family members and lime-green links indicating parent-child relationships. The visualization uses `d3.stratify()` to build the hierarchical structure from a flat data array, then applies `d3.tree()` to compute node positions in a 900x350 layout. SVG elements—circles for nodes and paths for connections—are rendered with transitions that animate the links over 1000 milliseconds and the node radii over 800 milliseconds. The data includes ten named family members, with the root node "Surya" having no parent.

VVaishnavi6199
78% match
Loading thumbnail…

Family Tree

This interactive family tree visualizes a multi-generational genealogy dataset using a collapsible tree layout. Users can click on nodes to expand or collapse branches, with smooth animated transitions between states. The visualization is built with React and D3.js, specifically using `d3.layout.tree` for hierarchical positioning and `d3.svg.diagonal` for curved links. SVG elements render nodes and text labels, while CSS styles define the red node circles and blue connecting lines. The tree data is embedded directly in the JavaScript, and the animation duration is set to 750 milliseconds.

Aavinash021997
77% match