Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited May 7, 2019

Created on May 7, 2019

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Built with D3 v5, it visualizes the data as horizontal bars and demonstrates customized axes. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with the x-axis tick format converting large numbers to abbreviated values like "1.4B". The chart also removes default axis domains and gridlines, while custom styling is applied through CSS classes for ticks, labels, and the 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.

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 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 shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, including a horizontal axis formatted with abbreviated numbers (using `d3.format` to convert millions and billions) and a vertical axis with large tick labels. Using D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while rendering as SVG. Grid lines extend across the chart, and the axis labels and title are styled via CSS for clarity.

MMartin Lauf

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

97% match

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries in 2018, sourced from the United Nations World Population Prospects. The horizontal bars are ordered by country name, with a linear x-axis and a banded y-axis. The code uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to draw axes, while custom tick formatting converts large numbers into abbreviated units like “B” for billions. The x-axis gridlines extend across the chart via negative tick sizes, and the axis labels and title are styled with CSS.

Jjunge870214

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

96% match

Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customized D3 axes: the left axis removes its domain and tick lines, while the bottom axis uses a custom tick format that abbreviates large numbers (converting 'G' to 'B' for billions) and extends tick lines across the chart. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, rendering as SVG with data loaded from a CSV file.

MMatthewJSonnen

96% match