Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
Ppillliarun79
Last edited May 22, 2020
Created on May 22, 2020
Forked from Wine Equality

This bar chart displays population estimates for the top 10 most populous countries from the 2018 United Nations World Population Prospects. It demonstrates customized D3 axes, using `d3.scaleLinear` and `d3.scaleBand` with `d3.axisBottom` and `d3.axisLeft`. Axis tick labels are formatted with `d3.format` (converting billions to "B"), grid lines are styled, and the left axis’s domain and tick lines are removed. The SVG rendering highlights red tick lines and custom axis label styling.

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 population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The example focuses on customizing D3 axes, removing default domain lines and adding custom tick styling, axis labels, and a title. It uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries, with `d3.axisBottom` and `d3.axisLeft` for rendering. The SVG output is styled via CSS, with tick lines in gray and large, muted text for readability.

Mmi-jjang
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 uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to customize axis ticks, formats, and grid lines. Population values are formatted in abbreviated units (e.g., billions) via `d3.format`. The SVG rendering highlights styling of tick labels, axis labels, and the chart title.

Ccharliemok
96% match
Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It customizes D3 v5 axes by removing domain lines, styling tick marks, and formatting population values with a `.3s` tick format that converts billions into “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisLeft` and `d3.axisBottom` for rendering axes in SVG.

Ttonestar
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 populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It highlights custom D3 axis styling, including tick formatting that converts values to billions, a horizontal grid, and removal of the default domain lines. The visualization builds on a basic bar chart example, using d3.scaleLinear and d3.scaleBand for scales, with d3.axisBottom and d3.axisLeft for axes. The SVG rendering includes custom font sizes, colors for tick labels, axis labels, and the title, all set via CSS.

LLittledevil7
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 customization of D3 axes, including abbreviated tick labels using `d3.format`, horizontal grid lines via `tickSize`, and removal of axis domains and tick lines. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom labels for the title and x-axis.

VVadim Jouk
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. It demonstrates customization of D3 axes, including removal of default domain lines, custom tick formatting with `format('.3s')`, and grid lines created via `tickSize`. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with SVG rendering. Labels for the title and axis are added as text elements.

Ssophburke
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 chart uses D3 v5's `scaleLinear` and `scaleBand` to map population values and country names, with customized `axisBottom` and `axisLeft` for tick formatting and styling. The SVG rendering includes styled grid lines, a title, and an axis label, demonstrating how to tailor axes for improved readability.

SSajib Khan
96% match