Fork of Network graph

100%

Fork of Network graph

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

This interactive network graph visualizes the hierarchical relationships among major tech giants (AAPL, MSFT, META, GOOGL, AMZN) across yearly financial metrics (Open, High, Low, Close, Volume) from 2019 to 2023. Using d3.forceSimulation for physics-based node positioning, the SVG rendering features animated links whose widths scale with connection weight. Hovering over nodes triggers a tooltip display, and node colors reflect group assignments via a categorical color scale. The implementation relies on D3 v7's force-directed layout and event handling to create an explorable data hierarchy.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Globe

This interactive network graph visualizes the relationships between major tech companies (AAPL, MSFT, META, GOOGL, AMZN) and the years 2019–2023, all connected to a central “Tech Giants” node. Built with D3 v7, it uses `d3.forceSimulation` with link, charge, and center forces to position nodes dynamically, while drag interactions and hover tooltips enhance exploration. The SVG rendering displays nodes as colored circles and labels, with link thickness proportional to connection value, and the data is loaded from an external CSV file.

NNanditha Reddy

85% match

Loading thumbnail…

Fork of Network

This gallery example visualizes a network of ten major technology companies, with nodes representing firms like Microsoft, Google, and NVIDIA, and links depicting collaborations or partnerships labeled by type such as “Investment” or “Competition.” The visualization uses d3.forceSimulation to position the nodes physically, with node size and color encoding company group, while link thickness reflects collaboration strength. Rendered as an animated SVG, the chart employs d3.v7 and a manual color scale to distinguish company types. Hovering over a node is enabled, though the code primarily demonstrates a static force-directed layout.

AAmrit Adhikari

83% match

Loading thumbnail…

Tech gaints

This interactive tree visualization shows the evolution of five major tech companies (Apple, Microsoft, Meta, Google, and Amazon) across five years, with each company branching into yearly nodes that display financial attributes like open, close, high, low, and volume. The hierarchy is constructed from CSV data using `d3.hierarchy`, then rendered with `d3.tree()` and `d3.linkHorizontal()` to create the branching paths, while node rectangles and circles are positioned via SVG transforms. Interactive tooltips appear on hover, and the layout animates within an SVG canvas using D3 v7.

NNanditha Reddy

81% match

Loading thumbnail…

Fork of Fork of Network Graph

This network graph visualizes the relationships between Amazon and its flight parts, showing a hierarchical breakdown from engines to landing gear with percentage splits. The visualization uses D3 v6 force simulation with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide` to position the nodes, featuring SVG rendering with draggable circular nodes connected by directed lines. Node colors are uniform pink, while text labels display part names and percentages from the provided `data.json` file. The graph supports interactive hovering effects that highlight nodes when the mouse passes over them.

Mmukundakrishna.r@gmail.com

78% match

Loading thumbnail…

Network

This example shows a force-directed network of eight major tech companies, with nodes colored by industry sector—software, hardware, e-commerce, and cloud/AI—and links styled by relationship type: solid teal for partnerships, dashed yellow for competition, and pale green for collaboration. The visualization uses D3’s `d3.forceSimulation` to position nodes and render SVG links and circles, with hover highlighting and a fixed tooltip showing details. Data is hardcoded as arrays of node and link objects, and the layout is drawn entirely in scalable SVG within a fixed 1100×700 viewBox.

AAnurup Reddy

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

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…

Fork of Fork of React & D3 Starter

A force-directed network diagram visualizes relationships among eight tech companies, categorized as Software, Hardware, E-commerce, or Cloud/AI. Node color encodes category, while node size reflects connection count, and edge style encodes partnership, competition, or collaboration type. The visualization uses D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide`, rendering nodes as SVG circles with labels and tooltips.

AAnurup Reddy

76% match