mohamed el haddadi

@Medhaddadi·2 public vizzes

Fork of Mouse Follower & Path Drawer

This example demonstrates a React application that uses D3.js to render an interactive node-link diagram. Users click on circles (nodes) to select them; clicking a second node creates a black line (link) between the two, allowing for the construction of a custom graph. The SVG rendering approach uses React state to manage the lists of nodes and links, with individual circle elements responding to `onClick` events. The code also tracks a currently selected node, highlighting it in green, and uses a UUID generator for unique node identifiers.

Aug 9, 2023

Loading thumbnail…

Fork of Social Network ICE 8

A force-directed network diagram displays eight people grouped into four clusters, with nine weighted links connecting them. The visualization uses D3 v4's `d3.layout.force` to simulate node physics, applying gravity, charge, and distance parameters. Each node renders as a green circle with a black text label, while blue lines represent edges whose stroke-width is set from link weight data. Data loads from `data.json` via D3's `json` method. The SVG canvas measures 960 by 500 pixels, and nodes are draggable through the force layout's `drag` handler, with positions updated continuously on each tick event.

Jul 27, 2023