Skip to main content
SimilarExport ZIP
100%

Task1 of Activity6

✓ Published1🌍 Public
VVenkataSaisrivishnuBatchu@my.unt.edu
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from Activity 7

A horizontal bar chart displays the 2020 population estimates for 30 countries, sorted by country name. The chart is rendered as a static SVG using React and D3 v5, with bars colored green and blue tick marks. Population values are loaded from a remote CSV file and formatted in a compact SI notation. The implementation uses D3 scales, including `scaleBand` and `scaleLinear`, to map data to coordinates, and custom React components for axes and marks, with a tooltip showing the formatted population on hover.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity_6(11754343)_Task_1

This is a horizontal bar chart that displays the 2020 population estimates for 30 countries, sorted by country name. The bars are rendered as green SVG rectangles, with the x-axis representing population values in billions and the y-axis listing country names. Built with React and D3 v5, the chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom React components for the axes and marks. Population data is loaded from a CSV file via `d3.csv` and formatted using `d3.format`.

HHari Prasanth Penugonda
95% match
Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React components to render SVG elements, with D3’s scaleBand and scaleLinear handling the spatial mapping and d3.csv loading population data from a GitHub-hosted CSV file. Axis components generate tick marks and labels, while a formatter converts large numbers into abbreviated values like “1.2B” for readability.

Vvikramkotlo9@gmail.com
94% match
Loading thumbnail…

Activity_6 Task1

A horizontal bar chart displays population estimates for 30 countries, sorted by their 2020 values, with bars extending from a shared left axis and a blue tick grid. The visualization uses React components to render SVG elements, with D3 v5 handling data loading via `d3.csv` from a GitHub raw CSV file, while scales and axes are constructed through D3's scale functions. The code filters the dataset to the first 30 rows after parsing the Population field, and each bar includes a native SVG `<title>` tooltip showing the formatted value. The styling applies green marks and a Poppins font.

Ppslharika@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart visualizes the 2020 population for 30 countries, ranked from largest to smallest. The chart uses D3 v5 scales and SVG rendering within a React framework, with bars colored light green. Data is loaded from a remote CSV file. The chart displays population values using a linear scale, with axis ticks formatted to show values in billions. Tooltips reveal exact population figures.

Ggroup118sai@gmail.com
94% 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
94% match
Loading thumbnail…

Activity-8_Task-1

A horizontal bar chart displays 2020 population estimates for 30 countries, with bars colored light green and blue axis ticks. The chart uses D3 v5 scales (`scaleBand` for the y-axis, `scaleLinear` for the x-axis) and custom SVG components for axes and marks. Data is loaded from a remote CSV file, and React renders the SVG with interactive tooltips showing formatted population values.

Mmanideepchinna25@gmail.com
94% match
Loading thumbnail…

task1_activity6

This bar chart displays the 2020 population estimates for 30 countries, ordered vertically by country name with horizontal bars representing population values. Population data is loaded from a GitHub-hosted CSV file and formatted using D3's SI format to display values in billions. The visualization is built with React components, using D3 v5 scales (`scaleBand` and `scaleLinear`) to map data, while SVG rectangles with native `<title>` tooltips render the bars. Axes are generated manually through custom React components rather than D3 axis generators, with styling applied via CSS classes.

Bbadiniswetha@gmail.com
93% match
Loading thumbnail…

activity6task-1

This bar chart displays the 2020 population estimates for 30 countries, with horizontal bars sorted by country name. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data loads from a CSV via `d3.csv` and renders as SVG `<rect>` elements. The bottom axis formats tick values using `d3.format`, and tooltips show population values on hover.

Ssriharshakondakindi@gmail.com
93% match