doankhanh122@gmail.com

@doankhanh122·3 public vizzes

Fork of React & D3 Drag

Three draggable circles are connected by thick black lines, with hover interactions changing the stroke style. Built with React and D3.js v7, the visualization uses `d3.drag` to handle pointer events, updating state via React's `useState` and immutable data patterns. A `VizWrapper` delegates rendering to a D3 function that uses `selectAll` and `join` to update SVG circles and lines. The initial data consists of three coordinate pairs, rendered against a full-window SVG canvas.

May 1, 2024

Loading thumbnail…

Fork of Fork of D3.js collapsible tree with boxes

This example shows a hierarchical tree visualization with collapsible nodes, where each node is rendered as a colored box. The tree displays data from a JSON file, with node colors representing different types. The visualization uses D3.js v3 to compute the tree layout and render SVG rectangles for nodes and curved paths for links. The implementation includes animated updates when nodes are expanded or collapsed, and supports zooming and panning via D3's zoom behavior. Tooltips provide additional node information on hover.

Apr 30, 2024

Loading thumbnail…

World Countries Tree

The World Countries Tree visualizes the hierarchical structure of global geography, from continents through subregions down to individual countries, using a horizontal tree layout rendered as SVG. It employs D3 v5’s `tree` and `hierarchy` functions to compute the layout, `linkHorizontal` for curved connector paths, and a zoom behavior for interactive panning and scaling. Font sizes decrease with tree depth, and the dataset is loaded from a local `data.json` file.

Apr 30, 2024