Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes

✓ Published0🌍 Public
Oopenbracketdesign
Last edited Mar 8, 2021
Created on Mar 8, 2021
Forked from Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, showing population values on the x-axis and country names on the y-axis. The chart customizes the D3 v5 axis elements: the left axis lines and domain are removed, while the bottom axis uses tick lines extending inward and a custom tick format that converts billions to a concise scale. The visualization, rendered as SVG, uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` from the D3 library, with data loaded from a CSV file.

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 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
97% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates. The visualization uses D3 v5 to create scaled bars and customized axes, with the x-axis formatted to abbreviate large numbers (e.g., "G" replaced with "B" for billions). The chart loads data from a CSV file, scales the population values by 1000, and renders the result as SVG. Both the y-axis labels and the title are styled through CSS, while grid lines extend across the plot area using the `axisBottom` and `axisLeft` APIs.

Ssohum42
97% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values shown on the x-axis and country names on the y-axis. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a custom tick formatter that converts values to abbreviated units. The chart also demonstrates axis customization through d3.axisLeft, removing default domain lines, and adding custom axis labels and a title using SVG text elements.

CCarolina Acosta Muñoz
97% 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
97% 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
97% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values in thousands. The chart customizes D3 axes by removing default domain lines, applying tick formatting that converts values like "1.42G" to "1.42B", and adding custom labels and title. It uses `d3.axisBottom` and `d3.axisLeft` with `scaleBand` for countries and `scaleLinear` for population, while SVG rects are styled with steelblue fill and custom font sizes via CSS.

RRoman Polulekh
97% 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. It visualizes population data loaded from a CSV file, with each country’s population scaled linearly along the x-axis and country names positioned along a band scale on the y-axis. The example customizes D3 axes by removing tick lines, formatting tick labels from billions to the letter “B”, and adding custom axis and title text using `axisBottom` and `axisLeft` from d3 v5.

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