Andrey Matukhno

@aendinalt·3 public vizzes

Fork of D3.js collapsible tree with boxes

This interactive example shows a collapsible hierarchical tree rendered as labeled, color-coded boxes connected by links. Node types are distinguished by color, and clicking a node collapses or expands its children with animated transitions. The visualization is built with D3.js v3, using `d3.layout.tree` for layout and SVG for rendering. It incorporates zoom and drag behavior via `d3.behavior.zoom` and includes custom tooltips and arrow markers. Data is loaded from a JSON file specifying nodes, links, and metadata.

Jul 27, 2023

Loading thumbnail…

Appearance

This example showcases fundamental SVG styling with two separate HTML documents. The first creates a gradient-filled rectangle using a linearGradient definition, a rounded rect element, and text, demonstrating how CSS-like stop colors and gradient coordinates work. The second document constructs a rainbow target from nine concentric circles, each filled with a distinct color, then covers half the shape with a white rectangle. Both use raw SVG elements and attributes in plain HTML, with no JavaScript or external libraries, to illustrate basic vector graphics appearances.

Jul 18, 2023

Loading thumbnail…

Sol LeWitt Reproduction D3

This D3.js reproduction of a Sol LeWitt art piece uses two sets of alternating horizontal and vertical grid lines made of thin rectangles, each set partially hidden by a circular mask. The first mask reveals a white circle on a black background, while the second shows the inverse, creating a visual interplay between the two line orientations. Built with the d3 `select`, `range`, and `symbols` APIs, the SVG rendering fills the entire browser window and uses 100 lines in each direction. The piece references LeWitt’s geometric wall drawings, translating his grid-based concept into dynamic, screen-filling linework.

May 7, 2023