Skip to main content
SimilarExport ZIP
100%

Fork of Network

✓ Published0🌍 Public
Kkruthanreddy812@gmail.com
Last edited Apr 10, 2026
Created on Apr 9, 2026
Forked from Network

A static network diagram shows connections between clothing items and gender categories, with "Boys" linked to T-Shirt, Shorts, and Shirt, while "Girls" connects to Jeans, Skirt, and Saree, plus one cross-link from Shirt to Jeans. Built with D3 v7, the SVG rendering places nodes at fixed coordinates without force simulation, drawing gray lines for links, colored circles for nodes, and text labels. The code uses `selectAll`, `append`, and data joins to create the visualization directly from predefined arrays, with a title displayed at the top.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Network

A force-directed network diagram maps relationships among clothing categories, with blue, green, and orange nodes representing gender groups and garment types, connected by gray links. The example uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes in an SVG canvas. Drag interactions, implemented via d3.drag, let users move nodes, while tick updates reposition links, circles, and text labels, and a title labels the chart.

Kkruthanreddy812@gmail.com
88% match
Loading thumbnail…

Fork of Network

This example uses D3 v7 to visualize a small clothing relationship network with a force-directed layout. Eight nodes represent clothing categories (Boys, Girls) and items (T-Shirt, Shorts, Shirt, Jeans, Skirt, Saree), while nine links show group assignments and outfit pairings. The code creates an SVG canvas and applies `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the elements. Groups appear in blue, items in green, with labels offset beside each node. A title marks the chart as an "Outfits Relationship Network."

Kkruthanreddy812@gmail.com
87% match
Loading thumbnail…

Fork of Fork of ice 8_network

This interactive network diagram visualizes relationships between programming-related nodes, with circles colored by group and labeled with node IDs. The layout is computed using d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter forces, updating line, circle, and text positions on each tick. Node and link data are loaded from remote CSV files via d3.csv. The SVG canvas is titled “Programming Network,” with nodes rendered as circles and connections as gray lines.

Kkanaparthieshitha@gmail.com
76% match
Loading thumbnail…

Fork of network

This conceptual food network shows hierarchical relationships between food categories, subcategories, and a root node, using a force-directed layout. The D3.js code employs `d3.forceSimulation` with link, many-body, and center forces to position nodes, while `d3.drag()` enables interactive node repositioning. Nodes and links are rendered as SVG elements whose positions update on each simulation tick. Colors distinguish node groups, and labels identify each food category. The visualization uses a hardcoded dataset of nine food-related nodes and eight links, presented in a static SVG canvas.

Ssravya7136@gmail.com
76% match
Loading thumbnail…

Fork of network map

A compact food-and-category network uses D3 v7's `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position six colored nodes (three categories in pink, three foods in green) connected by five gray links. The force-directed layout runs on an SVG canvas, with draggable circles via `d3.drag` and text labels updated on each simulation tick. The data is a hardcoded set of nodes and links, illustrating simple relationships between items and their categories.

Ssravya7136@gmail.com
75% match
Loading thumbnail…

Fork of Fork of Network Graph

This visualization shows a network graph of employee relationships, with circles representing individuals and lines connecting each person to their parent node. The graph uses a force-directed layout driven by `d3.forceSimulation`, applying link distance, charge, and centering forces to position nodes. Data loads from a CSV file hosted on a Gist, and the code builds nodes and links from the Name and Parent columns. Rendered as SVG, the graph updates node positions and link coordinates on each simulation tick, with styling applied to links, circles, and text labels.

Ssdarsi2404@gmail.com
74% match
Loading thumbnail…

Fork of Network

This interactive network visualizes family relationships from ancestors to descendants, using links to represent parent-child connections and node colors to indicate generation levels derived from hierarchy depth. The visualization loads data from a CSV file, processes it with d3.stratify to compute depths, and renders it as an SVG with d3.forceSimulation using forceLink, forceManyBody, forceCenter, and forceCollide. Nodes are draggable via d3.drag, and hover tooltips appear through D3 selection styling.

Aanjanipriyajillela@gmail.com
74% match
Loading thumbnail…

Fork of Tree

This example shows a hierarchical tree of clothing categories, from a root node for "Clothing Family" down to individual outfit types like T-Shirt, Suit, and Saree. The code uses `d3.stratify` to convert a flat dataset of parent-child pairs into a tree structure, then applies `d3.tree` to compute the layout and renders it as SVG. Circles for nodes are color-coded by depth, with labeled text alongside each node and gray lines connecting linked nodes.

Kkruthanreddy812@gmail.com
73% match