Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Feb 3, 2020

Created on Feb 3, 2020

This scatter plot displays the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate. It demonstrates D3 axis customization, including tick formatting with `format('.3s')` to abbreviate large numbers and replacing 'G' with 'B', plus extended tick lines across the chart. Using `d3.scaleLinear` and `d3.scaleBand`, the bars are rendered in SVG with customized axis labels and styling. The visualization builds on a basic bar chart by refining axes, removing default domains, and adding a custom x-axis label.

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

94% match

Loading thumbnail…

Customizing Axes

This visualization displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates how to customize D3 axes: the x-axis uses tick formatting to abbreviate large numbers (converting G to B for billions), while the y-axis removes its domain line and tick marks. The bar chart is rendered as SVG, with the d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft APIs handling scales and axes. Grid lines extend across the chart from the x-axis ticks, and custom labels are added for the title and population axis.

Mmeihaoming

94% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using data from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes, including a formatted x-axis tick label that abbreviates values (e.g., converting billions) and removing gridlines and domain lines. The visualization uses d3.scaleLinear and d3.scaleBand to map populations and countries, with axes created via d3.axisBottom and d3.axisLeft, rendered as SVG. The chart also includes custom axis and title text styling through CSS.

Mmartinovicb

94% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. It showcases customized D3 axes, with a linear scale for population on the x-axis and a band scale for country names on the y-axis. The chart uses `d3.axisBottom` and `d3.axisLeft` to generate axes, with custom tick formatting that converts large numbers to abbreviations. The `.tick line` and `.domain` elements are selectively removed to clean up the visual layout, while SVG text elements add titles and axis labels.

YYINGNAN DENG

94% match

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes: the y-axis removes domain lines and ticks for a cleaner look, while the x-axis formats population values with abbreviations (e.g., “B” for billions) and adds a descriptive axis label. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering as SVG.

Ccbruml

94% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes, including a bottom axis with abbreviated tick labels (converting billions to “B”) and a left axis with removed domain and tick lines. The code uses D3 v5 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering SVG elements inside a fixed-width viewport. Custom tick formatting and axis label styling are applied via the `format` module and CSS.

AAronNaylor

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

94% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that converts values like "1.42G" to "1.42B" and includes a label. The chart is rendered as SVG with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`.

Jjnpatel

94% match