anyazm

@anyazm·3 public vizzes

Untitled

This example visualizes a force-directed network of interconnected nodes, mapping links and clusters in real time. Using D3’s `d3.forceSimulation` with custom forces, it positions circular elements on a canvas, while a slider filters displayed nodes by degree. The rendering relies on the Canvas 2D API for drawing strokes and fills, and `d3.drag` enables interactive node repositioning. The underlying data structure, loaded from an external `v3` source, is parsed to extract node IDs and link pairs, driving the simulation’s tick updates.

Mar 12, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, rendered at an extremely large font size. It uses plain HTML and CSS, with no external libraries or JavaScript. The page is defined entirely in an `index.html` file, where the `body` element is styled with `text-align: center` and `font-size: 13em`. This serves as a minimal starting point for creating HTML-based visualizations.

Mar 12, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the @observablehq/flare dataset, with arcs sized by value and colored by top-level category. Clicking a slice zooms to reveal its children with smooth transitions. Built with D3 v5, it uses the `d3.partition` layout, `d3.hierarchy` for data nesting, `d3.arc` for path generation, and `transition.attrTween` to interpolate arc geometry and label positions during zoom animations.

Mar 12, 2020