Skip to main content
SimilarExport ZIP
100%

Customizing Axis

✓ Published3🌍 Public
DDataFeast_71
Last edited Nov 22, 2020
Created on Nov 16, 2020
Forked from Make a BarChart

This bar chart displays the 2018 population estimates for the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. The x-axis uses a custom tick formatter via `d3.format` to abbreviate numbers with suffixes, and gridlines extend across the chart. The visualization is built with D3 v6, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, rendering as SVG. Data comes from the World Population Prospects 2017 dataset.

AI-generated description

This bar charts shows population of the top 10 most populous countries. the data comes from the year 2018 estimate in World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

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 2017. It shows how axis customization highlights data clarity: country names appear on the y-axis, while population values on the x-axis use a custom tick formatter that converts large numbers to abbreviated forms like "B" for billions. Built with D3 v5, the example uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `tickFormat`. The chart renders as SVG, with gridlines created via `tickSize` and axis labels styled through CSS classes.

AAnne Lee Steele
95% match
Loading thumbnail…

Customizing Axis

This example displays a bar chart of the top 10 most populous countries using 2018 population estimates from the World Population Prospects 2017 dataset. It emphasizes customized axes, with a bottom axis labeled "Population" and a left axis using abbreviated tick labels (e.g., "1.4B") via `d3.format`. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with grid lines generated by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file and rendered as SVG rectangles.

Lliyaxuanliyaxuan
94% match
Loading thumbnail…

Customizing Axis

This bar chart shows the population of the top 10 most populous countries from the 2018 estimate in World Population Prospects 2017. It demonstrates how to customize both axes by removing their domain lines, adding grid lines with large tick marks, and formatting population labels with a custom function that uses `d3.format` to abbreviate values (e.g., "1.42B"). The visualization uses D3 v6 with an SVG rendering, computed linear and point scales for axes, and styled tick text and lines via CSS.

Lliyaxuanliyaxuan
94% match
Loading thumbnail…

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 emphasizes custom axis styling, including formatted tick labels that abbreviate large numbers and horizontal grid lines extending across the plot area. The code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, with data loaded via d3.csv. The SVG rendering also removes default domain lines and adds custom axis titles and a chart title with specific font and color styling.

Ccyanea1
94% match
Loading thumbnail…

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 customizes both axes: the y-axis removes tick lines and domain, while the x-axis uses a `format('.3s')` tick formatter to abbreviate values and adds a custom “Population” label. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles.

Wwishcsdev
94% match
Loading thumbnail…

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 customized D3 axes: the y-axis uses an `axisLeft` with a band scale for country names, while the x-axis uses `axisBottom` with a linear scale and a custom tick format that converts large numbers to abbreviations (e.g., G to B). The `d3.scaleBand` and `d3.scaleLinear` APIs handle positioning, and `d3.csv` loads the data. The SVG render uses `d3.select` and `d3.max` to compute the domain.

CCodeHandLuke
94% match
Loading thumbnail…

Customising Axis

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 customizes both D3 axes: the left axis has all domain lines and tick lines removed, while the bottom axis uses a tick format that converts values from billions to a compact "B" suffix and extends tick lines across the plot. The chart applies a steelblue fill to all bars and uses custom font styles for ticks, labels, and the title. Data is loaded from a CSV file and scaled using `scaleLinear` and `scaleBand`.

AAdeola Oni
94% match
Loading thumbnail…

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 chart highlights custom D3 axis styling, including tick lines that extend across the plot area, custom labels, and a formatted x-axis that converts large numbers into billions. The visualization uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to build the chart, with CSS controlling the appearance of ticks and text. Data is loaded from a CSV file and rendered as SVG within a 960 by 500 viewport.

Llystran
94% match