Marko Puza

@markopuza·2 public vizzes

Customising axes

This example visualizes the ten most populous countries as horizontal bars, with country names on the y-axis and population on the x-axis, using a bar chart rendered as SVG. The code uses d3’s `csv` loader, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to build the chart, with custom tick formatting that converts values from millions to billions (e.g., 'G' to 'B'). A title and axis label are added, and the chart is styled via CSS with steelblue bars and custom tick and label fonts.

Jul 16, 2019

Loading thumbnail…

Baby's first bar chart

This example shows a horizontal bar chart of the world’s most populous countries, scaled from a CSV file so that population values are displayed in thousands. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, with SVG `rectangles` styled in steel blue. The data is loaded via `d3.csv` and multiplied by a constant, while margins are applied to an inner chart group for readable labels and a clean layout.

Jul 16, 2019