Avtandil Gokadze

@goqadze·2 public vizzes

Fork of Axes with React & D3

This example shows the top 10 most populous countries as a horizontal bar chart with custom axes built using React and D3. The code uses `csv` to load United Nations World Population Prospects 2019 data, `scaleBand` for the y-axis categories, and `scaleLinear` for the x-axis population values. Instead of using D3’s axis components, it manually generates tick lines and labels via `xScale.ticks()` and maps over the domain for y-axis labels, rendering all elements as SVG through React components.

Aug 6, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries, using horizontal bars to compare population values from the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with SVG rectangles rendered as marks. The chart features hover tooltips via SVG `<title>` elements, and axes are generated with custom components that leverage D3's tick and scale APIs, with population labels formatted using `format('.2s')`.

Jul 21, 2021