Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes final (chart2)

✓ Published0🌍 Public
AAbdouEnsaj
Last edited Sep 8, 2022
Created on Sep 7, 2022
Forked from Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, based on United Nations estimates. The visualization customizes D3 axes, using a linear scale for population and a band scale for country names, with formatted tick labels that convert values to billions. The chart includes a titled axis label, removes default axis domains and lines, and styles text, ticks, and rectangles via CSS. The code employs d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG.

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, 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
96% 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
96% 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 highlights customized D3 axes, including a modified tick format that converts values from billions to a readable form. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG chart, with custom styles for tick text, labels, and the title.

YYasara Peiris
96% 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
96% 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. It shows each country’s total population as a horizontal bar, ordered by rank. The visualization customizes D3 axes by removing domain lines, adding tick marks that extend across the plotting area, and formatting tick labels with a `.3s` format to abbreviate large numbers. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft, rendering in SVG with populations multiplied by 1000.

Aabdelrhmanelbrolsy@yahoo.com
96% 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 uses D3 v5, with scales from `d3.scaleLinear` and `d3.scaleBand` to map population values and country names. Customized axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with tick formatting that converts values to billions. The chart is rendered as SVG, with styled tick marks, gridlines, and labels defined in CSS.

AAchrafHNAKA911
96% 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 2017. The visualization highlights customized D3 axes: the left axis uses no domain or tick lines, while tick text is enlarged and colored. The code leverages d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG, with population values scaled by 1000 in the data loading step.

Kkaddindr
96% 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
96% match