Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Jun 4, 2020

Created on Jun 4, 2020

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values converted to thousands. The visualization highlights custom D3 axes: the bottom axis uses a linear scale with tick formatting that abbreviates large numbers (replacing "G" with "B"), while the left axis removes its domain and tick lines for a cleaner look. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendering as SVG with styled tick text and labels.

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 populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including removing default domain lines, adding a descriptive axis label, and formatting tick labels with the `format` function to abbreviate large numbers (e.g., converting billions to ’B’). The visualization uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart.

KKanishka33

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization customizes its axes: the y-axis removes domain and tick lines, while the x-axis uses a tick format that abbreviates numbers (e.g., converting G to B) and adds a population label. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendering. The chart also includes grid lines via `tickSize(-innerHeight)` and a title.

MMargarita Chernetski

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, with population values multiplied by 1,000 from the CSV data. The visualization demonstrates customized D3 v5 axes: a linear x-axis uses a tick formatter to abbreviate numbers (replacing ’G’ with ’B’) and includes an axis label, while the band y-axis removes its domain and tick lines for a cleaner look. The code relies on `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` from D3, rendering to SVG with margins, a title, and grid lines via negative tick sizes.

Hhamzsait

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values in thousands. The visualization demonstrates custom axis styling in D3 v5, including tick formatting that abbreviates large numbers with suffixes like "B" for billions, rotated tick labels, and removed axis domain lines. The chart uses `scaleLinear` for the population axis and `scaleBand` for countries, with `axisBottom` and `axisLeft` for the axes. The code also adds custom titles and axis labels, while styling ticks, lines, and text through CSS.

CCornelia

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

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 visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customized D3 axes: the left axis removes its domain and tick lines, while the bottom axis uses a custom tick format that abbreviates large numbers (converting 'G' to 'B' for billions) and extends tick lines across the chart. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, rendering as SVG with data loaded from a CSV file.

MMatthewJSonnen

96% match

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart customizes D3 axes by removing the left axis domain and tick lines, formatting the bottom axis tick labels to convert thousands to abbreviations like “B” for billion, and adding custom axis labels and a title. The visualization uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` with SVG rendering, and data is loaded from a CSV file.

Kkumarsaurav445

96% match