Skip to main content
Log in
Y

Yuru-Liu

@Yuru-Liu·2 public vizzes

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019, displaying population values as horizontal bars with teal fills and no axes. The visualization is built with React and D3 v5, using scaleBand for the y-axis positioning, scaleLinear for the x-axis scaling, and SVG rect elements to render each bar. Tooltips appear on hover via the SVG title element, showing the formatted population value, while the Poppins font and custom tick styling give the chart its distinctive aesthetic.

Feb 7, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses a horizontal bar layout with each bar’s length proportional to the country’s 2020 population, while the countries are listed on the y-axis. The chart is rendered as SVG using React, with D3.js’s `scaleBand`, `scaleLinear`, and `format` functions handling the scales and tick labels. Custom components (`AxisBottom`, `AxisLeft`, `Marks`) draw the axes and bars, and hovering over a bar reveals the population value via a tooltip.

Feb 7, 2020