Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes

✓ Published0🌍 Public
RRadu Popescu
Last edited Jan 30, 2021
Created on Jan 30, 2021
Forked from 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.

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
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 population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. The visualization demonstrates customized D3 axes, including a formatted x-axis that converts values to billions and a y-axis with removed domain and tick lines. Built with d3.v5, the chart uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, rendering via SVG. Bar widths are mapped to population values, and the chart includes a title and axis label with custom styling from the included CSS.

HHojjat Karami
97% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, including formatted tick labels that convert large numbers into abbreviated units and grid lines extending across the chart. It uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG chart, with data loaded from a CSV file. Styling for the chart, including font sizes and fill colors, is defined in an external stylesheet.

Dddan0
97% 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. The visualization demonstrates custom D3 axes, including a formatted x-axis for populations in billions and a categorical y-axis for country names. The chart is rendered as SVG using `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft`. Tick lines extend across the plot area, and the domain lines are removed, while the x-axis label and title are added via D3 text elements.

JJuyeonee
97% 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
97% 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
97% match