Fork of Activity 6_Task 1

100%

Fork of Activity 6_Task 1

✓ Published0🌍 Public

Last edited Oct 17, 2024

Created on Oct 17, 2024

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a horizontal linear scale with countries listed on a vertical band scale. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` to compute dimensions, while custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels. Population values are formatted with `format('.2s')` and converted from thousands, and each rectangle includes a native SVG `<title>` tooltip. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL.

LLakshmiPrasannaValdas@my.unt.edu

96% match

Loading thumbnail…

Fork of Activity6_Task1_Q1.2

This horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name along the vertical axis with population magnitude encoded by bar length on the horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `<rect>` elements for the bars. Population values are formatted using D3's `format` function to abbreviate large numbers with suffixes like "B" for billions. Data is loaded asynchronously from a remote CSV file via D3's `csv` parser.

Ggreeshmareddy135@gmail.com

95% match

Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the population of 30 countries in 2020, using green bars sorted by country name on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The `format` function from D3 converts tick labels to abbreviated form (e.g., "1.2B"). Data is loaded asynchronously from a CSV file hosted on GitHub using D3's `csv` function, with bars rendered as SVG rectangles and tooltips showing the precise value.

Aanusha.chilkamarri26@gmail.com

95% match

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the 2020 population estimates for the top 30 countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, with SVG rectangles as marks. Data is loaded from a remote CSV file via `d3.csv`, and the x-axis labels are formatted using `d3.format` to abbreviate large numbers, converting gigabytes notation to billions for readability.

Nnavyabade05@gmail.com

95% match

Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

Vvamsikrishnakanchukommala@my.unt.edu

94% match

Loading thumbnail…

Fork of Activity 6_Task1

This bar chart displays the population of 30 countries in 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React with D3 scales—`scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis—to render SVG rectangles. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and the code includes custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate axis ticks and bars. The x-axis labels are formatted with `d3.format` to abbreviate large numbers (e.g., converting millions to billions with an "B" suffix).

EElena Momtcheva

94% match

Loading thumbnail…

Fork of Activity 6_Task 1

A horizontal bar chart displays the 2020 population of thirty countries, with bars arranged alphabetically by country name. The chart loads data from a CSV file and renders it as an SVG using React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code defines custom axis components and a `Marks` component for the rectangles, which include tooltips formatted using D3's `format` function.

Sshivakumarganji@my.unt.edu

94% match

Loading thumbnail…

Fork of Activity6_Task1

A horizontal bar chart displays the 2020 population for the top 30 countries, using green bars with blue axis ticks. The chart is built with React and D3 v5, where d3.scaleBand maps country names to the y-axis and d3.scaleLinear maps population values to the x-axis, with a custom tick formatter converting large numbers to billions. Data is loaded from a remote CSV via d3.csv, and tooltips show each bar's exact population value when hovered.

PPreethi Medepalli-91

94% match