Vidya Bar graph

100%

Vidya Bar graph

✓ Published0🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

This bar chart displays the top 10 countries by total population, with each bar representing a country’s population in thousands. It uses D3.js to sort the data in descending order and render the bars, while the `@curran/responsive-axes` library handles the responsive axes and labels. The visualization adapts to container resizing via `observeResize`, and data comes from the UN population estimates 2024 dataset. A gray inner rectangle highlights the plot area, with bars and axis labels positioned using scales for band and linear mappings.

AI-generated description

A responsive bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Responsive Bar Chart

This responsive bar chart displays the top 10 countries by population using data from the UN Population Estimates 2024. It adapts its width and height to the container size via the `observeResize` and `axes` APIs from `@curran/responsive-axes`. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for positioning bars, with `d3.axisLeft` for the y-axis and dynamic SVG resizing in `d3.select().attr()`. Gray rectangles mark the inner plotting area, while bar heights encode population values in thousands.

CCurran Kelleher

85% match

Loading thumbnail…

Fork of Responsive Bar Chart

This bar chart visualizes the top 10 most populous countries, with each bar representing a country's total population in thousands. The data comes from the UN population estimates for 2024, filtered to include only countries and sorted in descending order. The visualization uses D3’s `scaleBand` for the categorical x-axis and `scaleLinear` for the population y-axis, with `max` computing the domain. The `@curran/responsive-axes` library handles the axes, while `observeResize` ensures the chart adapts to container dimensions. An inner rectangle highlights the plot area, and bars are drawn via `rect` elements.

Ttejasviteegala@my.unt.edu

83% match

Loading thumbnail…

Fork of Responsive Bar Chart

Ttejasviteegala@my.unt.edu

83% match

Loading thumbnail…

Bar Chart

This visualization displays the top 10 most populous countries using horizontal bars, with country names on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering as SVG. Population data comes from the United Nations World Population Prospects 2020, loaded via `d3.csv`, with tooltips showing formatted values. The chart includes styled axes and labels, with a teal fill for each bar.

Hhariveda-git

82% match

Loading thumbnail…

Bar Chart

This bar chart displays the population of the top 10 most populous countries, using horizontal bars sorted by country name. The data, sourced from United Nations population projections for 2017, is loaded from a CSV file and rendered as SVG. The visualization uses D3 v5 APIs including `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to draw the chart’s axes. Bars are colored steelblue via CSS.

Aatree-rohit

82% match

Loading thumbnail…

Fork of Simple Bar Chart

This visualization displays the top 10 most populous countries as of January 1, 2024, using a horizontal bar chart where bar lengths represent population in thousands. The code filters a United Nations population dataset for country-level entries, sorts by population in descending order, and selects the top ten. It leverages d3’s `scaleBand` and `scaleLinear` for positioning, with axes and labels handled through the `@curran/axis-labels` library. A light gray inner rectangle frames the plotting area, and bars are rendered as SVG rectangles via the `viz` function.

MManish Reddy Yachavarapu

82% match

Loading thumbnail…

Bar chart

A horizontal bar chart displays the top ten countries by population for 2020, sourced from a UN population CSV file. The chart encodes each country's population as the width of a rectangle, using D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The visualization is built with React, rendering SVG elements directly into the DOM.

SShashwat Kumar

81% match

Loading thumbnail…

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, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to create horizontal bars. The chart demonstrates custom axis customization through `axisLeft` and `axisBottom`. Population data is loaded from a CSV file and multiplied by 1000 to present the final values.

SShweta-tech

81% match