My_Portrait

100%

✓ Published0🌍 Public

Last edited Sep 28, 2022

Created on Sep 28, 2022

This data-visualization example, titled *My_Portrait*, uses a 2018 United Nations population estimate for the top 10 most populous countries to construct a bar chart of national demographics. The bars are rendered within an SVG canvas, and the chart's visual design incorporates a background-clip technique that applies a semi-transparent text fill via the `portrait` class, allowing the graphic to double as a stylized portrait. The project relies on D3.js v5 (loaded as `d3.v5`) and uses its core API to bind the numeric data to the bars' heights. Styling is handled externally through `Style.css`, which sets the page margins and defines the text-fill effect.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This bar chart displays the population of the top five most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and custom tick formatting via `d3.format`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and bars are styled pink with a 0.3 padding.

SSkye-milu

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

78% 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 visualization is built with D3 v5 and rendered as SVG, with axes customized to improve readability. The code in index.js creates a face from circles and a path, though the main chart itself is not fully implemented in the provided snippets, which instead show a yellow smiley face drawn with `d3.select` and SVG primitives. Rendering uses the `d3` library within an HTML page that loads D3 from a CDN.

Nnpk2001

77% match

Loading thumbnail…

DataVisualization

This bar chart displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customized D3 axes with styled tick labels and grid lines. Built with D3 v5, the code uses `d3.csv` to load data and `d3.select` to manipulate SVG elements. The chart renders population values as steelblue rectangles with a title and axis labels, showing how D3 can be adapted for data-driven customization.

BBhagyashreeU

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

77% match

Loading thumbnail…

A Bar chart 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 an SVG rendering approach. The code loads data from a CSV file, scales the population values linearly on the x-axis and uses a band scale for the categorical country labels on the y-axis. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while bars are appended as SVG rectangles with a steelblue fill.

AAnderson Banihirwe

76% match

Loading thumbnail…

Untitled

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 demonstrates custom D3 v4 axis styling, including hidden x-axis path lines and percentage-formatted y-axis ticks. The SVG visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and handles window resizing by redrawing the chart with `getBoundingClientRect`. Data is loaded from a TSV file, with hover effects changing bar color to pink.

Jjhansi

76% match

Loading thumbnail…

Untitled

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 builds on a basic bar chart example and demonstrates customization of D3 axes. The visualization uses d3.v4 to create SVG rectangles, with bar width calculated from the dataset length and bar height proportional to population values. The chart’s background is styled via CSS, and the code includes a simple dataset array of nine values for illustration.

CClair Sun

76% match