Skip to main content
SimilarExport ZIP
100%

Customizing Axis

✓ Published1🌍 Public
Lliyaxuanliyaxuan
Last edited Nov 24, 2020
Created on Nov 24, 2020
Forked from Customizing Axis

This bar chart shows the population of the top 10 most populous countries from the 2018 estimate in World Population Prospects 2017. It demonstrates how to customize both axes by removing their domain lines, adding grid lines with large tick marks, and formatting population labels with a custom function that uses `d3.format` to abbreviate values (e.g., "1.42B"). The visualization uses D3 v6 with an SVG rendering, computed linear and point scales for axes, and styled tick text and lines via CSS.

AI-generated description

This bar charts shows population of the top 10 most populous countries. the data comes from the year 2018 estimate in World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axis

This example displays a bar chart of the top 10 most populous countries using 2018 population estimates from the World Population Prospects 2017 dataset. It emphasizes customized axes, with a bottom axis labeled "Population" and a left axis using abbreviated tick labels (e.g., "1.4B") via `d3.format`. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with grid lines generated by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file and rendered as SVG rectangles.

Lliyaxuanliyaxuan
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. 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
94% 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 demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes, and formatting tick labels with abbreviations like "B" for billions. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, rendering to SVG. Data is loaded from a CSV file and scaled in the code before being plotted as steel-blue rectangles.

JJunheZhang66
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017, with population values scaled in thousands. It demonstrates how to customize D3 axes by removing domain lines and tick marks from the left axis, formatting population tick labels using `d3.format` to abbreviate values (e.g., replacing 'G' with 'B'), and extending tick lines across the chart with `tickSize`. The SVG rendering uses `d3.scaleLinear` and `d3.scaleBand`, with an axis label and title added as text elements.

YYuShuenWang
94% 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 demonstrates how to customize D3 axes, including formatting tick labels with abbreviations (e.g., "1.42B") and removing axis domain lines. The chart uses `d3.scaleLinear` and `d3.scaleBand` for scaling, with `d3.axisBottom` and `d3.axisLeft` for the axes.

Llarrykkk
94% match
Loading thumbnail…

Customizing Axis

This bar chart displays the 2018 population estimates for the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. The x-axis uses a custom tick formatter via `d3.format` to abbreviate numbers with suffixes, and gridlines extend across the chart. The visualization is built with D3 v6, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, rendering as SVG. Data comes from the World Population Prospects 2017 dataset.

DDataFeast_71
94% 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 customizes both axes: the y-axis removes tick lines and domain, while the x-axis uses a `format('.3s')` tick formatter to abbreviate values and adds a custom “Population” label. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles.

Wwishcsdev
94% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It customizes D3 axes by removing the domain lines, styling tick text and lines, and formatting population values with `d3.format` to abbreviate numbers like “1.4B”. The chart uses `d3.scaleBand` for countries and `d3.scaleLinear` for population, with `d3.axisLeft` and `d3.axisBottom` to render axes.

Gguangyi1012
94% match