Customizing Axes

100%

Customizing Axes

✓ Published2🌍 Public

Last edited Jul 22, 2019

Created on Jul 18, 2019

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates, with data loaded from a CSV file. The visualization focuses on customized D3 axes, including rotated y-axis labels, a modified x-axis tick format that converts values to billions (using the `replace` method after `format('.3s')`), and a removed x-axis baseline. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, while styling is applied through CSS classes for the title, axis labels, and tick marks.

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 United Nations estimates. The visualization emphasizes customized axes: the y-axis removes its domain and tick lines, while the x-axis uses a formatted tick label that converts large numbers into abbreviated values like "1.42B" and draws gridlines across the chart. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and the `format` function. The chart is rendered as SVG, with data loaded from a CSV file and scaled by thousands.

Jjulieducasse

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, with population values multiplied by 1,000 from the CSV data. The visualization demonstrates customized D3 v5 axes: a linear x-axis uses a tick formatter to abbreviate numbers (replacing ’G’ with ’B’) and includes an axis label, while the band y-axis removes its domain and tick lines for a cleaner look. The code relies on `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` from D3, rendering to SVG with margins, a title, and grid lines via negative tick sizes.

Hhamzsait

95% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, using population values multiplied by 1000. The visualization emphasizes customized axes: the left axis removes domain and tick lines, while the bottom axis uses a tick format that converts gigabytes to billions. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with styled tick text, axis labels, and a title defined in CSS.

EErichOh

95% match

Loading thumbnail…

Customizing Axes

EErichOh

95% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values scaled in thousands. It demonstrates customized D3 axes: the y-axis removes all tick lines and domain, while the x-axis uses a custom tick format that abbreviates large numbers with suffix letters (e.g., converting 'G' to 'B' for billions). The chart is built using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering as SVG.

LLittledevil7

95% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018 using population estimates from the United Nations World Population Prospects, with the data loaded from a local CSV file. The example focuses on customizing D3 axes: the bottom x-axis uses `scaleLinear` with a tick format that converts billions to "B" via `format('.3s')` and `.replace('G', 'B')`, while the left y-axis uses `scaleBand`. Custom styling includes removed domain lines, tick lines styled via `axisBottom` and `axisLeft`, and axis labels and title added as SVG text elements.

Ttracy3057

95% 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, with data loaded from a CSV file. The visualization highlights customized D3 axes: the y-axis omits its domain and tick lines, while the x-axis uses a tick formatter to abbreviate values like billions and removes its domain line. Built with D3 v5, it employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with `tickSize` to extend grid lines across the chart. Rendered as SVG, the bars use steelblue fills, and axis labels and titles are styled via CSS.

CCleber Rojas

95% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, based on United Nations population estimates. It shows how D3 axis customization can enhance readability, using custom tick formats (e.g., abbreviating millions as "B") and styled grid lines. The chart employs `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisBottom` and `d3.axisLeft` for axes. SVG rendering styles tick text, grid lines, and labels via CSS. Data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000.

CCameron

95% match