Skip to main content
SimilarExport ZIP
100%

Activity6_Task1

✓ Published0🌍 Public
Ss.harshinisai01@gmail.com
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020. It is built with React and renders to SVG. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a remote CSV file using `d3.csv`, and each bar includes a native SVG `<title>` element for hover tooltips.

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

This example displays a horizontal bar chart of the top 30 countries by population in 2020. The visualization uses React to render SVG elements, with D3 v5 functions like `scaleBand` and `scaleLinear` for positioning and an axis generated through custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file via D3’s `csv` method, and each bar includes a native SVG `<title>` tooltip showing the population value. The chart uses a light green fill for the marks and blue axis lines.

HHarshathBudida@my.unt.edu
93% match
Loading thumbnail…

Activity6_task1

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, drawn with SVG in a React component. The chart uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, with formatted tick labels via `d3.format`. The data is loaded asynchronously from a CSV using `d3.csv` and rendered through a custom `Marks` component that creates SVG rectangles with tooltips. The visualization demonstrates combining D3’s data-joining and scales with React’s component structure.

Nneerajreddyaluka@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 30 countries for 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom React components render the axes and marks as SVG rectangles. Population data comes from an external CSV file, formatted using D3’s `format` function to display values in billions. Hovering over any bar reveals its exact value through a native SVG `<title>` tooltip.

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

Activity6_Task1

This example displays a horizontal bar chart comparing 2020 population figures for 30 countries. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numerical x-axis. Data is loaded asynchronously from a CSV file via d3.csv, and population values are formatted using d3.format with a custom tick formatter that converts gigabytes to billions. The chart includes axes generated through custom React components and interactive tooltips using SVG title elements.

KKhushi Desai
93% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, loaded from a remote CSV via `d3.csv`. The visualization uses React components to render an SVG, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Axis labels and tick marks are generated with custom `AxisBottom` and `AxisLeft` components, and each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Aaravapalliharika2002@gmail.com
92% match