alfredo-f

@alfredo-f·4 public vizzes

World Countries Tree

This interactive tree diagram displays the hierarchical structure of world countries, organized by continent and subregion. The visualization uses a horizontal tree layout with curved links connecting parent nodes to their children, rendered as SVG paths. Built with D3 v5, the code employs the `tree` and `hierarchy` layouts, `linkHorizontal` for path generation, and implements zoom functionality through `d3.zoom`. Country and region labels are positioned along the branches with font sizes that decrease with depth, while the data comes from a static JSON file.

Oct 25, 2019

Loading thumbnail…

World Countries Tree

A tree diagram displays a hierarchy of the world's countries, organized by continent and subregion. The D3.js visualization uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute and draw the graph’s links, while labels for each node are rendered as SVG text elements. The underlying data, in `data.json`, follows a nested parent-child structure, and the layout is sized dynamically to fit the viewport. The paths are styled with a teal stroke, and the text labels have white shadows for readability.

Oct 25, 2019

Loading thumbnail…

Blank Canvas

This example demonstrates a blank, resizable canvas that fills the browser window, rendered as a rounded rectangle using SVG. It shows fundamental DOM manipulation with D3.js by selecting the empty `svg` element, setting its width and height to the viewport dimensions, and appending a `rect` with rounded corners. The code uses `d3.select` and `d3.append` from d3.v5, with the SVG size dynamically bound to `document.body.clientWidth` and `clientHeight`. The accompanying stylesheet fixes the body to prevent scrolling, ensuring the visualization always fits the screen.

Oct 25, 2019

Loading thumbnail…

Blank Canvas

A cheerful yellow face with black eyes, raised eyebrows, and a darkened smile floats on a blank white canvas. The eyebrows animate upward and back down in a repeating motion using D3 transitions. Built with D3 v5, the visualization uses basic SVG shapes—circles, rectangles, and an arc path—arranged within a centered group, with the mouth generated via d3.arc.

Oct 25, 2019