CKHope

@CKHope·2 public vizzes

Untitled

This example shows a single green circle that displays a custom HTML tooltip on hover, with the tooltip following the mouse position. The SVG circle and tooltip are created using D3 v4, with the tooltip built as an HTML div styled via inline CSS. Pan-and-zoom functionality is enabled through `d3.zoom`, which applies a transform to the SVG group. Mouse events use `d3.mouse` to position the tooltip relative to the cursor, using `mouseover`, `mousemove`, and `mouseout` handlers.

Nov 18, 2022

Loading thumbnail…

Test_Fork of Organization Graph Diagram

A network graph shows the organizational relationships between the Kenneth Rainin Foundation’s grantee partners, with four color-coded main nodes connected to smaller child nodes and leaf clusters. Built with d3.forceSimulation, forceManyBody, forceLink, and forceCenter, the SVG visualization renders circles sized by node hierarchy, with zoom and drag interactions enabled. Node colors come from a paletton-generated palette in colors.js, while data.js assembles the graph structure.

Nov 18, 2022