Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Apr 6, 2020

Created on Mar 31, 2020

This bar chart displays the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It shows how to customize D3 axes, including removing tick lines and the domain path, adding an axis label, and formatting population values using `d3.format` with a custom tick formatter that converts G to B. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and renders via SVG. Bars are filled with steelblue, and axis labels use custom CSS styling.

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.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. The chart customizes D3 axes by removing default domain lines and tick lines, applying a custom tick format that converts G to B for billions, and styling tick labels, axis labels, and the title via CSS. It uses `d3.scaleLinear` and `d3.scaleBand` to map population and country names, with `d3.axisBottom` and `d3.axisLeft` to render the axes.

TTouha Zohair

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 customization of D3 axes, including removal of default domain lines, custom tick formatting with `format('.3s')`, and grid lines created via `tickSize`. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with SVG rendering. Labels for the title and axis are added as text elements.

Ssophburke

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 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

96% match

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customization of D3 axes by removing domain lines, styling tick lines and labels with pink and hot pink colors, and formatting population values using `d3.format('.3s')` with a custom replacement that converts 'G' to 'B'. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` with an SVG rendering approach.

Ggrandbleu916

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, including a band scale for countries and a linear scale for population, with formatted tick labels that abbreviate numbers using the `.3s` format and replace 'G' with 'B'. Both axes have their domain lines and tick lines removed or restyled, with the y-axis labels and gridlines fully customized via CSS. The chart also adds a title and axis label, and draws steel-blue rectangles for each bar using D3's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs.

SSalha Saad

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It shows population values on the x-axis and country names on the y-axis. The example demonstrates D3 axis customization, including formatted tick labels that abbreviate numbers with "B" for billions and removed axis lines. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG visualization, with custom styling applied to ticks and labels.

Ccgeiran

96% match

Loading thumbnail…

Customizing Axes

This horizontal bar chart shows the top 10 most populous countries in 2018, with population values from the United Nations World Population Prospects 2017 dataset. The visualization customizes D3 axes by removing default domain lines and tick marks, adding grid lines with a light color, formatting population labels with a custom `.replace('G', 'B')` function, and appending custom axis and title text. Using `d3.axisBottom` and `d3.axisLeft`, the SVG rendering applies a steelblue fill to bars and styled fonts for readability.

JJakob Andersson

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