Fork of network

100%

Fork of network

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

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

AI-generated description

MIT Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

Fork of Circles with D3

This example visualizes a hierarchical restaurant dataset, showing menu items grouped by cuisine type through a force-directed network of labeled nodes and links. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position elements, while drag interactions let users rearrange the layout. Each node is rendered as a circle with text labels, and the code loads data from a JSON file via d3.json. The visualization highlights the relationships between a central restaurant node, three cuisine categories, and their respective dishes.

RRohithNaiduDevareddy@my.unt.edu

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

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

83% match

Loading thumbnail…

Fork of Network Tree

This fork of a network tree visualizes the hierarchical breakdown of flight parts, showing root components like "Engine" and "Wings" branching into subcategories with percentage distributions. The D3 force-directed layout uses `d3.forceSimulation` with link, charge, collision, and centering forces to position nodes as circles with labels. Data from `data.json` feeds the SVG rendering, where links are drawn as lines with arrow markers and nodes are draggable, highlighting on hover. The visualization uses `d3.forceLink` for connections and `d3.forceCollide` to prevent overlap.

Nneeharika2023@gmail.com

82% match

Loading thumbnail…

Fork of Tree

This radial tree visualization presents a four-level food hierarchy, from the root "Food" down to categories like Fruits and Vegetables, then subcategories, and finally individual items like Orange and Spinach. The D3.js v7 code uses `d3.select`, `svg.append`, and partition/treemap-style layout functions to position colored nodes and link strokes. The hierarchical JSON data is rendered as a dynamic tree, with node fill colors indicating depth level, from pink at the root to blue at the leaves.

Ssravya7136@gmail.com

82% match