Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes

✓ Published0🌍 Public
NNoobSaiyan
Last edited Jan 9, 2021
Created on Jan 9, 2021
Forked from Customizing Axes

A horizontal bar chart displays the top 10 most populous countries from 2018 United Nations data, with a custom x-axis that formats population numbers in abbreviated units (e.g., "1.42B"). Using D3 v5 with SVG rendering, the example extends a basic bar chart by applying `scaleLinear`, `scaleBand`, and `axisBottom` with a custom tick format via `format('.3s')`, while removing axis domain lines and styling labels. The y-axis uses `axisLeft` with all ticks removed, and bars are sized using `xScale` and `yScale`.

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 example displays a horizontal bar chart of the top 10 most populous countries in 2018, based on United Nations data loaded from a CSV. It shows the population values via bar lengths, with a custom tick format that converts large numbers into abbreviated suffixes like “B” for billions. The visualization builds on a basic bar chart by customizing D3 axes: removing domain lines, adding an axis label, and styling ticks using `d3.axisBottom`, `d3.axisLeft`, and `scaleBand`. It uses D3 v5 with SVG rendering, and the code imports specific modules like `csv` and `scaleLinear`.

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

Fork of Customizing Axes

This visualization presents a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates (multiplied by 1000 from the CSV data). It demonstrates D3 v5 axis customization, including formatted tick labels (e.g., “1.42B”) via `d3.format` and removed default axis lines. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with custom tick sizing. Rectangle marks are rendered in SVG, with styled fonts and fills from the linked CSS.

SSteven Pearce
94% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates, with values scaled from thousands to millions. It highlights customized axes using D3 v5 APIs such as `scaleLinear` and `scaleBand`, while `axisBottom` and `axisLeft` generate tick marks. The chart removes default axis lines, applies tick formatting via `format('.3s')`, and renders SVG rectangles with steel-blue fills and styled text elements.

Aadriana-ss
94% match
Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries using 2018 UN estimates. Written with D3 v5, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for categorical y-axis placement of each country. The chart customizes axes by removing default domain lines and tick marks, adding gridlines via negative tick sizes, and styling labels with large fonts. The SVG rendering includes a title and an axis label, with data loaded from a local CSV file.

KKinjal-Goyani
94% match
Loading thumbnail…

Fork of Customizing Axes

A horizontal bar chart displays the population of the top 10 most populous countries, using 2018 UN estimates. Each bar is colored according to a value in the dataset. The visualization uses D3 v5's `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and formats tick labels with `format`. The SVG renders bars with custom colors and a title, with axes labeled to aid interpretation.

CCecilia831
94% 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
94% 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
94% match