Skip to main content
SimilarExport ZIP
100%

Customizing the Axes

✓ Published1🌍 Public
Aamit0623
Last edited Feb 18, 2020
Created on Feb 18, 2020
Forked from Making a Bar Chart

This example displays a bar chart of the top 10 most populous countries in 2018, based on United Nations data. It shows how to customize D3 axes using d3-axis. The code uses d3.scaleBand and d3.scaleLinear to map country names and population values, d3.axisLeft and d3.axisBottom for the axes, and a custom tick format via d3.format to abbreviate large numbers. The axes have tick lines removed and grid lines added.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries using 2018 data from the United Nations, and it demonstrates how to customize D3 axes. The chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisBottom with a custom tick format that converts billions to "B". The code removes axis domains and tick lines, applies custom styling via CSS, and appends axis labels and a title. Rendering is done with SVG via D3 v5.

Xxiaopangzi2333
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 United Nations population estimates, with customized axes. It builds on a basic bar chart by applying D3’s `axisBottom` with a tick format that abbreviates large numbers (e.g., converting billions to “B”) and removing default axis domain lines. The left axis uses `axisLeft` with its domain and tick lines stripped. The visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, with SVG rendering, and includes styled axis labels and a title via CSS.

Hharshitveda
94% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. It highlights how to customize D3 axes, including removing domain lines and tick lines, adding an axis label, and formatting tick values with `d3.format` to abbreviate large numbers. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom tick styling via CSS.

Yylzami40
94% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows how to customize D3 axes by formatting population values with d3.format, removing axis domains, adding grid lines via tickSize, and styling tick labels and the axis label. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for rendering SVG axes.

SSukesh Kumar
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects. The example demonstrates how to customize D3 axes, including formatting tick labels, removing axis lines, and adding custom labels. Using d3.scaleLinear and d3.scaleBand, it maps population and country names to positions. The code utilizes d3.axisBottom and d3.axisLeft, applies a custom tick format that converts values from millions to billions using the format function, and styles the visualization with SVG and CSS.

VVanishaGupta
94% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. The chart customizes D3 axes by removing default domain lines and tick lines, applying a custom tick format that converts G to B for billions, and styling tick labels, axis labels, and the title via CSS. It uses `d3.scaleLinear` and `d3.scaleBand` to map population and country names, with `d3.axisBottom` and `d3.axisLeft` to render the axes.

TTouha Zohair
94% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects 2017, with data loaded via d3.csv. It shows how to customize D3 axes: the y-axis uses d3.axisLeft with its domain and tick lines removed, while the x-axis uses d3.axisBottom with a custom tick format that converts values from billions to a readable "B" suffix and extends tick lines across the chart. The code employs d3.scaleLinear and d3.scaleBand to map data to SVG rectangles, with styling for tick text, labels, and titles defined in CSS.

Ssunilkrishnav
94% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. The chart demonstrates D3 axis customization, using `d3.axisBottom` with `.tickFormat` to abbreviate population numbers (converting "G" to "B"), custom tick sizes that extend through the chart, and hidden domain lines. It also uses `d3.scaleBand` and `d3.scaleLinear` to map countries and populations, with SVG rendered bars and styled text labels.

Xxuinleaf849
94% match