Skip to main content
SimilarExport ZIP
100%

Activity6_Task1

✓ Published0🌍 Public
AAftab Hussain
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Hello VizHub

A bar chart displays the population of 20 countries in 2010, ranked along a vertical band scale. The React application loads CSV data from a GitHub URL via D3’s `csv` and uses `scaleBand` and `scaleLinear` to position bars, with axes rendered as SVG elements from custom `AxisBottom` and `AxisLeft` components. Native SVG `<title>` elements provide tooltips on hover, and ticks are formatted using `format('.2s')` to abbreviate large numbers.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

This bar chart displays the population of 20 countries in 2010, sorted by country name on the vertical axis with population values extending horizontally. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rendering. The chart loads CSV data from a GitHub repository using D3’s `csv` function, and includes formatted tick labels that abbreviate large numbers (e.g., converting "G" to "B" for billions) along with tooltips on each bar. The code demonstrates modular components for axes and marks, with styling applied through CSS classes.

Rrahman.mehmood2002@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the 2010 population estimates for 20 countries, ranked vertically by country name. Data is loaded from a remote CSV file and rendered as SVG rectangles using React. The visualization uses D3 v6 scales (`scaleBand` and `scaleLinear`) along with custom `AxisBottom` and `AxisLeft` React components. Axes are formatted with D3's `format` function to abbreviate large population values, and tooltips show the same formatted values on hover.

Kkandooriabhiram@gmail.com
93% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays 2020 population estimates for 30 countries, ranked by country name on the y-axis and population on the x-axis. The visualization uses SVG rendering within a React component, with D3 v5 scale functions (`scaleBand`, `scaleLinear`) for positioning, and custom `AxisBottom` and `AxisLeft` components for ticks. Data loads asynchronously from a CSV file via `d3.csv` and formats axis labels using `d3.format`. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Aanisha.peddireddy@gmail.com
93% match
Loading thumbnail…

Activity6_Task - 1

A horizontal bar chart displays the 2010 populations of 30 countries, ordered by name along the y-axis, with bar lengths proportional to population values on a linear scale. React components render the SVG visualization, while d3 v5 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`, `format`) load data from a GitHub-hosted CSV and compute scales and tick formatting, abbreviating large numbers with SI prefixes. The bars use CSS fill colors, and hover tooltips show formatted values via native SVG `<title>` elements.

NNitish Thotakura
93% match
Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the population of 20 countries for 2010, sourced from a CSV file, with bars sorted by country name. The chart uses D3's `scaleBand` and `scaleLinear` to map data to SVG coordinates, rendered as `rect` elements within a React component. Axes are drawn with custom components, and tick labels are formatted using D3's `format` function to abbreviate large numbers.

HHari Kiran
93% match
Loading thumbnail…

Activity6_Task1

This bar chart shows the population of ten countries in the year 2000, ranked and scaled by count. Built with React and D3 v5, it uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code imports D3 functions like `csv`, `scaleBand`, `scaleLinear`, `max`, and `format` to load and process data from a GitHub-hosted CSV. Custom axis and mark components render rectangles with tooltips, and the x-axis labels are formatted using SI prefixes, converting 'G' to 'B' for billions. The chart includes styled ticks, a light green fill for bars, and a Poppins font.

AAreeba Hassan
93% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
93% match
Loading thumbnail…

Activity-6-Task1.2

A horizontal bar chart displays the 20 most populous countries in 2010, with country names on the y-axis and population values on the x-axis. The React app loads CSV data via `d3.csv` using a custom `useData` hook, then renders SVG rectangles with D3 `scaleBand` and `scaleLinear` scales. D3 axes and tick formatting with `d3.format` label the chart, and native SVG `<title>` elements provide tooltips on hover.

SSaiKiranReddyKancharla@my.unt.edu
93% match