Skip to main content
SimilarExport ZIP
100%

Customizing axis

✓ Published2🌍 Public
Aalobry
Last edited Dec 16, 2020
Created on Dec 16, 2020

This histogram displays the top 10 most populous countries using a horizontal bar chart. The chart customizes both axes by removing default domain lines and tick marks, while formatting population values with a custom tick format that converts billions to "Md". Built with D3 v6, it uses `scaleBand` and `scaleLinear` for positioning, `axisLeft` and `axisBottom` for axes, and `d3.csv` to load population data from the UN World Population Prospects. The SVG rendering includes a title and axis label, with steel-blue bars and styled tick text.

AI-generated description

Histogram from CSV file Data comes from https://population.un.org/wpp/Download/Standard/Population/

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the top 10 most populous countries, using 2018 United Nations estimates. The chart customizes both axes: the left axis removes domain and tick lines, while the bottom axis uses `d3.axisBottom` with a tick format converting billions to 'B' and adds a "Population" label. The code relies on `d3.csv`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles with steelblue fills.

SSteven Prichard
93% match
Loading thumbnail…

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout with steel-blue bars. The axes are customized: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick formatter via `d3.format` to abbreviate values (e.g., converting “G” to “B”) and includes grid lines extending across the chart. Built with d3.v5 and SVG, the code employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Population data is read from a CSV file and multiplied by 1000 to reflect actual counts.

MMateus Farias
93% match
Loading thumbnail…

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout with steel-blue bars. The axes are customized: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick formatter via `d3.format` to abbreviate values (e.g., converting “G” to “B”) and includes grid lines extending across the chart. Built with d3.v5 and SVG, the code employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Population data is read from a CSV file and multiplied by 1000 to reflect actual counts.

MMateus Farias
93% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes both axes by removing default domain lines and tick lines, and formats population labels to abbreviate numbers with a "B" suffix. Built with d3.v5, it uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG, with tick lines extended across the plot area and a custom axis label.

YYF
93% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It demonstrates axis customization using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, including custom tick formatting that converts billions to the letter B. The chart removes default axis lines, adds grid lines via tickSize, and includes styled axis labels and a title. Data is loaded as CSV and rendered as SVG rectangles with steelblue fill.

DDuyun Tan
93% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes its axes by removing default domain lines and tick marks, applying a custom tick format that abbreviates large numbers (e.g., converting billions to "B"), and adding descriptive axis labels. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with data loaded from a CSV file.

Ddtdenver
93% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes, and formatting tick labels with abbreviations like "B" for billions. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, rendering to SVG. Data is loaded from a CSV file and scaled in the code before being plotted as steel-blue rectangles.

JJunheZhang66
92% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. It demonstrates D3 axis customization, changing tick formatting (converting large numbers to abbreviations like "B" for billion), removing default axis lines, and styling tick text, labels, and titles. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes, and loads data from a CSV file.

CCameron Nimmo
92% match