Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Oct 2, 2020

Created on Oct 2, 2020

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.

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. 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 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. It builds on a basic bar chart by customizing the axes: the y-axis labels are kept while the domain and tick lines are removed, and the x-axis uses a linear scale with a custom tick format function, though currently it renders raw numbers. The chart employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with an SVG rendering, and includes styled tick text, axis labels, and a title via CSS.

TTolldvis

97% match

Loading thumbnail…

Customizing Axes

TTolldvis

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

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

97% match

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart showcases customized D3 axes: a horizontal axis with tick labels formatted to abbreviate millions and billions, while the vertical axis removes its domain line and tick marks. D3's `scaleBand` and `scaleLinear` position the bars, with `axisLeft` and `axisBottom` generating the axes. The SVG rendering includes styled tick lines, a title, and an axis label, demonstrating how to tailor axes for a cleaner presentation.

Pphdiamantino

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

97% match