Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published2🌍 Public
SSahithi.R
Last edited Oct 25, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

A horizontal bar chart displays the populations of 30 countries in 2020, ranked by country name, with each bar's length proportional to its population value. The visualization loads CSV data from a GitHub repository and renders using React with SVG. D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling, while custom React components define the axes and marks. The chart features a blue axis line, green bars, and formatted tick labels that convert values into billions.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked by population. The visualization uses D3 v5 scale functions (scaleBand and scaleLinear) to map data to SVG coordinates, with React components handling rendering of axes and marks. Data is loaded from a CSV file via d3.csv, and population values are formatted with d3.format.

Ccharanshiva769@gmail.com
96% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 population for 30 countries, ranked by country name along the y-axis and population on the x-axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` for positioning, while SVG rectangles render the bars with a native `<title>` tooltip showing formatted values. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with axis ticks and labels generated by custom React components.

SSeema Shrestha
96% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name, using SVG rendered via React. The chart loads CSV data from a GitHub gist, multiplies the 2020 value by 1000, and maps it to a linear scale, while countries are positioned with a band scale. Axes are built with custom React components (AxisBottom, AxisLeft), and a marks component renders each bar with a native tooltip. The code uses d3.scaleBand, d3.scaleLinear, and d3.format for tick labels.

SSrihith Reddy Gaddam
95% match
Loading thumbnail…

Activity 6_task1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted along a linear scale. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements for bars. Data is loaded via `d3.csv` from a GitHub-hosted CSV, with population values formatted using `d3.format`.

Bbhavanadupati3@gmail.com
95% match
Loading thumbnail…

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Mmeenam1106@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, with each bar labeled by country name and the x-axis formatted in billions using D3's `format` function. The visualization is built with React components and D3 v5 scales, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population values. SVG rectangles render the bars, and native `<title>` elements provide tooltips showing the formatted population figures. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with the population values multiplied by 1,000 during preprocessing.

DDipesh
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
95% match