Victor Mouries

@victormouries·3 public vizzes

World Countries Tree with explanations

This visualization presents a hierarchical tree of world countries, organized first by continents and then by subregions, displayed as a horizontal dendrogram. The data structure groups nations under regional categories, with each country labeled as a leaf node. The visualization uses the D3 v5 library's tree layout and hierarchy functions to compute node positions, and SVG paths with horizontal links connect parent and child nodes. Text elements are rendered with varying font sizes based on depth, and the entire view supports zooming through D3's zoom event.

Nov 19, 2022

Loading thumbnail…

Snake Game

A classic Snake game rendered on an HTML5 Canvas, where a white snake moves continuously across a dark grid, controlled by arrow keys. Each time the snake consumes a randomly placed teal fruit, its score increments and its tail grows. The animation runs via `window.setInterval`, clearing and redrawing the canvas every 250 milliseconds using Canvas 2D API methods like `fillRect` and `clearRect`, with keyboard input handled through a `keydown` event listener.

Jun 15, 2020

Loading thumbnail…

Canvas Playground

This example displays a simple analog clock rendered as a static SVG circle, with a steelblue fill and partial opacity. The visualization uses D3.js v3 to select a `<div>` element and append an SVG container sized to the clock’s radius. The code defines a fixed radius of 50 pixels and sets the SVG dimensions accordingly, but does not include any dynamic time-ticking or hand animations. The styling comes from an external CSS file that sets the font family and size, while the circle’s appearance is controlled via the `fill` and `fill-opacity` properties.

Jun 15, 2020