Skip to main content
SimilarExport ZIP
100%

Fork of Activity-6 task 1

✓ Published0🌍 Public
Rrahulnathmukkolla@gmail.com
Last edited Mar 31, 2024
Created on Mar 31, 2024
Forked from Activity-6

This bar chart displays the 2020 populations of 30 countries, ordered vertically by country name with horizontal bars representing population values. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, scales population data from a CSV file, and renders SVG marks with custom axis components. Tooltips appear via native SVG `title` elements.

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 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`.

Ppraneeth.d555@gmail.com
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 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
94% 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…

Activity 6_Task 1

This horizontal bar chart displays the populations of thirty countries for 2020, sorted along the y-axis with bar lengths proportional to population values. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population scale, rendering SVG rectangles via the custom `Marks` component. Data is loaded from a CSV using `d3.csv`, with tick values formatted using `d3.format`.

Mmudunurirahulvarma98@gmail.com
94% 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_ 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
93% 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
93% match