HTML Starter

100%

✓ Published1🌍 Public

Last edited Jun 13, 2020

Created on Jun 13, 2020

This example displays a horizontal bar chart of the world's ten most populous countries, ranking them from China to Ethiopia using population data loaded from a CSV file. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with grid lines and formatted tick labels (e.g., converting millions to billions) rendered as SVG. The bar lengths represent each country's population, with a title above the plot and an x-axis label below.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

A bar-less scatterplot of the 10 most populous countries uses circles scaled by population on the x-axis and categorical country names on the y-axis. It renders with D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` within an SVG. Data comes from a local `data.csv` file, parsed via `csv`. Axis grids use tick lines, and the chart includes a title and formatted population labels using `format('.3s')`.

DDanzeOnn

88% match

Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart of country populations using D3 v5. It loads data from a CSV file and appends SVG rectangles scaled by population values. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` to render the country labels. A margin-based layout shifts the bars via an SVG `<g>` transform, with a 1000-person offset added to each population value before rendering.

Ttheodasilva

88% match

Loading thumbnail…

HTML Starter

Ttheodasilva

88% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the populations of the world’s ten most populous countries, with bars ordered from China down to Mexico. The visualization uses D3 v5’s `csv` method to load data from a local CSV file, converting population values to absolute numbers before rendering. It builds scales with `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, and draws the bars as SVG `rect` elements. Axes are generated using `axisLeft` and `axisBottom`, with the chart laid out inside a configured margin.

CCodeHandLuke

87% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the world’s ten most populous countries, with population values labeled in billions and a steel-blue fill for each bar. It uses D3 v5’s `csv` loader to import data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` with a custom tick formatter that converts G to B. The SVG rendering includes margins, a title, and an axis label, demonstrating core DOM manipulation through `select` and `append`.

Nnouralkhoury

86% match

Loading thumbnail…

HTML Starter

This visualization displays a horizontal bar chart comparing population sizes across five countries, using a simple CSV dataset loaded from `data.csv`. The chart employs D3 v6 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths in an SVG canvas. A `<g>` element translates the chart within margins, and rect elements are bound to the data and styled with steelblue fill via the CSS file. The axis labels and bar heights are generated dynamically from the parsed data.

KKyo

86% match

Loading thumbnail…

HTML Starter

KKyo

86% match

Loading thumbnail…

Making a Bar Chart

This example demonstrates a horizontal bar chart of the ten most populous countries, using population data loaded from a CSV file by the D3 `csv` function. The visualization maps population counts to bar widths with `d3.scaleLinear` and countries to vertical positions with `d3.scaleBand`, rendered as SVG rectangles. Axes are added using `d3.axisLeft` and `d3.axisBottom`, with the initial SVG canvas defined in the HTML and styled via CSS.

11995ana

86% match