Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
SSrihith Reddy Gaddam
Last edited Apr 19, 2025
Created on Apr 19, 2025
Forked from Hello VizHub

This visualization is a horizontal bar chart showing the population of each country in 2020. The bars are rendered as pale green rectangles using D3’s `scaleLinear` for the x-axis and a band scale for the y-axis, with axis components built from custom `AxisBottom` and `AxisLeft` modules. Data is loaded asynchronously from a CSV file via `d3.csv` with `autoType` to infer numeric values. The chart uses an SVG rendering approach with a Poppins font and lightsteelblue tick marks, updating the display by removing and redrawing all elements on each data load.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the 2020 populations of the first 30 countries from a CSV file fetched via `d3.csv`. Rendered as an SVG using React, the visualization maps country names on the y-axis using `d3.scaleBand` and population values on the x-axis via `d3.scaleLinear`. Light green bars represent each nation’s population, with axis ticks generated by custom `AxisBottom` and `AxisLeft` components. The chart’s x-axis labels are formatted in millions, and the data loading handles asynchronous fetching with `useData`.

SSrihith Reddy Gaddam
93% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, using light-green bars sorted by country name. The visualization is built with React and SVG, and leverages D3.js scale functions (`scaleLinear` and `scaleBand`) to map population values and country categories to pixel coordinates. The data is loaded from a remote CSV using D3's `csv` method, with axes rendered by custom `AxisBottom` and `AxisLeft` components.

SSrihith Reddy Gaddam
92% match
Loading thumbnail…

activity 6_Task 1

This visualization is a horizontal bar chart that displays the population of up to 30 countries for the year 2020, sorted in descending order. The chart uses React and SVG rendering, with D3.js (v5) providing the scaling and layout via `scaleBand` and `scaleLinear`. Data is fetched from a remote CSV file using D3’s `csv` function, and the bars are styled as light green rectangles. The x-axis is formatted to display values in billions, with tick marks and labels generated by custom React components.

Aadapasaidivya99@gmail.com
92% match
Loading thumbnail…

Activity-6_Task 1

This visualization is a horizontal bar chart displaying the 2020 population estimates for 30 countries, sourced from a CSV file hosted on GitHub. The chart uses green bars, with the length of each bar proportional to the population value, and includes a formatted x-axis that abbreviates large numbers (e.g., converting billions to "B"). The code leverages D3's `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and React's `useEffect` hook to asynchronously load and parse the data with `csv`. The rendering is done entirely through SVG elements, with the data plotted using `rect` marks and tooltips provided via `<title>` elements.

Ssriyaalugupalli@my.unt.edu
92% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of countries in 2020, sorted by country name, with the x-axis scaled linearly from zero to the maximum population value. The visualization uses D3 v7 to load CSV data, create a band scale for the y-axis and a linear scale for the x-axis, and render SVG rectangles. The bottom axis includes horizontal grid lines via tickSize, and the chart includes axis labels for both dimensions.

Kkblikitha22@gmail.com
92% match
Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for the top 30 countries, using a linear scale for population values and a band scale for country names. The visualization renders light green bars via SVG rectangles, with axes labeled "POPULATION-2020" and "Countries." It loads data from a CSV file using d3.csv, formats axis tick labels with d3.format to abbreviate values like millions and billions, and builds the chart using modular functions for axes and marks in d3.v7.

AAnushaHyderaboeni@my.unt.edu
91% 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
91% match
Loading thumbnail…

activity 6_Task 1

This visualization displays a horizontal bar chart of the 2020 population for 30 countries, using a light-green fill for each bar. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes a formatted tooltip on each bar, with tick labels formatted from grams to billions using `format('.2s')`. Data is loaded from a CSV file via the `csv` function, and axes are composed from custom components that generate tick marks and labels.

Rrayavarapulokesh3@gmail.com
91% match