Skip to main content
SimilarExport ZIP
100%

Fork of Act-7_Q1_1

✓ Published0🌍 Public
Ppavanpkkalyan3@gmail.com
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Act-7_Q1_1

A horizontal bar chart displays the population of the top ten countries in the year 2000, sorted by country name with bars extending left-to-right from a shared origin. The React app loads CSV data from a GitHub repository, formats population values, and renders an SVG using D3 scaleBand and scaleLinear for axes and marks. The axis components draw tick lines and labels, while tooltips on each rectangle show the formatted population value using D3’s format function.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity_6 Q1.1

This bar chart shows the population of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The code uses React components to render SVG elements, including custom AxisBottom and AxisLeft components for ticks and labels. It loads CSV data from a GitHub repository using d3.csv, then applies a linear scale for population and a band scale for countries. The bars are green rectangles with tooltips showing formatted population values, and the x-axis labels use d3-format to abbreviate large numbers.

Bbhavya.kanyadara@gmail.com
91% match
Loading thumbnail…

Fork of activity6q1(1)

This horizontal bar chart displays the population of ten countries in the year 2000, sorted with the largest population at the top. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, rendering SVG rectangles. Data is loaded from a CSV file using D3’s `csv` function, and axis ticks are formatted with a custom SI prefix function that converts billions to 'B'.

Ssaitejakaranam10@gmail.com
91% match
Loading thumbnail…

Fork of act_6__2000

This bar chart displays the population of ten countries in the year 2000, ordered alphabetically by country name. It uses React with D3 v5 to render SVG bars, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each bar includes a native SVG `<title>` element showing the population in billions as a tooltip.

Hhlmn4936@gmail.com
91% match
Loading thumbnail…

Fork of Activity 6_Q1

This example displays a horizontal bar chart of the top ten countries by population in the year 2000, with bars sized proportionally to population values. It uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning. The `csv` loader fetches data from a GitHub-hosted CSV file, and `format('.2s')` converts population numbers into abbreviated labels like “1.2B”. Native SVG `<title>` elements provide hover tooltips, while axis ticks and labels are generated through custom React components.

KKarnam Abinay Goud
91% match
Loading thumbnail…

Fork of Activity_8 Question__1

A horizontal bar chart displays the population of the top 10 countries in the year 2000, using a d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. The React app loads CSV data from a GitHub repository via d3.csv, then renders SVG rectangles through the Marks component, with axes built by AxisBottom and AxisLeft. Populated bar values appear as native tooltips using SVG title elements, while the x-axis labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

Nneeleshalapati@gmail.com
91% match
Loading thumbnail…

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Aaadesh.pranesh@gmail.com
91% match
Loading thumbnail…

Fork of Fork of Activity7question1

This example displays a horizontal bar chart comparing the populations of ten countries in the year 2000, using a D3 v5 scaleBand for countries and a scaleLinear for population. The React-based rendering utilizes SVG, with `AxisBottom` and `AxisLeft` components generating ticks, while `Marks` creates rectangles whose widths encode population values. A tooltip, defined via `<title>`, shows the abbreviated population figure. Data is loaded asynchronously from a remote CSV file using D3's `csv` function.

Vvaishnavi6gan@gmail.com
91% match
Loading thumbnail…

Fork of Fork of Activity7question1

This example displays a horizontal bar chart comparing the populations of ten countries in the year 2000, using a D3 v5 scaleBand for countries and a scaleLinear for population. The React-based rendering utilizes SVG, with `AxisBottom` and `AxisLeft` components generating ticks, while `Marks` creates rectangles whose widths encode population values. A tooltip, defined via `<title>`, shows the abbreviated population figure. Data is loaded asynchronously from a remote CSV file using D3's `csv` function.

Vvaishnavi6gan@gmail.com
91% match