Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Ttusharsharma10
Last edited Oct 10, 2019
Created on Oct 10, 2019
Forked from Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects. The chart shows animated bars that grow in width over five seconds, using a linear scale for the population axis and a band scale for country names. Customized D3 axes are implemented via `axisBottom` and `axisLeft`, including a tick format that converts large numbers to billions. The y-axis lines and domain are removed, while grid lines extend across the chart, with labels styled through CSS.

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 visualizes the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including a custom tick format that converts large numbers to billions, and removal of default axis lines and ticks. Built with d3.v5, the chart uses `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and renders as SVG with styled text elements.

Ssafdarawan
96% match
Loading thumbnail…

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 highlights customized D3 axes, using `d3.axisLeft` and `d3.axisBottom` with adjusted tick sizes, padding, and formatting (e.g., abbreviating numbers with `d3.format`). The chart’s y-axis tick labels are transformed to show values in billions, and grid lines extend across the plot area.

Sswathijay
96% match
Loading thumbnail…

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. It builds on a basic bar chart example by customizing the axes: the y-axis removes its default domain and tick lines, while the x-axis uses a custom tick format that converts abbreviations (G to B) and draws horizontal gridlines via negative tick sizes. The chart is rendered using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG, with styling applied through CSS classes.

RRemustus
96% match
Loading thumbnail…

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. It builds on a basic bar chart example by customizing the axes: the y-axis removes its default domain and tick lines, while the x-axis uses a custom tick format that converts abbreviations (G to B) and draws horizontal gridlines via negative tick sizes. The chart is rendered using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG, with styling applied through CSS classes.

RRemustus
96% match
Loading thumbnail…

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. It demonstrates customizing D3 axes: the y-axis has its domain line and tick lines removed, while the x-axis uses a tick format function to abbreviate large numbers and adds a custom axis label. The chart uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. Population values are multiplied by 1000, and bars are rendered as SVG rectangles with steelblue fill.

Hharshitveda
96% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes, including a bottom axis with abbreviated tick labels (converting billions to “B”) and a left axis with removed domain and tick lines. The code uses D3 v5 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering SVG elements inside a fixed-width viewport. Custom tick formatting and axis label styling are applied via the `format` module and CSS.

AAronNaylor
96% 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 highlights customized axes, with D3’s `axisBottom` and `axisLeft` used to render tick marks and labels, while `scaleLinear` and `scaleBand` map population and country values. Tick labels are formatted with `format('.3s')` to abbreviate numbers, replacing 'G' with 'B' for billions. The SVG chart removes default axis domains and lines, adds an axis label, and styles text and rectangles via CSS.

NNirjan Khadka
96% match
Loading thumbnail…

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 demonstrates customized D3 axes, including formatted tick labels that convert values into billions, horizontal grid lines, and a custom axis label. Using d3.scaleLinear and d3.scaleBand, the chart renders with SVG, while d3.axisBottom and d3.axisLeft handle tick generation. Styling through CSS customizes tick text, lines, and the chart title.

Ttarunkishore2303
96% match