Skip to main content
SimilarExport ZIP
100%

Fork of interactive family graph

✓ Published0🌍 Public
VVenkata Sai Preetham
Last edited Jul 10, 2022
Created on Jul 10, 2022
Forked from Hello VizHub

This fork of an interactive family graph visualizes hierarchical data as a collapsible tree with color-coded nodes representing different data types. The D3 v3 layout renders SVG rectangles connected by curved links, with tooltips and directional arrows showing relationships. The example loads its tree structure from a JSON file and supports zooming and dragging via `d3.behavior.zoom`, while node expansion and collapse animate through D3 transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Family Tree

This interactive family tree visualization displays hierarchical relationships between named individuals, with color-coded nodes indicating different family types. The tree renders as an SVG using D3 v3's tree layout and includes pan-and-zoom functionality through d3.behavior.zoom. Nodes are clickable and expand or collapse their children with animated transitions. The data comes from a JSON file, and the implementation uses jQuery alongside D3 for DOM manipulation, styling nodes, links, and tooltips with custom CSS classes.

Ssathwikrajidi
91% match
Loading thumbnail…

Fork of Family Tree

This interactive family tree visualizes hierarchical relationships among named individuals, with nodes color-coded by relationship type (type1 through type4) and directional links between members. The visualization uses D3.js v3’s layout tree API to compute node positions, rendering SVG elements with animated transitions on click to expand or collapse branches. The tree supports zooming and dragging through d3.behavior.zoom, and displays tooltips with relationship details when hovering over nodes. Data is loaded from a JSON file containing nested family structures with link metadata.

MManideepChakilam
89% match
Loading thumbnail…

Fork of Family Tree

This interactive family tree visualization displays generational relationships using a hierarchical node-link diagram, with each generation color-coded by its "type" tag from the JSON data. The D3.js v3 layout algorithm positions nodes dynamically, and users can pan and zoom the SVG canvas. The visualization animates node transitions and includes drop shadows, arrow markers, and tooltips. The tree reads from a static `data-example.json` file, and the code uses D3's `d3.layout.tree`, selection, and behavior zoom APIs to manage the interactive rendering.

Bbhargavarathod
89% match
Loading thumbnail…

Fork of Fork of Family Tree

This interactive family tree visualizes hierarchical relationships using nested nodes and connecting links, with each person represented as a colored rectangle labeled by name and type. The tree expands and collapses on click, and supports pan and zoom via mouse interactions, while tooltips display additional link information. Built with D3.js v3 and React, the SVG-based animation uses the `d3.layout.tree` algorithm to position nodes and `d3.behavior.zoom` for navigation, with data loaded from a JSON file defining the family structure.

Ssathwikrajidi
89% match
Loading thumbnail…

Fork of Family tree

This interactive D3.js visualization presents a hierarchical family tree, rendering the relationships from a grandfather down through multiple generations in an animated, expandable layout. Built with D3 v3 and jQuery, it uses SVG elements to draw nodes and links, with color-coded nodes representing different family member types. The visualization supports zoom, drag, and click interactions to explore the tree’s structure, incorporating smooth transitions and tooltips. The code uses `d3.layout.tree` for layout calculation, `d3.behavior.zoom` for pan/zoom functionality, and custom `breadthFirstTraversal` logic to manage node spacing and collision detection.

Bbindhureddy98
89% match
Loading thumbnail…

Fork of Interactive Tree

Interactive tree visualization renders a hierarchical family dataset from `treeData`. Nodes are SVG groups containing a colored rectangle and text label, connected by horizontal links. Clicking a node collapses or expands its children, triggering `transition` animations that reposition descendant nodes and labels. The visualization uses `d3.hierarchy`, `treeLayout`, and `linkHorizontal` to compute the tree layout, and a custom `zoom` event for panning and scaling the SVG canvas.

Nnagamaheswar
88% match
Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

PPrathyusha0304
87% match
Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

PPrathyusha0304
87% match