Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published2🌍 Public
PPiotr Paszek
Last edited Apr 20, 2021
Created on Apr 20, 2021

A horizontal bar chart displays population estimates for the most populous countries, using data from the 2017 United Nations World Population Prospects. The chart encodes population with a linear scale and country names with a band scale to position bars. Rendered as SVG, the visualization uses D3 v6 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv`. The bars are styled with steelblue fill, and the chart includes labeled axes with margins applied.

AI-generated description

This bar chart shows population of the most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

This bar chart shows the populations of the ten most populous countries in the world, based on 2020 data from the United Nations. Using D3 v5, the visualization employs `d3.scaleLinear` and `d3.scaleBand` to map population values and country names, with `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file via `d3.csv`, and rectangles are appended to an SVG to represent each country, styled with a steel blue fill.

Ppatrick-abdullahad
92% match
Loading thumbnail…

Fork of Let's Make a Face with D3.js!

This horizontal bar chart displays population figures for ten countries, with each bar’s length scaled linearly from zero to the maximum population. The visualization loads data from a CSV file using `d3.csv`, converts population values to thousands, and renders SVG rectangles with `scaleLinear` and `scaleBand` for positioning. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, while D3 v5’s selection and data-join methods bind the dataset to the graphic.

JJordan Arnold
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A horizontal bar chart displays population data for ten countries, sorted by size, using SVG rectangles. The visualization builds scales with `d3.scaleLinear` and `d3.scaleBand`, adds axes via `d3.axisLeft` and `d3.axisBottom`, and loads the dataset from a CSV file using `d3.csv`. Population values are multiplied by 1000 before rendering, and the chart is positioned with margins and a translated group element. The example demonstrates basic data binding and SVG manipulation with D3 v5.

KKiara
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This bar chart displays population data for several countries, loading values from a CSV file. The visualization uses D3.js (v5) to map population to bar width on a linear scale, while country names are positioned on a band scale. Data is loaded asynchronously with `d3.csv`, and bars are appended as SVG `<rect>` elements through a data join with `selectAll` and `enter()`. The chart updates dynamically based on the parsed numeric population values.

Jjigarsoni0123
91% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization maps population data for ten countries as horizontal bars, with each bar’s width proportional to its population and height set by a categorical y-axis. It loads data from a CSV file, converts the population values, and uses d3.scaleLinear and d3.scaleBand to position the bars within an SVG. The code relies on d3.csv for data parsing and d3.select to append SVG rectangles.

Zzenoe
90% match
Loading thumbnail…

Fork of Lets make a bar chart

This horizontal bar chart displays the populations of the world's most populous countries, using D3 v7 to render the visualization as an SVG. It reads data from a CSV file and scales the population values by a factor of 1000. The chart employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis country categories, and uses the `axisLeft` and `axisBottom` functions to draw the axes, with steelblue rectangles for bars.

EElMITHOS
89% match
Loading thumbnail…

Let's make a face with D3.js

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3.js v5 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the visualization. The chart includes custom tick formatting that converts large numbers to abbreviated units like "B" for billions, and features a horizontal grid through `tickSize`. Data is loaded asynchronously via `d3.csv`.

Ddmb4ur
89% match
Loading thumbnail…

Let's make a face with D3.js!

This bar chart displays the populations of the ten most populous countries, with a title and axis labels for clarity. The chart is rendered as SVG using D3.js v6. The code imports specific functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from D3 to construct the scales and axes. Data is loaded from a CSV file, with the population field multiplied by 1000. The styled bars are steel blue, and axis ticks and labels use custom CSS font and color settings.

Yyouri7
88% match