Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published1🌍 Public

Last edited Apr 26, 2022

Created on Apr 19, 2022

This bar chart displays the population of the top 10 most populous Chinese provinces, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates extensive D3 axis customization, including custom tick formatting that converts large numbers to abbreviated labels, grid lines, and styled tick text. Using d3.scaleLinear and d3.scaleBand, the chart positions bars and applies d3.axisLeft and d3.axisBottom with modified tick behavior. The SVG rendering includes a title, axis label, and steelblue bars, with data loaded from a CSV file.

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. It shows horizontal bars sorted by population, with a customized axis layout that removes unnecessary tick lines and domain paths. The visualization builds on d3.v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Population values are formatted using d3's `format('.3s')` with 'G' replaced by 'B', while axis labels and title are styled via CSS. The chart is rendered as SVG from a local CSV data file.

XXinZheng2018

91% match

Loading thumbnail…

Fork of 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 visualization demonstrates customized axes: the y-axis labels are cleanly rendered without tick lines, while the x-axis uses a custom tick formatter to abbreviate numbers (e.g., converting billions to "B"). The chart is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and the `axisBottom` and `axisLeft` APIs to generate the axes. Data is loaded from a CSV file and multiplied by 1000 to reflect actual population counts.

HHuaiyu Sun

90% 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 customization of D3 axes, including tick formatting that converts large numbers into abbreviated forms (e.g., "B" for billion) and removal of default domain lines. It builds on a basic bar chart by adding a custom x-axis label, a title, and styled tick lines with gray strokes. The code uses D3 v5 functions like `axisBottom`, `axisLeft`, `scaleLinear`, and `scaleBand`, rendering to SVG with data loaded from a CSV file.

ZZhenxiang Wang

90% match

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. The chart emphasizes customized axes: the y-axis labels have no ticks or domain line, while the x-axis uses a tick format that abbreviates numbers (e.g., "1.42B") and extends grid lines across the plot. Built with D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Styling is applied via CSS classes, with data loaded from a CSV file.

JJIAHAO LAI

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

90% match

Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, building on a tutorial by Curran Kelleher. It demonstrates customizing axes by applying a `scaleBand` for country labels and a `scaleLinear` for population values, using `axisBottom` and `axisLeft` with custom tick formatting that abbreviates numbers (e.g., converting “G” to “B” for billions). The chart also removes default grid lines and adds styled axis labels and titles via CSS.

WWangJiaCheng1999

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

89% 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. 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

89% match