Skip to main content
SimilarExport ZIP
100%

Fork of Network

✓ Published0🌍 Public
Kkruthanreddy812@gmail.com
Last edited Apr 11, 2026
Created on Apr 10, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of 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.

Kkruthanreddy812@gmail.com
88% 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
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

A force-directed network diagram visualizes relationships between arts and community organizations. Nodes are color-coded by parent category and sized by hierarchy level. The D3 v7 simulation applies many-body forces, distance-based link springs, and a centering force. The code uses `forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`, and `drag` APIs to create an interactive, draggable SVG graph.

Ddragan.gorgiev@gmail.com
84% match
Loading thumbnail…

Fork of Network Diagram

A force-directed network diagram shows three central nodes—labeled NIKHIL, SUMANTH, and NISHITH—connected by colored links, with small leaf nodes branching from each. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, rendered as SVG circles and lines with labels. Node sizes vary by hierarchy level, and colors come from a predefined palette in `colors.js`. Drag interactions are enabled via D3’s `drag` behavior, allowing manual repositioning of nodes within the 960×960 SVG canvas.

NNikhilMakkena
83% match
Loading thumbnail…

Fork of network

A force-directed network diagram maps research collaborations among eight hypothetical scientists, with node color encoding their department (AI, Biology, or Physics) and labeled text identifying each researcher. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while an SVG viewBox renders the graph at responsive scale. Dragging is enabled via d3.drag, and link lines update positions on each simulation tick, with the node fill color assigned using a d3.scaleOrdinal domain mapped to the three research groups.

Ssaiabhishekmunnangi@gmail.com
82% match
Loading thumbnail…

Fork of network

A force-directed network diagram maps research collaborations among eight hypothetical scientists, with node color encoding their department (AI, Biology, or Physics) and labeled text identifying each researcher. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while an SVG viewBox renders the graph at responsive scale. Dragging is enabled via d3.drag, and link lines update positions on each simulation tick, with the node fill color assigned using a d3.scaleOrdinal domain mapped to the three research groups.

Ssaiabhishekmunnangi@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Network Graph

This network graph visualizes relationships between e-commerce categories and sub-categories, such as Amazon connecting to Electronics and Fashion. Nodes are displayed as large yellow circles with labels, and directed links with arrowheads show the connections. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` forces. User interaction is supported via the `d3.drag` handler, which allows nodes to be repositioned, while hover effects are implemented with CSS class toggling. Data comes from a JSON file with node and link definitions, rendered as an SVG.

Mmukundakrishna.r@gmail.com
82% match