Fork of Activity6_Task1

100%

Fork of Activity6_Task1

✓ Published0🌍 Public

Last edited Mar 30, 2025

Created on Mar 30, 2025

This fork of Activity6_Task1 displays a horizontal bar chart using React and D3 v5, comparing the 2020 populations of 30 countries. The visualization maps each country’s population to bar lengths using a linear scale, with categorical y-axis labels for country names. Using `d3.csv` to load data from a GitHub-hosted CSV, the chart renders as SVG with `scaleBand` and `scaleLinear` for axes, and includes tooltips via `<title>` elements that format values with `d3.format`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6_Task 1

This example displays a horizontal bar chart of population totals for 30 countries in 2020, using a bar length to encode each country’s population magnitude. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, and `csv` to load data from a GitHub-hosted CSV file. Rendered as SVG, it includes custom axis components, a formatted tick label using `format('.2s')`, and tooltips via the `<title>` element.

Hharsha13638@gmail.com

94% match

Loading thumbnail…

Fork of Activity8_Task1_DV

This fork renders a horizontal bar chart of population data for 30 countries in 2020, using React to compose an SVG scene. The code imports D3 v5 utilities like `scaleBand`, `scaleLinear`, and `max` to position bars and axes, while custom components (AxisBottom, AxisLeft, Marks) generate tick lines and rectangles. Population values are loaded from a CSV via D3’s `csv` function, then formatted with `format('.2s')` to display billions with a 'B' suffix. The visual emphasizes green bars against a clean white background, with tooltips revealing precise values on hover.

Llikithabaddam@my.unt.edu

93% match

Loading thumbnail…

Fork of Activity06_Task01

This example shows a horizontal bar chart of the populations of 30 countries in 2020. It is rendered as SVG with React, using D3’s scaleBand for the categorical y-axis and scaleLinear for the x-axis. Axis ticks and tick labels are generated by custom components; the bars carry tooltips with formatted population values via a D3 `title` element. Data loads from a remote CSV using D3’s `csv` function.

Bbharatchowdarypotluri@my.unt.edu

93% match

Loading thumbnail…

Fork of Activity 6_Task1

This horizontal bar chart displays the 2020 population for thirty countries, using green bars and blue axis lines. Built with React and D3 v5, the visualization loads data from an external CSV via the `csv()` function and renders as an SVG. The code defines custom components for axes and marks, using `scaleBand` and `scaleLinear` for positioning, with tooltips showing formatted population values.

HHarshita Vairagade

93% match

Loading thumbnail…

Fork of Fork of Activity8_Task1_DV

This horizontal bar chart displays the 2020 population for 30 countries, sourced from a CSV file loaded with `d3.csv`. Built with React and D3 v5, it renders as an SVG. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the x-axis, and `d3.format` to abbreviate large numbers to billions. A `<title>` element provides tooltips.

Llikithabaddam@my.unt.edu

93% match

Loading thumbnail…

Fork of Activity 6_Task 1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to bars and population values to bar widths, rendered as SVG `<rect>` elements with a `<title>` tooltip. The data is loaded via `d3.csv` from a GitHub gist, and axes are built custom components using D3’s tick generation.

Llokasaivenkatatammineedi@my.unt.edu

93% 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

92% match

Loading thumbnail…

Fork of Activity 6_task 1

This example shows a horizontal bar chart comparing population sizes across 30 countries for the year 2020. The visualization loads data from a CSV file using the `useData` hook and `d3.csv`, then renders the bars with SVG rectangles in a React component. The chart includes labeled axes with formatted tick values using `d3.format`, a title, and a tooltip that displays each country's population on hover. The code demonstrates the integration of React with D3 scales such as `scaleBand` and `scaleLinear`, along with reusable axis and mark components.

Jjampani921@gmail.com

92% match