Customising Axes

100%

Customising Axes

✓ Published1🌍 Public

Last edited May 9, 2020

Created on May 9, 2020

This bar chart displays the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects 2017. The chart customizes its axes by removing domain lines and tick marks from the left axis, and formatting the bottom axis ticks using `format()` to abbreviate large numbers (e.g., turning "1.4G" into "1.4B") and adding a label. Grid lines are created via the `axisBottom()` tick size, while the left axis is rendered with `axisLeft()` after stripping its decorative elements. The visualization is built with d3 v5, using `csv()` to load data and `scaleLinear()` and `scaleBand()` for scaling.

AI-generated description

Making a bar chart

This bar chart shoes population of the top 10 most populous countries. The data comes from the year 2018 estimate in [United Nations: 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. The chart customizes its axes by removing default domain lines and tick marks, applying a custom tick format that abbreviates large numbers (e.g., converting billions to "B"), and adding descriptive axis labels. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with data loaded from a CSV file.

Ddtdenver

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

97% 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 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, using 2018 estimates from the United Nations World Population Prospects. The chart customizes both axes: the y-axis labels are enlarged and the default domain line is removed, while the x-axis uses a custom tick format that abbreviates large numbers and replaces 'G' with 'B' for billions. The code leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with data loaded via `d3.csv`.

Rram-iyer

96% match

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization emphasizes customized axes: the y-axis removes its domain and tick lines, while the x-axis uses a formatted tick label that converts large numbers into abbreviated values like "1.42B" and draws gridlines across the chart. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and the `format` function. The chart is rendered as SVG, with data loaded from a CSV file and scaled by thousands.

Jjulieducasse

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 customizes D3 axes by removing default domain lines, adding grid lines via tick sizes, and formatting population values with `d3.format` to abbreviate numbers (e.g., converting G to B). It uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the customized axes in SVG.

AAlain Jennotte

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 customizes both axes: the y-axis removes domain and tick lines for a cleaner look, while the x-axis applies a custom tick format that converts large numbers into abbreviated labels and draws grid lines across the chart. Built with d3.v5, the code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render SVG elements. Population values are multiplied by 1000 during data loading from a CSV file.

Wwishcsdev

96% match