ZX_UNC

@littlethumb123·3 public vizzes

D3 Matrix Example

This force-directed network diagram displays relationships between four concepts—people, radiation, seeds, and cancer—with link opacity encoding connection strength. It is built with D3 v3’s `d3.layout.force` simulation and SVG rendering, with arrow markers on curved paths. Clicking a node enlarges its circle and changes its label color, while a double-click resets the size. The data is loaded from `data.json` via `d3.json`.

Oct 3, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can dynamically respond to browser resizing events. The chart container fills the viewport using CSS positioning, and a redraw function retrieves the computed `clientWidth` and `clientHeight` to update the SVG element’s dimensions. Two diagonal lines are drawn from corner to corner to visually confirm the current size. The code uses the `resize` window event listener and D3 v5’s `.selectAll`, `.merge`, and `.attr` methods, though the initial call to `redraw()` is commented out.

Oct 3, 2020

Loading thumbnail…

Face in D3.js

A smiling face rendered in D3.js animates its rectangular eyebrows upward and downward. Built with React and D3 v5, the SVG uses circles for the eyes, a path generated by `d3.arc` for the mouth, and rects for the eyebrows. `d3.transition` with a duration of 2000 milliseconds drives the eyebrow movement, while attributes like `cx`, `r`, and `transform` position the static facial features around a centered group.

Jun 19, 2020