Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published0🌍 Public

Last edited Sep 30, 2022

Created on Sep 30, 2022

This bar chart displays the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. The chart uses specific D3 v5 APIs: `scaleLinear` for the population axis, `scaleBand` for countries, `axisLeft` and `axisBottom` for axes, and a custom tick formatter converting values from millions to billions (e.g., `G` for `B`). The SVG rendering includes a title, an x-axis label, and gridlines created with negative tick sizes.

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 population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart employs D3's `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and customizes the axes with `axisBottom` and `axisLeft`. Tick labels are formatted using `format`, converting values to billions with a custom replacement. Data is loaded from a CSV file, and the SVG rendering includes styled tick lines, axis labels, and a title.

Ddagomezb

96% 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

96% match

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. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with tick labels formatted using `format('.3s')` to abbreviate large numbers. The data is loaded from a CSV file using D3's `csv` function, and the SVG rendering includes customized axis styling, a title, and grid lines defined in the accompanying CSS.

CChristianABeier

96% match

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 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

96% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations World Population Prospects estimates. The chart plots countries along the y-axis and population counts along the x-axis, using a linear scale for population and a band scale for countries. Built with D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and a custom tick formatter that converts numbers to abbreviated units like "B" for billions. The SVG rendering includes gridlines, axis labels, and a title, with styling applied via CSS classes.

Rradhadevarapu

96% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the top 10 most populous countries in 2018, using population data from the United Nations World Population Prospects 2017. The visualization customizes D3 axes: the y-axis labels are clickable to alert their text, while the x-axis formats numbers in abbreviated form, replacing “G” with “B”. Built with d3.v5 and SVG, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart, with tick lines sized to the inner height and custom styles for the title and axis labels.

Aantziko

96% match

Loading thumbnail…

Fork of 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. The visualization customizes D3 axes by removing domain lines, styling tick marks and labels, and adding a custom x-axis label and title. Using D3’s `scaleLinear` and `scaleBand`, the chart maps population values to bar widths and country names to vertical positions, with axis tick labels formatted using `format('.3s')` and converted from billions to a shorter notation. The SVG rendering includes styled grid lines and text elements via CSS.

Ddok0086m

96% match