Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited Aug 30, 2022

Created on Aug 30, 2022

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 uses a horizontal bar layout, with countries on the y-axis and population on the x-axis. The code employs D3 v5's `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes, with custom tick formatting that converts "G" to "B" for billions. The chart is rendered as SVG and includes a title and axis label.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017, with population values scaled by 1,000. The chart orders countries by population, displaying each bar’s length proportionally to its population via d3.scaleLinear and d3.scaleBand for categorical y-axis positioning. Axes are customized with d3.axisLeft and d3.axisBottom, including a tick formatter that converts G to B for billions, and a title and axis label are added as SVG text elements. The visualization is rendered in SVG using d3.csv for data loading and d3.select to manipulate the DOM.

MMillie

96% match

Loading thumbnail…

Fork of Making a Bar Chart

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 demonstrates custom axis formatting: the x-axis converts large numbers to abbreviated form—replacing 'G' with 'B'—and removes default axis lines for a cleaner look. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles.

RRYAN

96% match

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG, with axes customized by removing domain lines and formatting tick labels. Population values are multiplied by 1,000 and drawn as steelblue rectangles, while titles and axis labels are added as SVG text elements.

PPriyansh Ramnani

96% match

Loading thumbnail…

Fork of Making a Bar Chart

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 uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axis customization includes a tick format that abbreviates large numbers (e.g., converting billions) and removes default domain lines. The data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures.

AAdan Rodriguez

96% match

Loading thumbnail…

Fork of Making a Bar Chart

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 uses D3 v5 with scaleLinear and scaleBand to map population values to bar widths and country names to vertical bands. Customized d3.axisBottom and axisLeft components include formatted tick labels that convert large numbers to abbreviated units, while the chart is rendered as SVG with a steelblue fill for each bar.

AAnis Ali

96% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart with custom tick formatting that abbreviates large numbers. The horizontal bars are colored steelblue, with a title and axis label added via appended SVG text elements. Data is loaded from a CSV file and processed in JavaScript before being mapped to bar widths and y-axis positions.

MManue21

96% match

Loading thumbnail…

Fork of Making a Bar Chart

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 chart uses a linear scale for the population values and a band scale for the country labels, with bars rendered as SVG rectangles. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.csv to load and process the dataset. The axes are styled by removing the domain and tick lines, and the chart includes a title annotation.

SshanLU999

96% match

Loading thumbnail…

Fork of Making a Bar Chart

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 uses D3 v5 with an SVG rendering approach, employing `d3.csv` to load the data and `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for the axes. Population values are formatted with `d3.format`, and custom axis labels and gridlines highlight the data.

CCrossZeigler

96% match