Skip to main content
SimilarExport ZIP
100%

Data as bar chart

✓ Published1🌍 Public
Ccarbuncle-3djs
Last edited Sep 24, 2020
Created on Sep 24, 2020

A horizontal bar chart ranks the twenty most populous countries, showing population counts with steel-blue bars and labeled axes. Built with D3 v6, the visualization loads CSV data from Kaggle, maps populations to a linear scale and countries to a band scale, and renders the chart as SVG. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes.

AI-generated description

A basic example of D3.JS usage for building bar charts

The data comes from Kaggle.com: Population by country - 2020 dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart ranks the populations of twenty countries, with horizontal bars sorted from most to least populous. The chart loads data from a CSV file and uses D3 v5’s `csv`, `scaleLinear`, and `scaleBand` to compute the scales, then renders rectangles as SVG elements. Axes are drawn with `axisLeft` and `axisBottom`, and each bar’s fill color is set to steel blue via CSS.

PPabloReyesBetanzo
90% match
Loading thumbnail…

D3 Bar Chart

This D3 bar chart displays the populations of the ten most populous countries, using horizontal bars sorted by y-axis labels. The visualization maps population values to bar lengths via a linear scale and country names to band positions, with axes generated by `axisBottom` and `axisLeft`. It reads data from a CSV file (`data.csv`) containing country and population figures, multiplies the figures by 1,000, and renders the result as SVG rectangles with steel blue fill. The chart is built with d3.v7, using `scaleLinear` and `scaleBand` for scaling.

Aadbirch
90% match
Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, sorted vertically by country name. It uses D3 v5’s `csv` loader and `scaleLinear` and `scaleBand` to map population values and country categories, with axes generated by `axisLeft` and `axisBottom`. The SVG bars are rendered in steel blue, and population labels use the `format` function with abbreviated suffixes. Data comes from a local CSV file, and all rendering is done via SVG elements.

Kkkwyoung
90% match
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the populations of the ten most populous countries, using steel-blue rectangles scaled by population value. The visualization loads data from a CSV file and renders with D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for gridlines. SVG elements are appended programmatically, with population values converted from thousands to raw numbers before scaling.

BBlake Akapita
90% match
Loading thumbnail…

Basic Bar Chart

This bar chart displays population figures for the ten most populous countries, using horizontal bars ranked from largest to smallest. The visualization loads data from a CSV file and renders it as SVG rectangles via D3 v5, with populations scaled linearly along the x-axis and countries positioned by a band scale on the y-axis. It includes axes generated by `axisBottom` and `axisLeft`, and applies a steelblue fill and font styles from an external CSS file.

Llittlenanopichu
90% match
Loading thumbnail…

Bar chart

This bar chart displays the population of the ten most populous countries, using horizontal bars ordered alphabetically by country name. The visualization loads data from a CSV file and renders it as SVG rectangles. It uses D3 v5 scales and axes, including `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, with `axisLeft` and `axisBottom` for tick marks. The bars are styled steelblue via an external stylesheet.

BbeauMarko
90% match
Loading thumbnail…

Bar Chart

This bar chart displays population figures for the ten most populous countries, using horizontal bars ordered by country name. The visualization loads data from a CSV file and renders an SVG with D3 v5, employing `d3.scaleLinear` for the x-axis population values and `d3.scaleBand` for the y-axis country categories. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the bars themselves are appended as SVG rectangles with a steelblue fill.

DDanteStack
89% match
Loading thumbnail…

Making a bar chart

This horizontal bar chart ranks the ten most populous countries using population data from a CSV file, with bars scaled linearly by population size and country names on the categorical y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes and bars as SVG rectangles, while `csv` loads the data and `max` computes the domain. Population values are multiplied by 1,000 to reflect actual figures, and the chart is styled via CSS with steel-blue bars and large text.

RRod Potter
89% match