Skip to main content
SimilarExport ZIP
100%

activity 6-Q1.2

✓ Published0🌍 Public
119n81a0581sunny@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This horizontal bar chart displays the populations of 20 countries for 2010, sorted by country name along the y-axis with population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position the rectangles, while custom `AxisBottom` and `AxisLeft` components render the ticks. The data is loaded from a CSV file via `csv()` and formatted with `format('.2s')` to abbreviate large numbers (e.g., "1.2B"). SVG output is generated through React components, with hover tooltips provided by SVG `<title>` elements.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6-Q1.1

This visualization is a horizontal bar chart showing the population of ten countries in the year 2000, ordered along a categorical y-axis and a linear x-axis. Built with React and D3 version 5, it uses `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numerical axis, and SVG rectangles for the bars. The code employs `d3.csv` to load data from a GitHub-hosted CSV file, with tick labels formatted using `d3.format` (e.g., converting "2.5G" to "2.5B"). Axes are rendered by custom components `AxisBottom` and `AxisLeft`, and each bar includes a tooltip showing the population value.

119n81a0581sunny@gmail.com
95% match
Loading thumbnail…

Activity-6-q1.2

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles, with React managing the component structure. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and population values are formatted with `d3.format` to abbreviate large numbers (e.g., “1.2B”). Blue axis lines and green bars are styled with CSS.

Bbhargavr016@gmail.com
94% match
Loading thumbnail…

Activity6_Q1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses React with D3 v5 scales, including d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Data is loaded via d3.csv from a GitHub repository and rendered as SVG rectangles with native tooltips showing formatted population values. Custom React components handle axis rendering with tick formatting that converts Giga units to Billions.

VVidya Lakshmi Chitturi
93% match
Loading thumbnail…

Activity6_q1.2

A horizontal bar chart displays the population of 20 countries in 2010, with each bar’s length proportional to its population value. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values to pixel positions. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axes are built using custom React components. Tick labels are formatted with `d3.format` to abbreviate large numbers (e.g., converting “G” to “B” for billions).

Nnikhithadadi@my.unt.edu
93% match
Loading thumbnail…

Activity-6_Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The bars are rendered as SVG rectangles using React components, with D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` to abbreviate large numbers (e.g., "1.2B"), and each bar includes a tooltip showing the exact value.

Tthoutunikhitha@gmail.com
93% match
Loading thumbnail…

Activity_6_Q_2

A horizontal bar chart displays the 2010 population of 20 countries, with bars ranked by country name on the y-axis and population in billions on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and `csv` from D3 to load the dataset from a GitHub URL. Axis components generate ticks, while rectangle marks include tooltips via SVG `<title>` elements.

Aadapasaidivya99@gmail.com
93% match
Loading thumbnail…

Activity-6-q1.2

This bar chart displays the populations of 20 countries in 2010, ranked along a vertical categorical axis with horizontal bars. The visualization uses D3 version 5 within a React framework, rendering to SVG via React components. Data is loaded from a remote CSV using d3.csv, with population values scaled by 1000. Axes are generated using d3.scaleBand and d3.scaleLinear, while d3.format applies SI-prefix tick labels that convert billions to B. Each bar includes a native SVG title tooltip showing the formatted population value.

Sswapnadabburi@my.unt.edu
93% match
Loading thumbnail…

Activity 6_Q2

A horizontal bar chart displays the 2010 populations of the top 20 countries, sorted from largest to smallest. The visualization uses a D3 scaleBand for the categorical y-axis and a scaleLinear for the numerical x-axis, with population values formatted using the D3 `format` function to abbreviate large numbers. React functional components render the SVG axes and marks, with a native SVG `<title>` element providing hover tooltips. Data is loaded asynchronously from a CSV file via the `d3.csv` method, filtering and sorting the dataset before rendering the bars.

SSrihith Reddy Gaddam
93% match