Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Vviolet-chaeyoonkim
Last edited Aug 8, 2019
Created on Aug 8, 2019
Forked from Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, based on United Nations World Population Prospects data, with population values presented in billions. The example showcases D3 v5 axis customization, including a linear population scale with a formatted tick label (e.g., “1.42B” for China) and a band scale for country names. Customizations include removing axis domain lines, extending tick marks across the full chart height, and adding styled axis and title text via SVG. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to render the visualization.

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 top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It shows population values on the x-axis and country names on the y-axis. The example demonstrates D3 axis customization, including formatted tick labels that abbreviate numbers with "B" for billions and removed axis lines. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG visualization, with custom styling applied to ticks and labels.

Ccgeiran
96% 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 highlights customization of D3 axes, including tick formatting that converts large numbers into abbreviated forms (e.g., "B" for billion) and removal of default domain lines. It builds on a basic bar chart by adding a custom x-axis label, a title, and styled tick lines with gray strokes. The code uses D3 v5 functions like `axisBottom`, `axisLeft`, `scaleLinear`, and `scaleBand`, rendering to SVG with data loaded from a CSV file.

ZZhenxiang Wang
96% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects, with a linear scale for population and a band scale for country names. The visualization customizes D3 axes by removing domain lines, styling tick marks in red, and adding labels for both axes and a title. It uses d3.csv to load data, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with tick formatting that converts billions to a readable "B" suffix.

Wwedbew
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Uucsclk
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Uucsclk
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values in thousands. The visualization demonstrates custom axis styling in D3 v5, including tick formatting that abbreviates large numbers with suffixes like "B" for billions, rotated tick labels, and removed axis domain lines. The chart uses `scaleLinear` for the population axis and `scaleBand` for countries, with `axisBottom` and `axisLeft` for the axes. The code also adds custom titles and axis labels, while styling ticks, lines, and text through CSS.

CCornelia
95% 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 emphasizes axis customization, including formatted tick labels (e.g., “1.42B”), horizontal grid lines, and a custom axis label, all rendered as SVG. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and loads data from a CSV file via `csv()`. Population values are multiplied by 1,000 to reflect actual figures.

Nnicfavfar
95% 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
95% match