Skip to main content
SimilarExport ZIP
100%

05_Customizing Axes

✓ Published0🌍 Public
LLuiz Domingues
Last edited May 15, 2022
Created on May 15, 2022
Forked from Customizing Axes

This visualization shows the top 10 most populous countries based on 2018 United Nations estimates, with China, India, and the United States leading. It builds on a basic bar chart by customizing d3.axisBottom with tick formatting that converts large numbers to abbreviated labels, turning G into B for billions. The chart removes default domain lines and tick marks from both axes, adds a rotated title, and includes explanatory axis labels. Data is loaded from a CSV file and rendered as SVG rectangles using d3.scaleLinear for the population scale and d3.scaleBand for the country categories.

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…

05_Customizing Axes

This visualization shows the top 10 most populous countries based on 2018 United Nations estimates, with China, India, and the United States leading. It builds on a basic bar chart by customizing d3.axisBottom with tick formatting that converts large numbers to abbreviated labels, turning G into B for billions. The chart removes default domain lines and tick marks from both axes, adds a rotated title, and includes explanatory axis labels. Data is loaded from a CSV file and rendered as SVG rectangles using d3.scaleLinear for the population scale and d3.scaleBand for the country categories.

LLuiz Domingues
100% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, with China and India leading by a wide margin. The example focuses on customizing D3 axes, removing default domain lines and using tick lines as horizontal gridlines. It employs `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, with custom tick formatting that converts billions to abbreviated labels. The SVG rendering includes styled tick text, an axis label, and a chart title, all defined through CSS classes.

SScubaman911
94% match
Loading thumbnail…

Customizing Axes

This visualization shows the ten most populous countries as a horizontal bar chart, using population data from the UN. The bars are sorted by population, with China and India dominating the chart. The example focuses on customizing both the x-axis and y-axis: the x-axis uses a tick format function to abbreviate large numbers (e.g., converting billions to "B"), while the y-axis labels are styled with custom tick text. The chart is rendered with SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, with data loaded via `d3.csv`.

Iianleekq
92% 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
92% 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
92% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates, with population values formatted in billions. It demonstrates customization of D3 axes, including a formatted x-axis tick label that replaces 'G' with 'B', removal of domain lines, and styled tick lines. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG.

Mmargaretgoode
92% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates, with population values formatted in billions. It demonstrates customization of D3 axes, including a formatted x-axis tick label that replaces 'G' with 'B', removal of domain lines, and styled tick lines. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG.

Mmargaretgoode
92% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates, with population values formatted in billions. It demonstrates customization of D3 axes, including a formatted x-axis tick label that replaces 'G' with 'B', removal of domain lines, and styled tick lines. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG.

Mmargaretgoode
92% match