Fork of Network

100%

Fork of Network

✓ Published0🌍 Public

Last edited Apr 9, 2026

Created on Apr 9, 2026

Forked from 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."

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

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

87% 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

82% match

Loading thumbnail…

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

BBhavanaGIrni

81% match

Loading thumbnail…

Fork of Network graph

This example shows a small network graph of eight friends, with nodes labeled by name and grouped by color, connected by ten weighted links. The graph is laid out using `d3.layout.force`, with link thickness proportional to the data’s `weight` attribute. Nodes are rendered as brown circles and red text, and the simulation updates positions on each tick. Data is loaded from a local `data.json` file, and the visualization is drawn to an SVG canvas using D3 v4 and v2 libraries.

Bbhanuteja1807@gmail.com

81% 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

81% match

Loading thumbnail…

Fork of Network Graph

This example shows a small network of six named nodes connected by weighted links, displayed as an SVG force-directed graph. The visualization uses D3 v4 with the legacy `d3.layout.force` API to simulate physical forces that position nodes and draw straight lines between them. Node labels and circles are rendered via SVG groups, with link stroke widths scaled by the square root of the link weight, and the data is loaded from a local `data.json` file.

Bbhargavarathod

81% match

Loading thumbnail…

Fork of Network Practice

This example shows a force-directed network of 13 nodes connected by 17 links, with nodes colored by group using a categorical scale and link thickness varying with edge weight. The visualization loads node and link data from a JSON file and renders it as SVG circles and lines. It uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the layout, updating node positions and link endpoints on each tick.

Hherbertamakloe

80% match