Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published0🌍 Public

Last edited Aug 8, 2023

Created on Aug 8, 2023

This bar chart visualizes the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, with population values multiplied by 1000. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG with customized axes that omit unnecessary lines and apply a custom tick format converting G to B. The chart includes axis labels and a title, with styling applied via CSS for tick text, lines, and the title.

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…

Fork of 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. The visualization demonstrates customized D3 axes in an SVG rendering, using `d3.scaleLinear` for population and `d3.scaleBand` for countries. The code employs `d3.axisBottom` with tick formatting that converts large numbers (e.g., G to B) and `d3.axisLeft` with grid lines, while styling axis labels, tick lines, and title text through CSS.

Aall-over-yet

96% match

Loading thumbnail…

Fork of 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 demonstrates axis customization, removing default axis lines and tick marks while styling remaining elements. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The chart formats population values with a custom tick formatter that converts large numbers to abbreviated strings, and renders data as SVG rectangles with a steelblue fill.

Ddankvader1

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Horizontal bars represent each country’s population, with a custom-styled axis and a labeled title. Built with D3 v5, the code uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with a tick formatter that converts values to billions. The SVG rendering applies custom fonts, gridlines, and axis labels via CSS.

CCharlie Smith

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, with horizontal gridlines and formatted tick labels that abbreviate large numbers (e.g., converting billions to "B"). Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements, loading data from a CSV file. The chart also includes a title and axis label with custom styling.

NNithish John Paull

95% match

Loading thumbnail…

Fork of 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 estimate. It demonstrates custom D3 axes, including tick formatting that abbreviates large numbers and custom axis labels. The visualization uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG elements, with grid lines and a styled title. The chart builds on a previous bar chart example, highlighting how axes can be tailored for readability.

MMeysam Sahragard

95% match

Loading thumbnail…

Fork of 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 estimate, multiplied by 1000 for actual figures. It demonstrates custom axis styling using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with tick labels formatted via `format('.3s')` and gridlines styled through CSS. SVG rendering shows horizontal bars with tick marks and labels, while title and axis labels use custom font sizes and colors.

AApril Fangzhu Guo

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It features customized axes with shortened population labels (e.g., "1.41B") and a clean, sparse design. The visualization uses D3 v5 with `scaleBand` and `scaleLinear`, plus `axisBottom` and `axisLeft` for ticking. The SVG render includes horizontal grid lines and a labeled x-axis, demonstrating explicit axis customization through tick formatting and removal of default decorations.

CCristiano

95% match

Loading thumbnail…

Fork of 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 demonstrates custom axis styling with D3.js v5, including formatted tick labels (converting G to B for billions), removed domain lines, and styled tick marks. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with a custom tick formatter via `d3.format`. The SVG rendering includes a title and axis label, with country names on the left.

DDINESH SAI BOPPANA

95% match