Skip to main content
SimilarExport ZIP
100%

family tree

✓ Published0🌍 Public
AABCDB15
Last edited Apr 4, 2022
Created on Apr 4, 2022

This interactive family tree visualization displays hierarchical relationships using collapsible nodes and animated transitions. Built with D3.js and jQuery, it renders an SVG tree with color-coded node types (blue, green, yellow, purple) and directional links labeled as SYNC or ASYN. The layout computes node positions dynamically via D3’s tree layout, with zooming, dragging, and tooltip support. Data comes from a local JSON file, and the tree adapts its dimensions to the maximum breadth and depth of the hierarchy during traversal.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Family tree

This interactive family tree visualization displays hierarchical relationships using a box-and-link diagram, with color-coded nodes representing different family member categories. Built with D3.js v3 and jQuery, the SVG-based tree supports zooming, dragging, and click interactions to explore the nested JSON data structure. The layout uses d3.layout.tree to position nodes, with animated transitions and tooltips that appear on hover, while custom utilities like breadthFirstTraversal handle collision detection and dynamic height calculation.

Bbindhureddy98
93% match
Loading thumbnail…

Family Tree

This interactive family tree visualizes hierarchical relationships using a collapsible node layout. The D3.js v3 code loads JSON data and renders individuals as colored rectangles connected by directional links, with tooltips and zooming support. The tree uses `d3.layout.tree` for positioning, SVG for rendering, and CSS for styling nodes and links. Animated transitions handle node expansion and collapse when clicked, while arrow markers indicate link direction.

Hharika-1929
92% match
Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships among family members using a collapsible tree layout. The D3.js v3 library constructs the diagram as SVG elements, with nodes represented as colored rectangles that branch from a root ancestor. The tree loads its structure from a JSON data file, and users can click individual nodes to expand or collapse their branches. The visualization includes zoom and pan capabilities through D3's behavior API, while a custom tooltip system displays additional information on hover.

PPavaniMangugari
92% match
Loading thumbnail…

Family Tree

This interactive D3.js v3 family tree visualizes hierarchical generational data from a JSON file, using colored nodes to distinguish four family types. The tree layout computes node positions, with SVG rectangles and foreignObject text blocks rendering each family member’s name. Animation transitions reposition nodes when the hierarchy updates, while zoom and drag behaviors allow panning and scaling via `d3.behavior.zoom`. Links and arrow markers connect parent-child relationships, and a collision-avoidance pass prevents overlapping nodes.

Uubl2
91% match
Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships among individuals, with nodes color-coded by type and labeled links showing connections. The tree supports zooming, panning, and clicking nodes to expand or collapse branches. Built with d3.v3, it uses `d3.layout.tree` for layout, SVG elements for rendering, `d3.behavior.zoom` for interaction, and animated transitions. Data comes from a JSON file containing nested family members and their link attributes.

Ggopiganta
91% 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
91% match
Loading thumbnail…

Family Tree

This interactive family tree visualizes a multi-generational genealogy, with each family member displayed as a colored, labeled node in a hierarchical layout. The diagram is rendered as an SVG using D3.js v3’s tree layout, with links between relatives and a zoom-and-drag behavior for navigation. Each node’s color encodes a generation type, and hovering or clicking reveals tooltips and expands or collapses branches with a smooth animation. The data comes from a static JSON file, and the visualization updates dynamically as users interact.

Aakhil kata
91% match
Loading thumbnail…

Family Tree

A D3.js v5 family tree visualizes hierarchical relationships with colored nodes and horizontal links, using SVG rendering and animated transitions. The tree layout (`d3.tree`) positions nodes, while `d3.hierarchy` converts the JSON data from `data.js` into a traversable structure. Users can click nodes to collapse or expand branches, triggering smooth animations via `transition()`. Zoom and pan functionality is implemented with `d3.zoom`, and drag gestures are detected on node groups. Node colors derive from the data object, and labels display names with dynamic sizing based on text length.

MMar-99
91% match