thymdi

@thymdi·6 public vizzes

Fork of Tree

This example shows a branching tree diagram classifying animals from a single root into vertebrates and invertebrates, with further subdivisions down to individual groups like mammals, birds, and insects. Each node displays its name, while link strokes are grey and node circles use colored strokes and fills. The visualization is built with D3.js version 3.5.17, using the tree layout and SVG rendering, with clickable nodes that allow users to expand or collapse branches. The data is hardcoded as a nested JavaScript object, and the tree layout automatically positions nodes based on their hierarchy.

May 22, 2023

Loading thumbnail…

Tree Vertical

The visualization shows a hierarchical classification of animals, branching from Animals into Vertebrates and Invertebrates, with further subdivisions down to species-level groups. The tree layout is computed using D3’s `d3.layout.tree`, with nodes positioned via the diagonal projection and links drawn using `d3.svg.diagonal`. Data is embedded directly in the script as a nested object array. The implementation uses D3 v3.5.17, but only builds the layout and logs nodes and links to the console, without rendering any visible SVG or canvas output.

May 22, 2023

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

May 22, 2023

Loading thumbnail…

d3-get-it-right-04

This example uses React with D3 v6 to generate an SVG visualization of intersecting horizontal and vertical stripes. The code creates 100 rectangular bands in each direction, then applies two SVG masks: a diamond-shaped mask formed with a `d3.symbol` path, and a circular mask created with a basic SVG circle. The masks reveal the underlying stripes in geometric patterns, demonstrating how D3's `select`, `range`, and `join` methods can construct layered SVG elements with custom clipping. The visualization dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

May 22, 2023

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates an abstract pattern of horizontal and vertical bars layered over each other. It uses the D3.js library’s `select`, `range`, and `join` API to generate 100 rectangles in each direction across the full canvas. Two SVG masks with circular cutouts reveal and hide portions of the bar grids, producing a dynamic interplay of light and dark stripes. The visualization is rendered in a React environment and uses an SVG viewport that fills the browser window.

May 21, 2023

Loading thumbnail…

Fork of Hello HTML

This is a simple SVG visualization depicting a yellow circle with a thick black outline and two small black circles that appear as eyes. The entire graphic is defined directly in the `index.html` file using raw SVG markup within an HTML5 document. The page uses CSS to reset the body margin and prevent scrolling, and the visualization is rendered by the browser's native SVG support without any third-party JavaScript libraries. The data is hardcoded as SVG elements rather than being loaded from an external source.

Oct 24, 2021