Skip to main content
Log in
H

Heholek

@heholek·4 public vizzes

Loading thumbnail…

World Countries Tree

A hierarchical tree visualization displays the world's countries organized by continent and subregion, with each country as a leaf node. The layout uses d3.tree() and d3.hierarchy() to structure the JSON data, while d3.linkHorizontal() generates the curved link paths. Text labels align dynamically based on whether a node has children. Pan and zoom functionality is implemented via d3.zoom(), and margins are applied using the standard D3 margin convention. Custom fonts and text shadows enhance readability.

Feb 29, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, with horizontal bars extending from a shared origin. The visualization intentionally omits traditional axes, using a minimalist design that prioritizes data values through tooltips. Built with React and D3 v5, the code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the population values, rendering marks as SVG rectangles. Data comes from the United Nations World Population Prospects 2019, with a custom `siFormat` converting large numbers into abbreviated labels.

Feb 29, 2020
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population growth over time for various regions, using multiple lines to compare trends across areas. The chart employs a nested data structure, processing population estimates from the UN’s medium variant dataset for 1950-2100. The code utilizes D3’s `nest` and `line` functions with the `curveBasis` for smooth lines, while `scaleTime` and `scaleLinear` handle the axes. A color legend generated via a custom `colorLegend` function helps distinguish regions, and the rendering uses SVG with a `mix-blend-mode` for overlapping lines.

Feb 29, 2020
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population growth over time for various regions, using multiple lines to compare trends across areas. The chart employs a nested data structure, processing population estimates from the UN’s medium variant dataset for 1950-2100. The code utilizes D3’s `nest` and `line` functions with the `curveBasis` for smooth lines, while `scaleTime` and `scaleLinear` handle the axes. A color legend generated via a custom `colorLegend` function helps distinguish regions, and the rendering uses SVG with a `mix-blend-mode` for overlapping lines.

Feb 29, 2020