Skip to main content
SimilarExport ZIP
100%

Family Network - Rajan

✓ Published1🌍 Public
Kkhushburajan2015@gmail.com
Last edited Nov 6, 2025
Created on Nov 6, 2025
Forked from Network

A force-directed family network that distinguishes generations and relationships. Grandparents, parents, and children appear as color-coded nodes, with solid lines for parent–child links and dashed lines for spouse connections. Built with D3 v7, it uses `d3.forceSimulation` to position nodes in an SVG canvas. A fixed tooltip displays on hover, while a legend clarifies the visual encoding of roles and link types.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Family Tree - Rajan

A family tree visualization maps a lineage from grandparents to children, using a hierarchical layout. Each couple is displayed as a rounded rectangle, with the partners' names separated by a vertical divider, while single children are shown as circles. The chart uses d3.tree for the layout, d3.linkVertical for curved edges, and d3.csvParse to load the family data from an embedded CSV string. Node shapes and colors are assigned by the d3.scaleOrdinal scale based on each member’s generational type, with SVG rendering used throughout.

Kkhushburajan2015@gmail.com
85% match
Loading thumbnail…

Family Network graph

This example visualizes a family network as a force-directed graph, with eight named nodes connected by weighted links that represent relationships. The code uses D3 v4’s `d3.layout.force` to compute node positions and render the structure as an SVG, drawing red links with stroke widths proportional to each link’s `weight` value. Node labels appear in orange text with blue circles, and interactive dragging is enabled via `force.drag`. Data is loaded from an external `data.json` file, which defines the nodes and their connection weights.

DDINESH SAI BOPPANA
81% match
Loading thumbnail…

Social Network

This social network visualization displays family relationships using a force-directed graph, with orange links connecting labeled nodes that represent individuals such as “husband,” “wife,” and “daughter’s son.” The code loads family data from a JSON file and uses `d3.layout.force` with gravity, charge, and distance parameters to position the nodes. Node circles are styled with a blue fill, and link thickness reflects each relationship’s weight. Text labels are placed beside each circle using SVG groups, and node dragging is enabled via `force.drag`.

Ppavankalyan1507
81% match
Loading thumbnail…

Social Network graphic

This social network graphic visualizes family relationships using a force-directed layout, with nodes representing individuals and links showing connections weighted by line thickness. The red circular nodes display names and support dragging, while blue links scale their stroke width based on relationship weight. Built with d3.v4 and the legacy d3.layout.force API, the visualization loads data from family.json and renders everything as SVG. The simulation applies gravity, charge, and distance parameters to position nodes dynamically.

Ssumanthsomu1
81% match
Loading thumbnail…

Family Network graph

This example shows a family network graph, visualizing eight individuals as labeled nodes and their relationships as weighted links. The force-directed layout uses `d3.layout.force` from D3 v4 to position nodes and edges, with link thickness proportional to a weight value. Red links and orange text labels render in SVG, while node circles are filled blue. The data comes from a static JSON file, and the graph is interactive through `force.drag` for node repositioning.

DDINESH SAI BOPPANA
80% 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
80% match
Loading thumbnail…

d3.js Customized Network Graph and Family Tree

This example presents two side-by-side D3.js visualizations: a force-directed network graph and a hierarchical family tree, both built from the same underlying dataset of names and relationships. The network graph uses d3.forceSimulation with link, charge, and center forces to position nodes, which are drawn as colored circles with labels. The family tree employs a d3.tree layout to arrange parent-child connections as a structured hierarchy. Both visualizations render to SVG, with the network graph using red lines for links and the tree layout displaying its own distinct styling and coloring.

Ppeddubalaji@gmail.com
80% match
Loading thumbnail…

(d3.js)Network Graph and Family Tree

This example displays two distinct visualizations: a network graph and a family tree. The network graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes based on attractive and repulsive forces, rendering connections as lines. The family tree uses `d3.tree` and `d3.stratify` to convert parent-child relationships into a hierarchical layout. Both visualizations render as SVG elements with nodes as styled circles and labels, with data hardcoded in JavaScript arrays.

Mmogantirudhrani@gmail.com
80% match