Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes

✓ Published1🌍 Public
JJadenzzz
Last edited Jan 12, 2022
Created on Dec 29, 2021
Forked from Customizing Axes

This bar chart displays the top 10 most populous countries in 2018 using data from the United Nations World Population Prospects 2017. It shows how to customize chart axes in D3 v5, using `scaleLinear` for population and `scaleBand` for country names. The visualization uses `axisBottom` and `axisLeft` with custom tick formatting that converts values from billions to trillions, and `axisBottom` includes grid lines extending across the chart. The SVG rendering includes styled tick labels and a 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 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
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
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
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 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
96% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the 2017 United Nations World Population Prospects. It shows how D3 axes can be customized, including tick formatting (converting billions to "B"), removal of domain lines, and styled tick labels. Using D3 v5, the visualization employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Axes are further enhanced with custom text elements for the title and axis label, while the bars are rendered as SVG rectangles.

RRadu Popescu
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 scaled in thousands. The visualization showcases customized D3 v5 axes: the y-axis uses `scaleBand` for country labels, while the x-axis employs `scaleLinear` with a tick formatter that converts millions to billions. The code uses `axisLeft` and `axisBottom` to render axes, removes default domain lines, and adds custom axis labels and a title via SVG text elements.

Jjim25522532
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