Skip to main content
SimilarExport ZIP
100%

Fork of Activity 6_Task 1

✓ Published0🌍 Public
Nnavyabade05@gmail.com
Last edited Mar 30, 2025
Created on Mar 30, 2025
Forked from Activity 6_Taskl 1

This bar chart displays the 2020 population estimates for the top 30 countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, with SVG rectangles as marks. Data is loaded from a remote CSV file via `d3.csv`, and the x-axis labels are formatted using `d3.format` to abbreviate large numbers, converting gigabytes notation to billions for readability.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

Vvamsikrishnakanchukommala@my.unt.edu
96% match
Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

Ppraneeth.d555@gmail.com
95% match
Loading thumbnail…

Fork of Activity 6_Task1

This bar chart displays the population of 30 countries in 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React with D3 scales—`scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis—to render SVG rectangles. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and the code includes custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate axis ticks and bars. The x-axis labels are formatted with `d3.format` to abbreviate large numbers (e.g., converting millions to billions with an "B" suffix).

EElena Momtcheva
94% match
Loading thumbnail…

Fork of Activity 6_Task 1

This visualization presents a horizontal bar chart comparing the populations of the top 30 countries in 2020, with each bar labeled by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative axes, while `d3.format` converts raw values into readable SI units. Custom React components for axes and marks render the SVG rects, and data is loaded asynchronously from a CSV file via `d3.csv`.

Kkaringusathwika@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the 2020 population for the top 30 countries, sorted along a horizontal axis with population values and a vertical axis listing country names. The visualization uses D3 v7 to load CSV data, create a linear x-scale and band y-scale, and render light-green SVG rectangles. Axis components are built with `d3.axisBottom` and `d3.axisLeft`, with tick formatting that converts values to a concise billion/million notation (e.g., "1.2B"). The chart is generated entirely in SVG, with margins and scaling calculated in JavaScript.

Nnavyabade05@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6_task1

This bar chart visualizes the top 30 countries by population in 2020, sourced from a CSV file. Using D3 v5 within a React framework, the code employs `scaleBand` and `scaleLinear` for axis mappings and renders bars as SVG rectangles. The chart includes custom tick formatting via `format('.2s')`, converting values to billions with a 'B' suffix, and a tooltip showing the formatted population value on hover.

KKarnam Abinay Goud
94% match
Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a horizontal linear scale with countries listed on a vertical band scale. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` to compute dimensions, while custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels. Population values are formatted with `format('.2s')` and converted from thousands, and each rectangle includes a native SVG `<title>` tooltip. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL.

LLakshmiPrasannaValdas@my.unt.edu
94% match
Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the population of 30 countries in 2020, using green bars sorted by country name on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The `format` function from D3 converts tick labels to abbreviated form (e.g., "1.2B"). Data is loaded asynchronously from a CSV file hosted on GitHub using D3's `csv` function, with bars rendered as SVG rectangles and tooltips showing the precise value.

Aanusha.chilkamarri26@gmail.com
94% match