Fork of ICE-6 Tutorial Bar Chart

100%

Fork of ICE-6 Tutorial Bar Chart

✓ Published0🌍 Public

Last edited Mar 8, 2022

Created on Mar 8, 2022

This horizontal bar chart displays the top 10 countries by accident count for 2015, sourced from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` for the x and y axes, respectively. The code customizes the axes by removing domain lines, applying a tick formatter that converts large numbers to abbreviated units, and adding axis labels and a title. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

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 ICE-6 Tutorial Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, with revenue on the x-axis and race categories on the y-axis, using a 2018 United Nations population estimate. The visualization, built with D3 v5, customizes the axes by removing tick lines and domain paths, and formats the x-axis tick labels using a `format` function that converts values to abbreviated billions. The y-axis is generated with `scaleBand` and `axisLeft`, while `axisBottom` renders the x-axis with a custom label; data is loaded from a CSV URL and mapped to `rect` elements via `selectAll`, leveraging `scaleLinear` for the numeric scale.

AAishwarya Manjunath

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

84% match

Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the populations of the top ten most populous countries for 2017, sorted in descending order. The visualization uses D3's `csv` function to load data from a remote gist, with `scaleBand` and `scaleLinear` mapping country names to y-axis positions and population values to bar widths. Rendered as an SVG through React, the chart includes red grid lines and axis labels generated via D3's tick functions.

SSumanya4

84% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 with an SVG renderer to draw horizontal bars, a linear scale for population, and a band scale for country names. The axes are customized with tick formatting that abbreviates large numbers, and gridlines are drawn via the x-axis. Data is loaded from a CSV file using the `d3.csv` method, with population values multiplied by 1000 for display.

AAnthony Zornig

84% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects. It uses D3 v5 to load a CSV file, scale the population values linearly, and arrange countries on a band scale, with population shown in thousands. The visualization customizes the axes by removing domain lines, applying a compact tick format, and adding gridlines. The code imports specific D3 modules like scaleLinear, scaleBand, axisLeft, and axisBottom, rendering in SVG.

RRahulYN

84% match

Loading thumbnail…

ICE 6 Bar charts

This example displays the top 10 countries by population using a horizontal bar chart, with the x-axis formatted in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering marks as SVG rectangles. Data is loaded asynchronously via `csv` from a UN population dataset, and tooltips show exact values on hover.

Rrakeshkommineni

84% match

Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the top ten most populous countries, ranked by 2017 population data loaded from a CSV file. The chart uses React for component state and rendering, with D3 v5’s `scaleBand` and `scaleLinear` to map countries and population values to SVG rectangles. Axes are custom-drawn using D3’s array methods, and the visualization updates when new data arrives via a `useEffect` hook.

Ssudhamshu24

83% match

Loading thumbnail…

Fork of Making a Bar Chart 2

This example visualizes the top 10 most populous countries in 2018 as a horizontal bar chart, using data from the United Nations World Population Prospects. It highlights custom zero-lines and axis labels. The SVG visualization is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` for axes, with tick values formatted to abbreviate billions.

Eeveryfin-in

83% match