Fork of Fork of Customizing Axes

100%

Fork of Fork of Customizing Axes

✓ Published1🌍 Public

Last edited Jun 1, 2021

Created on Jun 1, 2021

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 customizing D3 axes, including removing domain lines, styling tick text and lines, and adding an axis label and title. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and the `format` function to abbreviate tick labels with suffixes like “B” for billions. Data is loaded from a CSV file and rendered as SVG rectangles.

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…

Fork of 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 2017. The code uses d3.scaleLinear for the population axis and d3.scaleBand for the categorical country axis, with customized axes via d3.axisLeft and d3.axisBottom. It formats tick labels to abbreviate large numbers, adds a title and axis label, and removes default axis lines for a cleaner look. The bars are rendered as SVG rectangles with a fixed steelblue fill.

Sshubhamsingh173

97% match

Loading thumbnail…

Fork of 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 custom D3 axes, including formatted tick labels that convert values to billions and styled tick lines. Built with D3 v5, the code uses `csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` and `axisLeft` for rendering axes. The SVG rendering includes custom labels for the title and x-axis, with styling applied via external CSS.

SShdnShmli

96% match

Loading thumbnail…

Fork of Fork of 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, featuring a horizontal bar chart rendered with SVG. The code uses D3 v5 utilities such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the plot, with custom tick formatting that converts billions into a readable format. The chart includes styled gridlines, axis labels, and a title, with data loaded from a CSV file.

UUpamanyu-ml

96% match

Loading thumbnail…

Fork of Fork of 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 customizes D3 axes using `d3.axisBottom` and `d3.axisLeft`, removing default domain lines and tick lines, and applying a custom tick format that converts large numbers to abbreviations like “B” for billion. The visualization is rendered as an SVG, with horizontal bars sized via `d3.scaleLinear` and `d3.scaleBand`, and includes custom styling for tick labels, axis labels, and the title.

Mmp7090

96% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart shows 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 and tick marks, and reformatting population labels using `d3.format` to abbreviate large numbers. It uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with annotations for the title and axis label placed via D3 selections. The bars are rendered as SVG rectangles, with data loaded from a CSV file.

UUpamanyu-ml

96% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations World Population Prospects estimates. It shows a horizontal bar layout with country names on the y-axis and population values on the x-axis. The example demonstrates D3 v5 axis customization using `d3.axisBottom` and `d3.axisLeft`, with a formatted tick label that converts units from billions to millions. The code utilizes `d3.scaleLinear`, `d3.scaleBand`, and `d3.csv` to load the data, rendering the chart as SVG elements with custom styling for axes, labels, and the title.

SShalin Shah

95% match

Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects, with data loaded from a CSV file. It showcases customized D3 v5 axes, using `d3.scaleLinear` for the population scale and `d3.scaleBand` for countries. The code applies tick formatting with `d3.format`, removes axis domains, and uses `d3.axisBottom` and `d3.axisLeft` to render the scales. A title and axis label are added, with styled SVG text and steelblue rectangles for bars.

Ddankvader1

95% match

Loading thumbnail…

Fork of 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 domain lines, styling tick marks and labels, and adding a custom x-axis label and title. Using D3’s `scaleLinear` and `scaleBand`, the chart maps population values to bar widths and country names to vertical positions, with axis tick labels formatted using `format('.3s')` and converted from billions to a shorter notation. The SVG rendering includes styled grid lines and text elements via CSS.

Ddok0086m

95% match