D3 Example
This example presents a horizontal bar chart of the ten most populous cities, using D3.js to render SVG elements. It compares population figures sourced from Wikipedia’s list of cities proper by population, displayed via a linear x-scale and an ordinal y-scale with rounded band padding. The chart applies Google Fonts (Poiret One) to axis text and labels, while the D3 CSV loader (`d3.csv`) parses the local `top10cities.csv` file with a custom type function to convert population values to numbers. The code explicitly configures margins, axis ticks with SI formatting, and removes the y-axis line for a clean visual.
AI-generated descriptionThis example shows how to make a horizontal bar chart with D3.js and Google Fonts. It is derived from example 105 of the screencast Introduction to D3.js.
The data shown in this example is from the List of cities proper by population Wikipedia page. The data used in the original example used city populations from GeoNames, which seemed to be inaccurate for the top 10 cities.