Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes jls

✓ Published1🌍 Public
Jjlspangl
Last edited May 21, 2021
Created on May 21, 2021
Forked from Customizing Axes

This horizontal bar chart displays the populations of the world’s ten most populous countries, based on 2018 United Nations estimates. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for bar widths and `d3.scaleBand` for category spacing. Axes are customized with `d3.axisLeft` and `d3.axisBottom`, applying tick formatting via `d3.format` to abbreviate large numbers in billions. The chart includes a title, axis labels, and grid lines, with data loaded from a CSV file.

AI-generated description

This bar chart shows population of the 10 most populous countries. The data comes from the year 2018 estimate in [United Nations: World Population Prospects 2017] (https://population.un.org/wpp/Download/Standard/Population/)

FORMATTING NUMBERS http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e

REMOVING UNNECESSARY LINES ADDING TITLE ADDING AXIS LABELS MAKING GRID LINES

colors: https://github.com/amycesal/dataviz-style-guide/blob/master/Sunlight-StyleGuide-DataViz.pdf

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the populations of the top ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart demonstrates customized axes, including formatted tick labels that convert large numbers to billions via `d3.format`, and colored reference gridlines. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. The data is loaded from a CSV file and rendered as SVG rectangles.

LLulu
94% match
Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the populations of the top 10 most populous countries, with the 2018 UN estimates scaled by 1,000 and each bar colored according to a per-country field. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with population values formatted using d3.format and the tick labels converted from billions to a readable format. The chart is rendered as SVG, with axes created via d3.axisLeft and d3.axisBottom, and includes a custom axis-label and title.

JJamesHop31
94% 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
94% 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
94% match
Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries using 2018 UN estimates. Written with D3 v5, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for categorical y-axis placement of each country. The chart customizes axes by removing default domain lines and tick marks, adding gridlines via negative tick sizes, and styling labels with large fonts. The SVG rendering includes a title and an axis label, with data loaded from a local CSV file.

KKinjal-Goyani
94% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization customizes D3 axes with a linear x-axis using population values and a banded y-axis for country names, applying tick formatting that converts abbreviations like ‘B’ for billions. Built with D3 v5, the SVG chart uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render bars and grid lines, with data loaded from a CSV file.

Hheartbreaks
93% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization uses d3.scaleLinear for the population axis and d3.scaleBand for country categories, with custom d3.axisLeft and d3.axisBottom ticks. The code formats population labels using d3.format and removes default axis lines for a cleaner look. Data loads from a CSV file, while SVG rendering occurs through d3.select and shape elements, with styling controlled by CSS classes.

Jjwadh
93% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization uses d3.scaleLinear for the population axis and d3.scaleBand for country categories, with custom d3.axisLeft and d3.axisBottom ticks. The code formats population labels using d3.format and removes default axis lines for a cleaner look. Data loads from a CSV file, while SVG rendering occurs through d3.select and shape elements, with styling controlled by CSS classes.

Jjwadh
93% match