Skip to main content
SimilarExport ZIP
100%

Activity 6 task 1

✓ Published0🌍 Public
Nnalinreddy96@gmail.com
Last edited Apr 5, 2025
Created on Apr 4, 2025
Forked from HTML Starter

This interactive bar chart visualizes the 2010 population estimates for 20 countries, using a horizontal layout with a logarithmic-style axis formatting that converts values to billions. The visualization is built with React and D3 v5, where the `scaleBand` and `scaleLinear` functions handle the country and population scales respectively. Data is loaded asynchronously from a remote CSV file using `d3.csv`, and the chart includes custom `AxisBottom` and `AxisLeft` components that render ticks and labels. Each bar displays a tooltip with the formatted population value, while the chart employs a green color scheme and the Poppins font family.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 1

This interactive bar chart displays the 2020 population figures for 30 countries, using horizontal bars to rank each nation along a linear scale. The visualization employs React to manage the SVG rendering, with D3 v5 handling data loading, scales, and axis generation through functions like `scaleBand` and `scaleLinear`. Population data is fetched from a CSV file and formatted using D3's `format` utility, converting values to billions for tooltips. The chart features blue tick lines, green bars, and a Poppins font, with the y-axis listing country names and the x-axis labeled “POPULATION-2020.”

Hharsha13638@gmail.com
92% match
Loading thumbnail…

Activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name on the y-axis and population on the x-axis. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` render tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, with population values converted from the raw CSV. SVG rectangles represent each country, with hover tooltips showing formatted population values in billions.

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

Activity_8 Task_1

This visualization shows the 2020 population estimates for 30 countries as a horizontal bar chart, with countries sorted along the y-axis and population values mapped to bar lengths on the x-axis. The chart is built with React, using D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom SVG components (`AxisBottom`, `AxisLeft`, and `Marks`) to render tick labels and rectangles. Population data is loaded asynchronously from a remote CSV file via `d3.csv`, with values formatted in billions using `d3.format`.

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

Activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, sorted by country name along the y-axis. The visualization uses green horizontal bars to encode population values, with blue tick marks on the x-axis and a Poppins font for all text. The React application uses d3.scaleBand and d3.scaleLinear for scales, with d3.format for tick labels that convert large numbers into abbreviated forms. Data is loaded from a remote CSV file using d3.csv, and the chart renders as an SVG with interactive tooltips showing population values on hover.

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

Activity 6_task 1

This horizontal bar chart visualizes the 2020 population estimates for 30 countries, sorted in descending order from the top. The visualization employs a React and D3 v5 stack, using `scaleBand` for the categorical country axis and `scaleLinear` for the numerical population axis, rendered as SVG rectangles. Data is loaded from a CSV file, with population values formatted using `d3.format` and tooltips that display the abbreviated figure (e.g., "1.4B"). The chart includes styled axes with blue tick lines and a green fill for the bars, with hover effects changing the bar color.

SSuneelKalva@my.unt.edu
91% match