Skip to main content
SimilarExport ZIP
100%

familytree

✓ Published0🌍 Public
Vvaddepallinaveen
Last edited Apr 3, 2022
Created on Apr 3, 2022
Forked from HTML Starter

This example renders a zoomable hierarchical tree visualization, displaying a color-themed taxonomy where root categories like Black, Blue, and Green branch into related items. The code uses D3 v5's `tree`, `hierarchy`, and `linkHorizontal` functions to compute the SVG layout, with node labels colored via data attributes and text shadows applied through CSS. Zooming is implemented using the `zoom` event, while font sizes scale based on node depth. The data loads from a local JSON file.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Family Tree

This interactive family tree displays hierarchical relationships across multiple generations, with each node labeled by name and colored according to its position in the lineage. The visualization uses D3 v5’s `tree` layout to compute node positions and `linkHorizontal` to draw curved connecting paths, while the `zoom` function enables panning and scaling of the SVG canvas. The included JSON data file provides the family structure, and the code explicitly assigns font sizes based on tree depth and text colors from the data attributes.

Ppavankalyan1507
89% 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
88% match
Loading thumbnail…

Fork of Family Tree

This example shows a family tree visualization with color-coded nodes for each person, arranged hierarchically from a single root ancestor down through multiple generations. The tree renders as an SVG, with horizontal links connecting parent and child nodes, and labels sized according to depth in the hierarchy. The code uses d3.hierarchy and d3.tree to compute the layout, and d3.linkHorizontal for the curved connecting paths. A d3.zoom handler enables panning and zooming the entire visualization. Node colors and text are drawn from the JSON data, with a custom Playfair Display font applied via CSS.

Kkalyanikotha
88% match
Loading thumbnail…

Family Tree

This visualization presents a family tree as an interactive, animated SVG diagram built with React and D3.v3, using the `d3.layout.tree` API to compute the hierarchical layout. Color-coded nodes (distinguished by `type` values) represent different family members, and red links with directional arrows show parent-child relationships. Users can click nodes and zoom the entire tree via a zoom behavior. Data is loaded asynchronously from the `family-data.json` source, and the tree dynamically resizes its SVG canvas based on the maximum depth and breadth of the loaded data.

Aachalasam
88% match
Loading thumbnail…

Family Tree

This example presents an interactive family tree visualization showing hierarchical relationships among named individuals. The tree layout uses D3’s `d3.layout.tree` with SVG rendering and animated transitions. Nodes are color-coded by type and include click-to-expand/collapse behavior, with tooltips and zoom/drag navigation via `d3.behavior.zoom`. The tree structure comes from external JSON data loaded with `d3.json`, and the visualization is built within a React wrapper using D3 v3 and jQuery.

TTharun2022
87% 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
87% match
Loading thumbnail…

Family Tree

This interactive family tree visualizes hierarchical relationships using D3.js’s tree layout, with nodes as white circles connected by gray links. Users can click a node to collapse or expand its children, and double-click a node’s label to edit names in place via a foreignObject input. The rendering uses SVG paths with smooth `transition` animations for node and link repositioning. Zooming is enabled through `d3.zoom`, scaling the entire diagram between 0.1× and 10×. The code defines the tree structure with `d3.hierarchy` and `d3.tree`, and updates positions dynamically during interactions.

Bbtsehay
87% match
Loading thumbnail…

Family tree - trial

This family tree visualization displays a hierarchical genealogy with names and birth years, using a horizontal tree layout where each node represents a family member and links show parent-child relationships. The example builds an interactive SVG graphic using D3 v5 APIs including `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and `d3.zoom`. It loads family data from an external JSON file, with text labels whose font size decreases at deeper levels. The visualization supports panning and zooming through the zoom behavior, while ancestor nodes are centered and descendants are left-aligned.

AAce
86% match