Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
Ssindhuja27b@gmail.com
Last edited Mar 29, 2024
Created on Mar 29, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, using a dataset loaded from a GitHub-hosted CSV file. React manages the component state, while D3 v5 provides the `scaleBand` and `scaleLinear` functions for positioning bars and axes, and the `format` helper for abbreviating tick labels (e.g., converting “G” to “B”). The SVG is rendered with reusable axis and mark components, each bar displaying a native tooltip via the `<title>` element. The visual design uses green bars, blue axis lines, and a Poppins font.

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

This example displays a horizontal bar chart ranking the 2020 populations of 30 countries. The visualization uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis, rendering the bars as SVG `<rect>` elements. It loads CSV data from a GitHub repository and formats axis tick labels with `d3.format`. The components are built with React, while static axes and marks are defined in separate ES6 modules. A native SVG `<title>` element provides tooltips on hover.

Hhemanthmaddila13@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

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.

SSahithi.R
94% match
Loading thumbnail…

Activity 6-Task1

This example shows a horizontal bar chart ranking the populations of 30 countries for 2020, with each bar’s length encoding the population value and a text label for the country name. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a remote CSV via `useData` and `d3.csv`, with population values multiplied by 1000. Axes are rendered as SVG groups, and bars include a native `<title>` tooltip showing the formatted population value.

Ppslharika@gmail.com
94% 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
93% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing 2020 populations for up to 30 countries, with each bar labeled by country and sized proportionally to its population. The chart uses an SVG rendering with a green fill for bars and blue tick lines, and hover tooltips formatted with abbreviations like "B" for billions. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote gist URL. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are custom React components that generate tick lines and rectangular marks, while `format('.2s')` handles tick label abbreviation.

Jjtulasi05@gmail.com
93% match
Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart ranking the populations of 20 countries in 2020, with a green bar for each nation and axis labels formatted in billions. It uses React components to render SVG marks via `scaleBand` and `scaleLinear`, pulling data from a CSV file loaded with `d3.csv`. The chart includes a custom axis, a bottom label, and a tooltip showing the population value.

HHarshita Vairagade
93% match
Loading thumbnail…

Activity 6_task 1

This example displays a horizontal bar chart ranking the populations of up to 30 countries for the year 2020, using green bars with blue axis ticks. The visualization is rendered as an SVG within a React application, leveraging D3 v5 methods such as `scaleBand`, `scaleLinear`, and `csv` to fetch and format data from a remote GitHub dataset. The code demonstrates modular imports from D3 and local ES6 modules, and tooltips appear on hover via a `<title>` element.

Jjampani921@gmail.com
93% 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
93% match