Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Jan 19, 2020

Created on Jan 19, 2020

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values in thousands. The visualization demonstrates custom axis styling in D3 v5, including tick formatting that abbreviates large numbers with suffixes like "B" for billions, rotated tick labels, and removed axis domain lines. The chart uses `scaleLinear` for the population axis and `scaleBand` for countries, with `axisBottom` and `axisLeft` for the axes. The code also adds custom titles and axis labels, while styling ticks, lines, and text through CSS.

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, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates how to customize D3 axes, including tick formatting that abbreviates large numbers with a "B" suffix, axis line removal, and customized tick and label styling. The code uses D3 v5 modules like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, with SVG rendering for the output. Styling is applied via external CSS, affecting font sizes and colors for text and grid lines.

Jjacobs-splunk

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

97% 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 highlights customized axes, with D3’s `axisBottom` and `axisLeft` used to render tick marks and labels, while `scaleLinear` and `scaleBand` map population and country values. Tick labels are formatted with `format('.3s')` to abbreviate numbers, replacing 'G' with 'B' for billions. The SVG chart removes default axis domains and lines, adds an axis label, and styles text and rectangles via CSS.

NNirjan Khadka

97% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization customizes its axes: the y-axis removes domain and tick lines, while the x-axis uses a tick format that abbreviates numbers (e.g., converting G to B) and adds a population label. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendering. The chart also includes grid lines via `tickSize(-innerHeight)` and a title.

MMargarita Chernetski

97% 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 uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to customize axis ticks, formats, and grid lines. Population values are formatted in abbreviated units (e.g., billions) via `d3.format`. The SVG rendering highlights styling of tick labels, axis labels, and the chart title.

Ccharliemok

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

97% 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 emphasizes custom axis styling, including formatted tick labels that abbreviate large numbers and horizontal grid lines extending across the plot area. The code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, with data loaded via d3.csv. The SVG rendering also removes default domain lines and adds custom axis titles and a chart title with specific font and color styling.

Ccyanea1

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

97% match