Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Jul 23, 2019

Created on Jul 23, 2019

This bar chart displays freshwater withdrawals for the top 10 countries, using data from a UBC freshwater dataset formatted with d3.csv. It builds on a basic bar chart by customizing the axes: the y-axis labels are enlarged with tick text styling, while the x-axis uses a custom tick format that converts values from gigabytes to billions via d3.format. Axis lines and domain paths are removed for a cleaner look, and labels for the title and x-axis are added with custom class-based styling. The chart uses d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom within an SVG rendered by D3 v5.

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…

Customizing Axes

This bar chart displays the top 10 most populous countries, using horizontal bars ordered by population. The chart customizes axes by applying a tick format that abbreviates large numbers (converting G to B) and removing domain lines for a cleaner look. Built with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, it renders to SVG and includes labeled axes and a title.

BBarryC7

82% match

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the populations of ten countries, with bars sorted by value and customized axes. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft plus d3.axisBottom for ticks. Axis customization includes removing domain lines, adding gridlines via tickSize, and formatting tick labels with d3.format to abbreviate values (e.g., converting G to B). A title and axis label are appended as SVG text elements.

Mmagua

82% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, using D3.js v5 to render an SVG visualization. The chart customizes axes by removing the y-axis line and ticks, and by formatting x-axis tick labels from raw numbers into a compact "B" (billion) suffix using a custom tick format function. Country labels appear on the y-axis, while population values are represented by horizontal bars scaled with `d3.scaleLinear`. Data is loaded from a CSV file and parsed for the visualization.

MMinwoo Pak

82% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the ten most populous countries, with populations scaled in thousands from a CSV file. The chart uses D3 v5 to build linear and band scales and axis generators, then customizes the axes by removing domain lines and default grid lines, adding a rotated x-axis label, and formatting tick labels to abbreviate large numbers (e.g., "1.42B"). The SVG rendering includes a title and styled tick marks, axis labels, and bars in steel blue.

PPioustu

82% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of ten countries in millions, with axes customized to improve readability. The y-axis labels are cleanly positioned without tick lines, while the x-axis uses abbreviated number formatting, converting values like “1.42B” from gigabytes notation to billions. SVG rendering leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with tick formatting via `d3.format`. Data loads from a CSV file, and both axis domains and tick marks are selectively removed for a minimalist presentation.

Kkb1ngram4

82% match

Loading thumbnail…

Customizing Axes - 072019

This bar chart displays the populations of ten countries, with bars ordered alphabetically along the vertical axis and population values on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data from a CSV file, and `axisBottom` with a custom tick format that abbreviates numbers (e.g., converting gigabytes to billions). The SVG rendering includes a left axis stripped of domain and tick lines, while the bottom axis removes its domain line, creating a clean, minimal appearance with steelblue bars.

Sshallowater

82% match

Loading thumbnail…

Customizing Axes

This example displays the populations of the top ten most populous countries as a horizontal bar chart. It customizes the axes by removing the default domain lines and using a custom tick format that converts large numbers into abbreviated forms like “B” for billions via D3’s `format` function. The bar chart is rendered with SVG, using `d3.scaleLinear` and `d3.scaleBand` for the x and y scales, `d3.axisBottom` for the x-axis, and `d3.axisLeft` for the y-axis. Data is loaded from a CSV file.

MMajaha21

82% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populated countries, with population values scaled in billions and abbreviated tick labels. The chart customizes its axes by removing domain lines and tick marks from the y-axis, while the x-axis uses a custom tick format that converts G (giga) to B (billion). Built with D3 v7, the visualization loads data from a CSV file and renders to SVG, using scales like `scaleLinear` and `scaleBand` alongside `axisLeft` and `axisBottom` to position bars and labels.

Ddaniel

81% match