juseanto

@juseanto·2 public vizzes

Document

This example displays two separate tree diagrams side-by-side, each built from a hard-coded JavaScript object and array. The visualization shows how nodes with children are connected by links, with nodes rendered as circles and labeled with indices. The code constructs a hierarchical data structure using custom node objects, then passes it to D3's `d3.tree()` layout and `d3.hierarchy()` function to compute positions. Using D3's `.join()` API, it creates SVG circles for nodes, lines for links, and text labels within two distinct `g` elements, with the first tree omitting the root links.

May 30, 2023

Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates fundamental SVG shape primitives rendered through a static HTML page. The visualization showcases circles, rectangles, and lines defined directly in the markup, with properties like position (cx, cy, x, y), radius, width, height, fill, and stroke. A blue-bordered rectangle outlines the canvas area, while colored circles and a yellow line illustrate basic styling. The code uses the SVG API embedded in HTML, requiring no external JavaScript or libraries, and is generated entirely from the static index file through the browser's SVG renderer.

May 30, 2023