Skip to main content
SimilarExport ZIP
100%

JS Bin

✓ Published1🌍 Public
RRSSBDAE
Last edited Jan 16, 2023
Created on Jan 12, 2023

A force-directed network diagram visualizes product category sales and the flow of value between categories, with node size representing total sales and link width indicating switch importance. A slider filters links by value threshold, dynamically updating the visualization. The code uses d3.layout.force for node positioning, d3.scale.linear for size mapping, and SVG for rendering, with data embedded as JavaScript objects representing store departments and their interconnections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A force-directed network diagram shows six interconnected nodes (brands, products, cart, cart_items) with directed, curved links. The code uses `d3.layout.force()` from D3 v3 to simulate the physics, `d3.select` for DOM manipulation, and SVG markers for arrowheads on the three link types (licensing, suit, resolved). Node labels display both an ID and name, and circles are draggable via `force.drag`. The graph analyzes e-commerce relationships among entities.

MMokshithabhi
77% match
Loading thumbnail…

Fork of Fork of Network Graph

This interactive network graph visualizes the relationships between sales people and products, with node size reflecting total sales and colors distinguishing persons (blue) from products (orange). The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes, while SVG circles and lines render the network. A tooltip appears on mouseover to display node details, and nodes are draggable via d3.drag. The sample data includes sales figures from an Excel spreadsheet, demonstrating a typical sales-product association structure.

Sshreyavallamsetla@gmail.com
76% match
Loading thumbnail…

Ecommerce website

This example shows a force-directed network of an e-commerce ecosystem, with blue customer nodes, green product nodes, and orange seller nodes connected by gray links representing purchases, offers, and recommendations. Built with D3 v7, the visualization uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position twenty nodes and twenty links interactively, with drag-and-drop support via `d3.drag()`. Node labels and a color legend are rendered directly on the SVG canvas, and the layout updates continuously on each simulation tick.

Ccharchana0527@gmail.com
74% match
Loading thumbnail…

Products

This example visualizes a collection of products as a force-directed network of nodes. The visualization uses the D3.js library (v5) to create an interactive graph, though the JavaScript file currently contains only a placeholder expression, and the styling is defined in an external stylesheet. The output is rendered in an HTML page that loads the D3 library from a CDN. The data structure and force simulation parameters are not defined in the provided files.

Ppablocenfo
74% match
Loading thumbnail…

Fork of Network Graph ICE-8

This network graph visualizes relationships between e-commerce categories and sub-categories, such as "Amazon" linking to "Electronics," using nodes and directed edges. Built with D3 v6, it employs `d3.forceSimulation` with link, charge, collision, and center forces to arrange nodes dynamically. The SVG rendering uses `d3.json` to load the data, and interactive dragging is enabled via a custom drag handler. Nodes are styled as yellow circles with labels, and edges are drawn as lines with arrow markers, all within a fixed 1100x370 viewport.

Mmukundakrishna.r@gmail.com
73% match
Loading thumbnail…

Radial Tree

This interactive network graph visualizes connections between salespeople, regions, and chocolate products, using color-coded nodes (blue, green, and orange) to distinguish entity types. Built with D3.js version 7, it employs `d3.forceSimulation` for force-directed layout, `d3.zoom` for pan and zoom, and drag behavior for node repositioning. The interface includes search filtering, a details panel showing node information, and tooltips on hover. Links are weighted by relationship strength, with visual highlighting that emphasizes connections when a node is selected.

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

networks

This interactive network visualization uses a force-directed layout to display relationships between functional categories, with nodes representing biological functions and links indicating correlations. Users can switch between six pre-loaded datasets and drag nodes after the simulation stabilizes. Built with D3 v3 (d3.layout.force) and rendered as SVG with zoom and pan support, it encodes node size via radius scale and link strength through stroke width, with optional color coding by category or monochrome themes.

11Cr18Ni9
73% match