Skip to main content
SimilarExport ZIP
100%

Fork of Activity-6 Question-1

✓ Published0🌍 Public
Ssannihitha.k23@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from Activity-6

This fork of Activity-6 Question-1 displays a horizontal bar chart of country populations in 2020, sorted by country name. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to position the bars, and computes the x-axis maximum from the data. The SVG rendering includes custom Axis components, a green fill for marks, and tooltips formatted with D3’s `format` function to abbreviate values (e.g., “1.2B”). Data is loaded from a remote CSV via D3’s `csv` method.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6-Task1Question1

This example presents a horizontal bar chart of population figures for 30 countries in 2020, with each bar’s length encoding the population value and the y-axis listing country names. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to SVG rectangles, `format('.2s')` to abbreviate axis ticks (converting G to B), and a `<title>` element for hover tooltips. Data is loaded from a remote CSV via `d3.csv`, and the chart is rendered entirely as SVG with custom axis components.

Ppslharika@gmail.com
91% match
Loading thumbnail…

Fork of Activity 6_Question 2

This example presents a horizontal bar chart of population figures for 20 countries in 2020, arranged from top to bottom by country name. The chart uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning bars and `format` to abbreviate axis tick labels. Data is loaded from a remote CSV using D3’s `csv` function, with population values computed by multiplying the 2010 column by 1000. Bars include a native SVG `<title>` tooltip showing the formatted population value.

HHarshita Vairagade
91% match
Loading thumbnail…

Fork of Fork of activity 6_Question 1B

This example displays a horizontal bar chart of population data for 20 countries in 2010, using SVG rendering within a React framework. The chart reads a CSV file from a GitHub URL, which is fetched and parsed using D3's `csv` function, then processed with a custom `useData` hook. It builds scales with D3's `scaleBand` and `scaleLinear` functions to position bars and axes, and formats x-axis tick labels using D3's `format` function. User interaction is limited to tooltips showing each bar's value via an SVG `<title>` element.

Vvullihanumantharao@gmail.com
90% match
Loading thumbnail…

Fork of Activity_6_question-1.2

This example visualizes the 2020 populations of 20 countries as a horizontal bar chart, using SVG rectangles rendered through React components. It loads data from a GitHub-hosted CSV file via d3.csv, then maps each country’s population (converted from thousands) to bar widths using d3.scaleLinear, while d3.scaleBand positions the categorical y-axis labels. D3’s format method abbreviates large numbers, and custom AxisBottom and AxisLeft components generate styled ticks. The chart is built with React functional components and d3 v5, featuring green bars and blue tick lines.

AAbrarb702@gmail.com
90% match
Loading thumbnail…

Fork of Activity 6_Question 1-1.2

A horizontal bar chart displays the top ten countries by 2020 population, with bars extending rightward from a blue axis line and a green fill. The visualization uses React to render SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) mapping country names and population values. Data loads asynchronously from a GitHub-hosted CSV file via `d3.csv`, and tick labels format large numbers using `d3.format` with a custom 'B' suffix replacement.

HHarshita Vairagade
90% match
Loading thumbnail…

Fork of Activity_6 question_1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars scaled by population value. Built with React and D3 v5, the visualization loads CSV data via `d3.csv` and renders as an SVG. It employs `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, with tick marks and labels generated by custom components.

HHarinathChakali33@gmail.com
90% match
Loading thumbnail…

Fork of Question 2(2)_Activity 6

This example shows a horizontal bar chart of population data for 20 countries in 2010, using a green fill for each bar and a blue axis. It loads data from a remote CSV file via `d3.csv` and renders the visualization with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart includes custom axis components built with SVG, tick formatting through `format('.2s')` to convert values to billions, and tooltips via SVG `<title>` elements.

Ttallavijayalakshmi0710@gmail.com
90% match
Loading thumbnail…

Fork of Activity6_Question 1.2

This example displays a horizontal bar chart comparing the populations of 20 countries for the year 2010, using a bright green fill for the bars. The React application loads data from a remote CSV file via `d3.csv` and renders the visualization as an SVG. It uses D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. A tooltip showing the population in billions appears on hover, driven by the `<title>` element within each bar.

Aajaykumarseelam@my.unt.edu
90% match