Oskar Weinfurtner

@woskar·5 public vizzes

World Population Tree

This interactive visualization shows the hierarchical structure of world population data, organizing countries into regions and subregions like Southern Asia and Western Asia. It presents a tree layout where the root node represents the World, branches into continental groupings, and extends to individual countries. The visualization uses D3.js version 5, employing the `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout and draw curving links between parent and child nodes. The font size scales with depth, making higher-level categories appear larger, while pan and zoom functionality is enabled through the `zoom` event handler.

Jul 19, 2020

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout. The code uses D3 v4’s `tree` layout, `hierarchy`, and `linkHorizontal` generator to position nodes and draw curved SVG paths connecting them. Country names are rendered as text labels, with the tree expanding from the root node “World” through regions like Asia and Southern Asia. The example loads hierarchical data from a JSON file, which drives the layout without additional styling or interaction beyond the basic tree structure.

Jul 19, 2020

Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical relationships between world countries, organized by continent and subregion. The visualization uses a circular layout where nodes are positioned on concentric rings based on their depth in the hierarchy, with country names placed at the outermost level. Panning and zooming interactions are enabled through the `d3.zoom` API, allowing users to explore the full hierarchy. The visualization is rendered using SVG with D3 v4's `d3.hierarchy` and `d3.cluster` modules, and text styling is applied via the Open Sans font. Curved links connect parent and child nodes, with label rotation and positioning adjusted based on each node's radial location.

Jul 19, 2020

Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

Jul 19, 2020

Loading thumbnail…

D3.js Tutorial Project

This example is a comprehensive D3.js tutorial project that demonstrates a progression of visualization techniques, from basic data binding to SVG drawing and animation. It includes a bar chart of country populations, scatter plots, line and area charts showing temperature data, and an animated face constructed with SVG shapes using `d3.arc` and transitions. The code uses D3 v5 with React, loading data from CSV and JSON sources, and renders visualizations through SVG elements with axis labels and styling.

Jul 19, 2020