v1_Fork of Customizing Axes

100%

v1_Fork of Customizing Axes

✓ Published0🌍 Public

Last edited Jan 23, 2023

Created on Jan 23, 2023

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values from a CSV file scaled by 1,000. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars, while customizing axes by removing domain lines, applying tick formatting that converts billions to “B” via `format('.3s')`, and adding axis labels. The chart also demonstrates styling tick text, gridlines, and the title through CSS classes.

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 top 10 most populous countries using 2018 United Nations population estimates, showing population values on the x-axis and country names on the y-axis. The chart customizes the D3 v5 axis elements: the left axis lines and domain are removed, while the bottom axis uses tick lines extending inward and a custom tick format that converts billions to a concise scale. The visualization, rendered as SVG, uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` from the D3 library, with data loaded from a CSV file.

Oopenbracketdesign

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 UN population estimates, with each bar's length proportional to population. The example demonstrates D3 v5 axis customization, including tick formatting (converting values to billions), tick line removal, and custom axis labels. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG chart. The data is loaded from a CSV file containing country names and population figures, with the chart embedded in a simple HTML page styled via CSS.

AAnkit Patel

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates. The visualization uses D3 v5 to create scaled bars and customized axes, with the x-axis formatted to abbreviate large numbers (e.g., "G" replaced with "B" for billions). The chart loads data from a CSV file, scales the population values by 1000, and renders the result as SVG. Both the y-axis labels and the title are styled through CSS, while grid lines extend across the plot area using the `axisBottom` and `axisLeft` APIs.

Ssohum42

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, with horizontal gridlines and formatted tick labels that abbreviate large numbers (e.g., converting billions to "B"). Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements, loading data from a CSV file. The chart also includes a title and axis label with custom styling.

NNithish John Paull

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with tick labels formatted using `format('.3s')` to abbreviate large numbers. The data is loaded from a CSV file using D3's `csv` function, and the SVG rendering includes customized axis styling, a title, and grid lines defined in the accompanying CSS.

CChristianABeier

95% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries based on 2018 United Nations estimates, with population values displayed in millions. The chart highlights customized D3 axes: the y-axis labels are styled with large fonts, while the x-axis uses a tick formatter that converts abbreviations like “G” to “B” for billions. Built with D3 v5 and rendered as SVG, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the layout. Grid lines extend from the x-axis ticks, and the data is loaded from a CSV file using `d3.csv`.

DDomen Hribernik

94% 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 visualization highlights customized D3 v5 axes, including formatted tick labels that abbreviate large numbers (e.g., converting billions to "B") and gridlines created via tick sizing. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG chart, with data loaded from a local CSV file. Styling is applied through external CSS for text and rectangle elements.

Mmayuri-gosapphire

94% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values shown on the x-axis and country names on the y-axis. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a custom tick formatter that converts values to abbreviated units. The chart also demonstrates axis customization through d3.axisLeft, removing default domain lines, and adding custom axis labels and a title using SVG text elements.

CCarolina Acosta Muñoz

94% match