veena

100%

✓ Published2🌍 Public

Last edited Apr 9, 2025

Created on Apr 8, 2025

Forked from VEENA

A network graph displays nodes arranged in a circular layout, with links connecting salespersons, products, and regions. The D3.js v7 code positions nodes using trigonometric calculations based on the viewport dimensions, drawing SVG lines for edges. Node labels are placed directly on the chart without force-directed simulation, relying instead on a static circular arrangement. The visualization encodes two node types—salespersons and regions—through color differentiation, while products and connections form the remaining graph structure.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

VEENA

This example visualizes a hierarchical sales dataset for “Awesome Chocolates,” showing global sales broken down by region, geography, and layers such as salespersons and products. It presents the tree structure using SVG nodes and links, with additional metadata like product categories and sales figures displayed via a tooltip. The visualization is built with D3 v7, using the hierarchical tree layout and custom styling for nodes, links, and interactive hover effects.

Vveenachowdarykavuri@gmail.com

83% match

Loading thumbnail…

Fork of Network Graph

This circular network graph visualizes sales relationships between salespersons, products, and regions. Person and product nodes are placed on a circle using trigonometric calculations, with link thickness scaled to sales value. The D3.js v7 code builds the SVG visualization from tabular data, connecting each salesperson to their region and to the products they sold, with node size reflecting total sales.

Sshreyavallamsetla@gmail.com

72% match

Loading thumbnail…

Fork of Network Graph

Sshreyavallamsetla@gmail.com

72% match

Loading thumbnail…

social network graph

This example shows a small social network graph with seven nodes representing business departments and external groups, connected by weighted links. The visualization uses D3 v4’s `d3.layout.force` (the pre-v4 force API) to position nodes in an SVG canvas, with node labels and circular marks styled via CSS. Link thickness is set with `stroke-width` based on the `weight` property from the JSON data, and nodes are draggable via `force.drag`. The data comes from an external `graphFile.json` file, rendered as SVG lines and circles.

Vvenkatajayanth03

70% match

Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater

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

69% match

Loading thumbnail…

AnithaShivaramaiah(11537410) Network chart

This example shows a network chart of eight named nodes (e.g., Alexa, Kathie, Gorgia) connected by weighted links, with node size and link thickness reflecting connection strength. The visualization uses the D3.js v4 force layout (`d3.layout.force`) to position nodes and edges, rendering them as SVG circles and lines. Data is loaded from a local `graph.json` file, and nodes are draggable via the force drag behavior. The chart is built using React, with styling defined in CSS for the SVG elements.

AAnitha Shivaramaiah

69% match

Loading thumbnail…

Network Graph

A force-directed network graph displays seven named nodes connected by weighted links, with thicker strokes representing higher link weights. Nodes appear as red circles with blue outlines and black text labels, positioned through a simulated physical layout that responds to drag interactions. The visualization loads node and link data from a JSON file and uses the D3.js v4 library, specifically `d3.layout.force` for the simulation and SVG elements for rendering.

RRaja Srinivas Nelluri

69% match