mirojanuario

@mirojanuario·4 public vizzes

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as a radial tree layout rendered in SVG. The data, drawn from a nested JSON file containing geographic groupings, is displayed with curved links connecting parent and child nodes. The implementation uses D3.js v5, employing the `d3.hierarchy` and `d3.tree` layout functions to compute node positions. Text labels are styled with the Playfair Display font, and the visualization’s layout is responsive to the viewport dimensions.

Mar 30, 2020

Loading thumbnail…

Minauce

This example, titled Minauce, visualizes an interactive network of nodes connected by edges, laid out using a physics simulation. The SVG-rendered graph uses `d3.forceSimulation` to position nodes and links, with drag behavior to let users move individual nodes. Visual encoding uses node size and color to represent categorical or quantitative attributes, while edges show connection strength. The code, built with React and D3 v5, computes the layout entirely in the browser from an embedded dataset, updating positions each tick of the simulation.

Mar 30, 2020

Loading thumbnail…

MINAUCE

This visualization displays a hierarchical tree of world regions and countries, branching from continents down to individual nations. It uses d3.tree and d3.hierarchy to compute the layout, with d3.linkHorizontal generating curved connecting paths and text labels sized by depth. The SVG output is rendered with zoom support via d3.zoom, and the data comes from a JSON file containing the geographic hierarchy.

Mar 29, 2020

Loading thumbnail…

Hello VX

This example shows a tooltip-interactive violin and box plot for five categories of generated statistics, rendered as an SVG with a gradient background and horizontal pattern fill for the violin densities. Built with React and the VX library, it uses `@vx/stats` for the `ViolinPlot` and `BoxPlot` components, `@vx/scale` for band and linear scales, and `@vx/pattern` for the line texture. Hovering over box plot elements triggers a tooltip via `withTooltip` from `@vx/tooltip`, displaying min, max, or full box plot statistics. Data comes from `genStats` in `@vx/mock-data`.

Mar 29, 2020