Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ggeethanjalikotaru
Last edited Apr 13, 2023
Created on Apr 13, 2023
Forked from HTML Starter

A family tree displays six names across four generations as colored circles connected by green paths. The visualization uses d3.stratify() to structure hierarchical data and d3.tree() to compute node positions in a 600-by-300 layout. Each generation receives a distinct color via a switch function, with nodes rendered as SVG circles and text labels. Paths animate from source to target using transition().duration(1500), while circles grow into place over 700 milliseconds. The SVG scales to the full window size, and all elements are positioned within a translated group.

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 example shows a family tree visualization with nodes colored by generation and animated SVG paths connecting parents to children. The tree layout uses d3.stratify() and d3.tree() to compute node positions from the hierarchical data. Circles and text labels are rendered as SVG elements, with d3 transitions animating the connecting paths and node sizing. Generation colors are assigned via a custom switch function, and the SVG fills the browser viewport.

AAshrith Kudidhi
88% match
Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchical dataset of family members across several generations, with nodes colored by generation and connected by animated green links. Built with D3.js v6, the code uses the `d3.stratify()` utility to structure the parent-child data and `d3.tree()` to compute the layout. Nodes are rendered as SVG circles with a 1.5-second path-drawing transition, while text labels identify each person. Generation colors are assigned via a custom `setGenerations()` switch function, ranging from orange for the root to teal for deeper levels.

GGARIDIDEEKSHITHREDDY
88% match
Loading thumbnail…

Famil Tree

This example visualizes a family tree as an animated node-link diagram. A fixed root node ("Veera") branches into multiple generations, with individual names displayed inside circles. The implementation uses D3 v6’s `d3.stratify()` and `d3.tree()` to compute hierarchical layouts, then renders SVG paths and circles. Transitions animate the paths, circles, and text over time, with each text label’s delay increasing by depth. Styling applies lightblue fills, brown strokes, and centered placement.

KKiran3295
87% match
Loading thumbnail…

Family Tree

This interactive family tree uses a static dataset of parent-child relationships to display three generations of a family. The visualization uses D3.js v6 and React, rendering circles as nodes connected by animated lines in an SVG. The tree layout is computed using D3's stratify and tree algorithms, with the nodes and links animating into place via transitions that vary in duration based on node depth. The data is hardcoded in the source file, and each node displays the family member's name.

PPrasanth Damarla
86% match
Loading thumbnail…

Famil Tree

This visualization shows a family tree with colored circles representing individuals and lines connecting parents to their children. The data is hardcoded as a list of parent-child relationships, and the tree layout is computed using D3's `d3.stratify()` and `d3.tree()` functions. Rendered as an SVG with animated transitions, nodes are drawn as circles styled with pink fills and blue strokes, while text labels appear inside each circle. The animation uses D3's `.transition().duration()` to smoothly draw connections and reveal nodes over time.

SSnigdha6698
86% match
Loading thumbnail…

Family Tree

A family tree visualization displays hierarchical parent-child relationships across four generations, with nodes colored by depth and labeled with character names. Each connection animates from a horizontal line into a diagonal link as the tree expands. The implementation uses D3 v6’s `d3.stratify()` to build the hierarchy from flat data and `d3.tree()` to compute layout positions, while SVG circles, text, and paths are rendered with transitions on `attr` for smooth node growth and link drawing.

LLG0498
86% match
Loading thumbnail…

Untitled

This visualization presents a hierarchical tree diagram depicting a family lineage, where each node is represented by a colored circle and labeled with a name. The size of each circle corresponds to a numeric value, while the stroke and fill colors indicate the node's type and level. The diagram, rendered as an SVG, uses the D3.js library, specifically the `d3.tree()` layout and `d3.hierarchy()` function to structure the data. Curved links connect parent and child nodes, with their stroke color also reflecting the level of the child node. The data is embedded directly within the JavaScript code as a JSON object.

SSonuSriN
86% match
Loading thumbnail…

Family Tree

A family tree displays ten nodes connected by animated paths, with each circular node labeled by a family member's name. The visualization uses D3 v6's `d3.stratify()` to build a hierarchy from flat parent-child data, followed by `d3.tree()` to compute node positions. SVG circles and text elements are rendered on a black background, with lime-green strokes and light-green fills. Paths between nodes animate from zero length to full connections over one second, while circles expand over 800 milliseconds, creating a sequential reveal of the hierarchical relationships.

SSohilaBheemReddy
86% match