Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited May 7, 2019

Created on May 7, 2019

This bar chart displays the Gini index for the top five most income-inequal countries, with country names on the y-axis and the Gini value on the x-axis. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, while custom tick formatting converts values to abbreviated forms. Axes are styled with removed domain lines, colored ticks, and custom labels for the title and axis. Data comes from the CIA World Factbook, loaded via `d3.csv`.

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

83% match

Loading thumbnail…

Customizing Axes

A bar chart ranks the top ten most populous countries using data from a CSV file, with population values formatted in abbreviated units. The chart uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. Axes are customized with `axisLeft` and `axisBottom`, removing default domain lines and extending tick lines across the plot. Tick labels apply a custom formatter via `format`, while the chart’s title and axis label are added as SVG text elements.

IIsmael Nóbrega

82% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using a logarithmic-free linear scale for the x-axis and categorical bands for country names. The visualization customizes axes by removing default domain lines and tick marks, applying a tick format that abbreviates large numbers (e.g., "G" for billions) and adding styled axis labels and a title. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` APIs, rendering to SVG with data loaded from a CSV file.

NNeepaB

82% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, with a horizontal layout and customized axes. The y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that abbreviates large numbers and replaces 'G' with 'B' for billions. The chart is rendered with SVG using D3 v5, loading population data from a CSV file. The code uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to create and customize the visualization.

VVeena Muralidharan

82% match

Loading thumbnail…

Customising Axes

This bar chart displays the populations of the top five most populous countries, scaled linearly along the x-axis and categorically along the y-axis using a band scale. It uses custom axes: the y-axis labels are enlarged via CSS, the x-axis tick marks extend across the chart, and population values are formatted as billions using d3.format. The chart is rendered as SVG from a CSV file, with axis titles and a chart header added as text elements, using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom.

JJonathan Phelps

81% 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

81% match

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

81% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data loaded from a CSV file and rendered as SVG. The visualization customizes both axes by removing domain lines and tick lines from the categorical y-axis, while the linear x-axis uses a tick format that abbreviates large numbers and converts 'G' to 'B' for billions. It employs d3.csv, scaleLinear, scaleBand, axisLeft, and axisBottom, with gridlines generated via tickSize on the x-axis.

Rrainyrainyguo

81% match