Elina Oikonomaki

@elinaoikonomaki·2 public vizzes

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population totals on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and ticks, while manually rendering grid lines and axis labels via SVG elements. The data comes from the United Nations World Population Prospects 2019 CSV. The chart includes unlabeled tick marks and text labels for each category, without using D3’s axis components directly.

Feb 11, 2025

Loading thumbnail…

Fork of Scales and Axes

This fork of the D3 “Scales and Axes” example demonstrates how to construct and position a linear x-axis and y-axis using the `scaleLinear`, `axisBottom`, and `axisLeft` APIs. It renders a light gray plot area and places the axes at the bottom and left margins of the SVG canvas. The code uses the `select` and `join` methods from D3 to create SVG elements, with margins controlling the inner plot dimensions. The example has no external data source, instead drawing axes for a fixed 0–100 domain.

Feb 10, 2025