ICE_8_NIRUPAMA_NETWORK

100%

ICE_8_NIRUPAMA_NETWORK

✓ Published2🌍 Public

Last edited Oct 31, 2025

Created on Oct 31, 2025

This interactive network visualizes a family tree, mapping parent-child relationships from a CSV dataset loaded from a GitHub Gist. It uses a force-directed layout with d3.forceSimulation, incorporating forces for links, charge, centering, and collision. Node colors encode generation level, determined using d3.stratify, and draggable nodes with hover tooltips enhance exploration. The visualization is rendered in SVG using D3.js v7.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE_8_NIRUPAMA_TREES

This compact family tree visualization displays hierarchical relationships across multiple generations, with nodes colored by depth to distinguish family levels. It loads CSV data from a GitHub Gist using `d3.csv` and `d3.autoType`, converts rows into a hierarchy via `d3.stratify`, and positions nodes with the `d3.tree` layout. The SVG rendering employs curved path links through `d3.linkVertical`, color-coded circles using `d3.scaleOrdinal`, and an interactive tooltip on mouse events.

NNirupama Karanam

90% match

Loading thumbnail…

ICE 8 Network Graph

This example visualizes a hierarchical family tree as an interactive network graph, with a central parent node (Ramana) and its direct and indirect child nodes (Jaggu, Sonu, Anu, Vinay, and Jaggu’s children Usha and Vyshnavi). The visualization uses d3.forceSimulation to apply many-body repulsion, link forces, and centering forces, positioning nodes and connecting them with lines. Circles and labels are rendered via SVG, with node sizes and colors predefined in a palette. The simulation updates node positions on each tick, demonstrating a simple force-directed layout.

KK V VINITHA

86% match

Loading thumbnail…

ICE8 NETWORK plot

A network diagram visualizes family relationships across generations, with colored nodes representing people and links connecting parents to children. The graph uses D3 v7 and an SVG renderer, loading data from a CSV file, and applies a force-directed layout driven by `d3.forceSimulation` with link, charge, center, and collide forces. Nodes are draggable via `d3.drag`, and hovering displays a tooltip showing each person’s name and generation number.

Ddiwashhumagain@my.unt.edu

86% match

Loading thumbnail…

Fork of ICE-8 NETWORK

This example presents a family relationships network as an interactive force-directed graph. It shows individuals as draggable nodes and parent–child connections as links, with node color indicating generation depth. The visualization uses D3 v7’s `d3.forceSimulation` with link, charge, center, and collide forces, and loads CSV data from a GitHub Gist to build the hierarchy via `d3.stratify`. SVG rendering displays nodes, links, and labels, with a hover tooltip for additional information.

Sskmriyaz0786@gmail.com

86% match

Loading thumbnail…

Network Visualization (ICE-8)

This example visualizes a family tree as an interactive network graph in SVG, using colored nodes to distinguish grandparents, parents, and children. Force-directed layout via `d3.forceSimulation` with link, charge, and center forces positions the nodes, while links represent familial relationships. Nodes are draggable, and a legend maps roles to colors. The code uses D3 v7, applies drag behavior, and renders labels directly on each node.

Ssowjanya

85% match

Loading thumbnail…

ICE_8_NIHARIKA_NETWORK

This interactive force-directed network visualizes the hierarchical relationships among programming languages, paradigms, families, and a root node. Node colors and radii encode type via `d3.scaleOrdinal`, while parent-child links are parsed from a CSV gist. The visualization uses `d3.forceSimulation` for layout and renders animated SVG elements in a dark-themed canvas. A fixed HTML legend overlays the chart, and the code is built with D3 v7.

118121a1545

84% match

Loading thumbnail…

ICE8_family_tree

This interactive family tree visualization displays hierarchical relationships using a branching node-and-link layout, with each person represented as a circle and their descendants connected by curved paths. The tree expands smoothly when new nodes are introduced, with transitions animating nodes to their final positions. Built with D3.js version 3.5, it uses `d3.layout.tree`, `d3.svg.diagonal`, and CSS-styled SVG elements, with node colors and names coming from the embedded JavaScript dataset.

NNitheeshSama

83% match

Loading thumbnail…

Fork of ICE 8 Network Graph

This example shows a network graph of family relationships, with a central parent node connected to child nodes and further sub-nodes. The visualization uses D3.js force simulation to position the nodes and links, rendered as SVG circles and lines. The code applies `d3.forceSimulation` with `forceManyBody` for repulsion, `forceLink` for connections, and `forceCenter` to anchor the layout. Node colors and sizes are defined in a separate `colors.js` module, and the data structure is built programmatically in `data.js`.

Mmanvithareddykarra

83% match