Skip to main content
SimilarExport ZIP
100%

Fork of Activity_6 Q1

✓ Published0🌍 Public
Bbhavanadupati3@gmail.com
Last edited Oct 22, 2024
Created on Oct 21, 2024
Forked from Activity_6 Q1

A horizontal bar chart displays the populations of 30 countries from a CSV file, with labels on the y-axis and population values on the x-axis formatted in billions. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scaling, `AxisBottom` and `AxisLeft` for axes, and `Marks` to render SVG rectangles with tooltips showing exact values. The data is loaded via `csv` from a gist URL, with population values multiplied by 1000 to represent actual figures.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

Fork of activity 6_ Q1.1

This bar chart displays the populations of 30 countries in 2020, ordered along a vertical band scale. Each bar’s length encodes population via a linear scale, with axis ticks formatted in billions and a labeled horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` from D3 for scales and `csv` to load data from a GitHub-hosted CSV. SVG rendering is handled through React components, with tooltips provided by native `<title>` elements.

Kkowshiksamudrala08@gmail.com
94% match
Loading thumbnail…

Fork of Activity6_Q1.2

This example displays a horizontal bar chart of 2010 population data for twenty countries, loaded from a CSV file. The chart uses React with D3 v5 scales and axes, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. SVG rectangles render the bars, with tooltips appearing on hover. The code imports D3 utilities like `csv`, `format`, and `max` to process and format the data, replacing 'G' with 'B' for billion labeling.

SShiva Sai Reddy
94% match
Loading thumbnail…

Fork of Activity 6

A horizontal bar chart displays the populations of twenty countries using data from a CSV file, with a linear scale for population values and a band scale for country names. D3 v5 utilities (`csv`, `scaleLinear`, `scaleBand`, `max`, `format`) handle data loading and scaling within a React component. The SVG bars include native tooltips via `<title>` elements, styled with blue tick lines and green bars.

Vvarmanithish5@gmail.com
93% match
Loading thumbnail…

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Aabjalshaik02@gmail.com
93% match
Loading thumbnail…

Fork of Activity 6

A horizontal bar chart displays the 2020 population of 30 countries, ranked in descending order from the dataset loaded via `d3.csv` from a GitHub-hosted CSV file. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders bars as SVG `<rect>` elements. Custom `AxisBottom` and `AxisLeft` components generate ticks, while a `<title>` element provides tooltips with formatted values like "30M". The React app manages data loading asynchronously with a `useEffect` hook.

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

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav
93% match