Skip to main content
Log in
S

suyunlan

@suyunlan·4 public vizzes

Loading thumbnail…

World Countries Tree

A collapsible tree map displays the hierarchical structure of world countries, grouped by continent and subregion, using data from a JSON file. Each node is labeled with its geographic region name, with font size decreasing at deeper levels. The visualization is built with D3 v5, using `tree()` and `hierarchy()` layouts, rendered as an SVG with `linkHorizontal` paths. Pan and zoom functionality is implemented via `d3.zoom()`.

Mar 29, 2020
Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 populations of the top 10 most populous countries from United Nations data, presented as a horizontal bar chart. The chart ranks countries by population, with a steelblue fill for each bar and customized D3 axes that remove domain lines and use a tick format converting G to B (e.g., billions). Using d3.csv, d3.scaleLinear, and d3.scaleBand, the code maps population values to pixel widths and country names to vertical bands. The SVG rendering, with margins and axis labels, demonstrates how to structure axes in D3 v5.

Mar 20, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the population axis and `scaleBand` for country categories. It customizes axes with `axisLeft` and `axisBottom`, applies a custom tick formatter that abbreviates large numbers, and includes axis labels and a title. Population values are loaded from a CSV file and multiplied by 1,000 before plotting.

Mar 20, 2020
Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 populations of the top 10 most populous countries from United Nations data, presented as a horizontal bar chart. The chart ranks countries by population, with a steelblue fill for each bar and customized D3 axes that remove domain lines and use a tick format converting G to B (e.g., billions). Using d3.csv, d3.scaleLinear, and d3.scaleBand, the code maps population values to pixel widths and country names to vertical bands. The SVG rendering, with margins and axis labels, demonstrates how to structure axes in D3 v5.

Mar 20, 2020