Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
LLinn
Last edited Oct 15, 2019
Created on Oct 15, 2019
Forked from Bar Charts

This example displays a horizontal bar chart of the female population as a percentage of the total, using 2018 World Bank data for ten countries. The chart customizes both axes by removing their domain lines, formatting the x-axis ticks as percentages, and adding axis labels. It uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom` and `axisLeft` to render the ticks and grid lines.

AI-generated description

This bar chart shows the female Population (% of total). The data comes from the year 2018. World Bank staff estimates based on age/sex distributions of United Nations Population Division's World Population Prospects

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 countries by population as of 2022, using data from Worldometer. The chart uses D3 v7 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom tick formatting via `format('.3s')` to display numbers in billions. Both `axisBottom` and `axisLeft` are customized by removing domain lines and tick marks for a cleaner visual, with all bars rendered as styled SVG rectangles.

RRaiyanRashid86
88% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population for the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes and formats (using d3.format to abbreviate large numbers), and adding axis labels. The visualization uses D3 v5 with d3.scaleBand and d3.scaleLinear for scales, and d3.axisLeft and d3.axisBottom for rendering axes as SVG elements, with custom styling applied via CSS.

Jjacobs-splunk
87% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes both axes by removing default domain lines and tick lines, and formats population labels to abbreviate numbers with a "B" suffix. Built with d3.v5, it uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG, with tick lines extended across the plot area and a custom axis label.

YYF
87% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes by removing default domain lines, adding axis labels with large fonts, and applying tick formatting. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering. Axes are manually styled via CSS classes, and the x-axis ticks are sized to span the chart height.

Kkesmith21
87% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the 2020 populations of the ten most populous countries, using data from Worldometers. The visualization customizes D3 v5 axes: the y-axis removes domain lines and tick strokes, while the x-axis uses a custom tick formatter that converts billions to a readable format, gridlines, and a labeled axis. SVG rendering and margin-based scales position the bars, with a title above the chart.

Eestregan
87% match
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Ssakhabutdinov
87% match
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Ssakhabutdinov
87% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customization of D3 axes, including removing default domains, using a custom tick formatter that converts billions to a readable format, and applying gridlines. The chart is rendered as SVG, with axes created via `d3.axisBottom` and `d3.axisLeft`, and styling applied through CSS classes.

Aa-ydobon
86% match