Skip to main content
SimilarExport ZIP
100%

Customising Axes

✓ Published1🌍 Public
Mmallikgarjuna
Last edited Mar 19, 2020
Created on Mar 19, 2020
Forked from Making a bar chart

This bar chart shows the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The example demonstrates axis customization with D3 v5, applying a custom tick formatter that converts large numbers to abbreviated units like “B” for billion. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and customizes `d3.axisBottom` and `d3.axisLeft` by removing domain lines and adjusting tick sizes. The SVG rendering includes styled axis labels and a chart title.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

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 2017. It shows how axis customization highlights data clarity: country names appear on the y-axis, while population values on the x-axis use a custom tick formatter that converts large numbers to abbreviated forms like "B" for billions. Built with D3 v5, the example uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `tickFormat`. The chart renders as SVG, with gridlines created via `tickSize` and axis labels styled through CSS classes.

AAnne Lee Steele
96% 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 customized D3 axes, including formatted tick labels that convert large numbers to abbreviated units, grid lines, and a custom axis label. Built with d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, the chart renders in SVG. The y-axis gridlines are removed, while the x-axis uses a tick format that replaces 'G' with 'B' for billions.

Zzahra929
96% 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 example focuses on customizing D3 axes, removing default domain lines and adding custom tick styling, axis labels, and a title. It uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries, with `d3.axisBottom` and `d3.axisLeft` for rendering. The SVG output is styled via CSS, with tick lines in gray and large, muted text for readability.

Mmi-jjang
96% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including abbreviated tick labels using `d3.format`, horizontal grid lines via `tickSize`, and removal of axis domains and tick lines. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom labels for the title and x-axis.

VVadim Jouk
96% match
Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It customizes D3 v5 axes by removing domain lines, styling tick marks, and formatting population values with a `.3s` tick format that converts billions into “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisLeft` and `d3.axisBottom` for rendering axes in SVG.

Ttonestar
96% match
Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including a custom tick format that converts large numbers to billions, and removal of default axis lines and ticks. Built with d3.v5, the chart uses `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and renders as SVG with styled text elements.

Ssafdarawan
96% 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 visualization demonstrates customized D3 axes: the y-axis uses an `axisLeft` with a band scale for country names, while the x-axis uses `axisBottom` with a linear scale and a custom tick format that converts large numbers to abbreviations (e.g., G to B). The `d3.scaleBand` and `d3.scaleLinear` APIs handle positioning, and `d3.csv` loads the data. The SVG render uses `d3.select` and `d3.max` to compute the domain.

CCodeHandLuke
96% match
Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The example demonstrates how to customize D3 axes, including formatting tick labels to abbreviate numbers (e.g., turning billions into "B") and removing default axis lines and domain marks. It uses D3 v5 APIs such as `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with styled tick text, gridlines, and labels. The SVG rendering includes margins, a title, and an x‑axis label.

Pphdiamantino
96% match