Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes

✓ Published0🌍 Public
Ssandeepss2020
Last edited Mar 17, 2023
Created on Mar 17, 2023
Forked from Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates. It shows how to customize D3 axes and scales for a cleaner presentation, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The axes are refined with custom tick formatting and styling, and the chart is rendered as SVG. The chart’s data is loaded from a CSV file and scaled up by a factor of 1,000 for readability.

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 population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customizing D3 axes, including a formatted x-axis with tick marks that extend across the chart, a removed y-axis line and ticks, and styled labels and title. Built with d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, the chart loads data from a CSV file and renders as SVG.

Ssnehareddygurram
95% match
Loading thumbnail…

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. The visualization demonstrates customized D3 axes, including formatted tick labels that convert large numbers into abbreviated units and grid lines extending across the chart. It uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG chart, with data loaded from a CSV file. Styling for the chart, including font sizes and fill colors, is defined in an external stylesheet.

Dddan0
95% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries, with population values sourced from the United Nations World Population Prospects 2017. It demonstrates D3 axis customization, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` to render formatted tick labels. The SVG chart is styled via CSS, with grid lines and custom fonts. Data is loaded from a CSV file and scaled by 1000.

SSadafNaseem
94% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, using scaleLinear and scaleBand to map data. The code applies axisBottom and axisLeft with custom tick formats and removes grid lines for a cleaner look, while styling text and rectangles via CSS.

VVighnesh Gawad
94% 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
94% 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
94% 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 v5 axes with d3.scaleLinear and d3.scaleBand, using d3.axisBottom and d3.axisLeft for tick formatting and gridlines. Bar widths correspond to population values, with labels styled via CSS classes. The chart is rendered as SVG, with data loaded from a CSV file and formatted using d3.format to abbreviate large numbers.

Rraghesh99
94% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates, with values scaled from thousands to millions. It highlights customized axes using D3 v5 APIs such as `scaleLinear` and `scaleBand`, while `axisBottom` and `axisLeft` generate tick marks. The chart removes default axis lines, applies tick formatting via `format('.3s')`, and renders SVG rectangles with steel-blue fills and styled text elements.

Aadriana-ss
94% match