Skip to main content
SimilarExport ZIP
100%

Fork of network map

✓ Published0🌍 Public
Ssravya7136@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Circles with D3

This example presents a restaurant network visualization as a force-directed graph, showing connections between a central restaurant node, three cuisine categories, and individual dishes. The code uses D3.js v7 with `d3.forceSimulation` and `d3.forceLink` to compute node positions and render SVG circles and text labels. Each node is colored by type—restaurant, cuisine, or dish—with light salmon, green, and blue fills, while brown strokes and a shaded border match the earthy color scheme. The simulation updates link positions and node transforms on every tick.

RRohithNaiduDevareddy@my.unt.edu
84% match
Loading thumbnail…

Fork of Circles with D3

This example shows a restaurant menu network using D3's force-directed simulation. It visualizes nodes for a restaurant, its cuisine types, and dishes, with force links connecting each category hierarchy. Custom SVG styling applies light salmon, green, and blue fills to distinguish node types, while adding brown strokes and a parchment-like background. The code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the interactive graph, with node radii fixed at 15 pixels and labels displayed via SVG.

RRohithNaiduDevareddy@my.unt.edu
84% match
Loading thumbnail…

Assignment 8 Force-Directed Node-Link Diagram

This force-directed node-link diagram visualizes a food network, with nodes representing individual food items and links showing relationships between them. The graph uses a physical simulation to position nodes, which are drawn as small green circles connected by black lines, and includes tooltips for interaction. The visualization is rendered with D3 v6, using `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceLink` to drive the layout. Data is loaded from two external CSV files containing node and edge definitions, with the SVG output sized at 2500 by 2000 pixels.

Aahuynh8@dons.usfca.edu
83% 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
83% match
Loading thumbnail…

Fork of network graph

This example shows a force-directed network graph mapping the factors that influence restaurant performance. The graph branches from a root node into categories like Location, Cuisine Type, and Price Range, each further split into specific leaf nodes, visually prioritizing the hierarchical relationship. The layout is generated using the D3.js force simulation API, including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, with the graph rendered as an SVG. Nodes are interactive and can be dragged, highlighting connections and emphasizing the root-to-leaf structure.

JJayaSaiReddySantimalla@my.unt.edu
83% match
Loading thumbnail…

Fork of Network Graph

Four labeled nodes form a small network of three connected links, rendered in SVG and fully interactive through mouse dragging. The graph uses `d3.forceSimulation` with link, charge, and center forces to position nodes, while a `d3.drag` handler lets users move nodes and update their fixed positions. Elements are drawn with D3 selections, appending `line` and `g` elements whose coordinates are updated on each simulation tick. The code relies on D3 v7's `forceLink` and `forceManyBody` APIs, with text labels placed relative to each node.

KKhanin Sisaengsuwanchai
83% match
Loading thumbnail…

Fork of Network Graph

This visualization uses D3’s force simulation to position a network of labeled nodes connected by curved, arrow-tipped edges. The graph is rendered as SVG circles and text, with a semi-transparent node fill and a green background. A d3.zoom behavior allows pan and zoom, while the simulation applies charge, collision, and link forces to lay out the nodes. The code imports node and link data from a dummyData module, and updates the graph on each simulation tick.

Ssrividyamadas@gmail.com
82% match