Skip to main content
SimilarExport ZIP
100%

D3 Axes

✓ Published0🌍 Public
Ccgeiran
Last edited Dec 15, 2019
Created on Dec 15, 2019
Forked from D3 Axes

A horizontal bar chart displays the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. Built with D3 v5, it uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` with a custom tick formatter that abbreviates large numbers to billions. The chart includes a title, axis label, and a steelblue fill for the bars.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Axes

This example displays a horizontal bar chart of the top 10 most populous countries using D3 v5, with populations loaded from a CSV file and scaled linearly. It demonstrates custom axes: the left band scale lists country names without tick lines, while the bottom axis uses a tick formatter that converts values like “1.41G” to “1.41B”. The SVG rendering includes grid lines via negative tick sizes, axis labels, and a title, all styled with external CSS.

Rrdeichert
94% match
Loading thumbnail…

D3 Axes

This bar chart ranks the ten most populous countries, from China to Mexico, using horizontal bars scaled by population. The chart labels each country on the y-axis and formats population values in billions on the x-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and loads data from a local `data.csv` file. The x-axis gridlines extend across the chart, with the country names and title styled via CSS.

Ddileep73
91% match
Loading thumbnail…

D3 Axes

This bar chart ranks the ten most populous countries, from China to Mexico, using horizontal bars scaled by population. The chart labels each country on the y-axis and formats population values in billions on the x-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and loads data from a local `data.csv` file. The x-axis gridlines extend across the chart, with the country names and title styled via CSS.

Ddileep73
91% match
Loading thumbnail…

D3 Axes

This bar chart ranks the ten most populous countries, from China to Mexico, using horizontal bars scaled by population. The chart labels each country on the y-axis and formats population values in billions on the x-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and loads data from a local `data.csv` file. The x-axis gridlines extend across the chart, with the country names and title styled via CSS.

Ddileep73
91% match
Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, sorted vertically by country name. It uses D3 v5’s `csv` loader and `scaleLinear` and `scaleBand` to map population values and country categories, with axes generated by `axisLeft` and `axisBottom`. The SVG bars are rendered in steel blue, and population labels use the `format` function with abbreviated suffixes. Data comes from a local CSV file, and all rendering is done via SVG elements.

Kkkwyoung
91% match
Loading thumbnail…

Customizing axes

A horizontal bar chart displays the top 10 most populous countries, with population values formatted in billions using d3.format and custom tick labels. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with axisBottom and axisLeft generating grid lines and labels. Bars are rendered as SVG rectangles, and axis labels and titles are added as SVG text elements, styled via external CSS. Data loads from a CSV file using d3.csv.

BbeauMarko
91% match
Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with D3 v5, specifically using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures. The SVG rendering uses steelblue rectangles, with margins and padding handled through D3’s scale and transform methods.

Rrdeichert
91% match
Loading thumbnail…

D3 Bar Chart

This D3 bar chart displays the populations of the ten most populous countries, using horizontal bars sorted by y-axis labels. The visualization maps population values to bar lengths via a linear scale and country names to band positions, with axes generated by `axisBottom` and `axisLeft`. It reads data from a CSV file (`data.csv`) containing country and population figures, multiplies the figures by 1,000, and renders the result as SVG rectangles with steel blue fill. The chart is built with d3.v7, using `scaleLinear` and `scaleBand` for scaling.

Aadbirch
90% match