Damian Grzanka

@magicaltoast·8 public vizzes

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. Using d3.json to load hierarchical data, it applies the d3.tree layout to calculate node positions and renders the structure as an SVG with linkHorizontal paths for connections and text labels for each country. The tree supports zooming and panning through d3.zoom, with text size varying by depth to emphasize hierarchy levels.

May 4, 2021

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by region and subregion, using a horizontal node-link layout. The code renders the structure with SVG paths and text labels, applying D3’s `tree()` layout, `hierarchy()`, `linkHorizontal()`, and `zoom()` for pan and zoom interactions. Data is loaded from a JSON file containing nested country groupings, with label font size decreasing by depth. The visualization uses a custom Playfair Display font and subtle text shadows for readability.

May 4, 2021

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree from a JSON dataset, with nodes labeled and connected by curved links whose stroke thickness varies with child data size. It uses D3.js v5, including the `tree` layout, `hierarchy` for data nesting, and `linkVertical` for path generation. The SVG rendering is controlled via `select`, with zoom functionality integrated through the `zoom` and `event` APIs. Text labels use a Playfair Display font, styled with a white shadow effect from CSS.

May 4, 2021

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a branching layout that expands from left to right. The data is loaded from a JSON file, and the tree structure is rendered as SVG paths and text labels. The code uses D3 v5’s `tree()` layout, `hierarchy()`, and `linkHorizontal()` to compute the layout and draw the connecting links. Users can pan and zoom the entire diagram via the `zoom()` behavior, with text sizing decreasing at deeper levels to fit the hierarchy.

May 3, 2021

Loading thumbnail…

Fork of World Countries Tree

A world map is visualized as a hierarchical tree, with continents, sub-regions, and individual countries as nodes. The tree layout is computed using D3’s `tree` and `hierarchy` functions, and links are drawn with `linkHorizontal`. Node labels are positioned with scaled font sizes based on depth, and the SVG output is styled with a green link color and a serif font. The visualization supports pan and zoom via D3’s `zoom` event, with the data sourced from a JSON file.

May 3, 2021

Loading thumbnail…

Fork of World Countries Tree

A hierarchical tree visualization displays countries organized by continent and subregion, with the world as the root. The layout positions nodes horizontally by depth, and text size decreases with each level. D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` generate the SVG paths and labels, while a `zoom` behavior enables pan and scaling. The data comes from a JSON file, and text styling uses the Playfair Display font.

May 3, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a minimal bar chart, entirely devoid of axes, labels, or scale indicators. The visualization, rendered as SVG, computes bar lengths from population values using D3’s `scaleLinear` for the width and `scaleBand` for vertical placement. Data loads asynchronously from a United Nations World Population Prospects 2019 CSV via D3’s `csv` function, then is sliced to the top ten rows. The React `App` component manages state changes, while bars are drawn as simple `<rect>` elements within an SVG canvas.

May 3, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, where each color occupies an equal-angle slice of a circle. It loads color data from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching and component rendering. The pie layout is computed with D3’s `pie` and `arc` generators, while each slice is drawn as an SVG `<path>` with `fill` set from the color’s hex value. The visualization runs entirely in SVG within a React component tree.

May 2, 2021