Skip to main content
SimilarExport ZIP
100%

Activity 6 task 1

✓ Published0🌍 Public
NNithish Karanam
Last edited Apr 5, 2025
Created on Apr 5, 2025
Forked from Hello VizHub

This horizontal bar chart ranks the 30 most populous countries in 2020, using population size along the x-axis and country names along the y-axis. The visualization loads CSV data from a GitHub repository via `d3.csv`, processes it with a custom row function, and sorts the entries in descending order. The chart is rendered as an SVG using `d3.select`, `scaleLinear`, and `scaleBand`, with axes generated through `axisBottom` and `axisLeft`. Bars are drawn with `selection.join('rect')` and are styled with a light green fill, while tick labels use a custom si-format prefix converter that replaces 'G' with 'B' for billions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6 task 1

This bar chart ranks the top 30 countries by population in 2020, using horizontal bars with population values on the x-axis and country names on the y-axis. The visualization is built with D3.js (v7) and rendered as an SVG, loading data from a CSV file. It uses custom components like `AxisBottom`, `AxisLeft`, and `Marks` to create the axes and bars, with D3's `scaleLinear` and `scaleBand` for data mapping and a custom tick format that converts numbers to billions.

NNithish Karanam
94% match
Loading thumbnail…

Activity-6 Task 1

This horizontal bar chart displays the top 30 countries by population in 2020, with bars extending from the left edge and a logarithmic-free linear scale for population values. The visualization uses D3 v7’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering SVG rectangles via a data join. Light green bars represent each country, with a custom tick formatter converting numeric values to abbreviated formats like “B” for billions. Population data is loaded as CSV from GitHub and sorted descending before filtering to the top 30 entries.

NNithish Karanam
92% match
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 30 most populous countries in 2020, with bars representing population values and a tooltip showing formatted numbers on hover. The visualization loads CSV data from a GitHub-hosted dataset, processes the population values by removing commas, and sorts countries in descending order before capping at 30 entries. Built with D3 v6, it uses `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and custom `AxisBottom` and `AxisLeft` components to render the axes. The chart includes blue grid lines, light green bars, and a formatted x-axis label that converts billions to a readable format.

Pparmuriat@gmail.com
91% match
Loading thumbnail…

Activity 6

This bar chart displays the populations of the top 30 countries in 2020, sorted in descending order. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with data loaded via d3.csv from a GitHub-hosted CSV file. SVG rectangles represent the bars, and d3.axisBottom and d3.axisLeft render the ticks. The code formats population values using d3.format, and tooltips show the exact population on hover.

NNithish Karanam
90% match
Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the 2020 populations of 30 countries, with bars sorted by country name along the y-axis and population values along the x-axis. The visualization uses D3 v7 to load CSV data from a GitHub repository, then renders SVG rectangles with a light green fill. The x-axis uses a linear scale with custom tick formatting to abbreviate large numbers (e.g., 200M, 1.2B), while the y-axis employs a band scale to position the country labels. Axis labels are added via the AxisBottom and AxisLeft components.

Vvenkatdinesh5010@gmail.com
90% match
Loading thumbnail…

Fork of ACTIVITY_6_TASK1

This visualization shows a horizontal bar chart of the 30 most populous countries in 2020, ranked in descending order, with each bar representing a country's population. The chart pulls data from a remote CSV file hosted on GitHub and loads it using `d3.csv`, then processes the values by converting the population field to a number. Rendered as SVG using D3 v7, the chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with custom components for the axes and marks. The bars are drawn as `<rect>` elements with a light green fill.

Ssravani1969@gmail.com
90% match
Loading thumbnail…

Activity 6 DV

This horizontal bar chart displays the top 30 most populous countries in 2020, sorted in descending order. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Bars are colored light green, and axis labels are formatted using `d3.format`. The data is loaded from a CSV file via `d3.csv` and processed with the `useData` utility function.

NNithish Karanam
89% match
Loading thumbnail…

Activity-6

This example shows a horizontal bar chart of the 30 most populous countries in 2020. Each bar’s length represents population, with a green fill and tooltips displaying formatted values, while the y-axis lists country names. The visualization is built with React and renders SVG elements. It uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and a CSV file fetched from a GitHub repository as the data source. Axis ticks are customized via `d3.format` to abbreviate large numbers.

NNithish Karanam
89% match