Skip to main content
SimilarExport ZIP
100%

Activity 8 - Task 1

✓ Published0🌍 Public
SSamir Tarda
Last edited Apr 9, 2024
Created on Apr 9, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, with the largest values extending farthest to the right. Built with React and rendered as SVG, it loads data from a CSV file using the `d3.csv` parser and uses D3 scales (`d3.scaleBand` and `d3.scaleLinear`) to map countries and population counts to positions. Custom axis components draw tick marks and labels, and tooltips formatted with `d3.format` appear on hover over each bar.

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

This horizontal bar chart shows the 2020 population of 30 countries, ranked with the largest at the top and the smallest at the bottom. Each bar’s length encodes population value, a tooltip via SVG `<title>` shows the formatted number, and axes use blue grid lines with labels. The React app loads CSV data from a GitHub URL using `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, formats ticks with `d3.format`, and renders all elements as SVG through reusable local components.

MMandadi Nishita
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
93% 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
93% match
Loading thumbnail…

Activity 6 Task 1

This interactive SVG bar chart displays the 2020 populations of 30 countries, ranked from largest to smallest, using a horizontal layout. Built with React and D3 v5, it visualizes data from a CSV file, rendering bars with a light green fill and blue tick marks on the axes. The chart leverages D3’s `scaleBand` and `scaleLinear` to map countries and population values to screen coordinates, while the `AxisBottom`, `AxisLeft`, and `Marks` components generate the SVG elements. Tooltips are provided via native SVG `<title>` elements, and axis labels use a formatted scale for readability.

Sskykarthik97@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 shows a horizontal bar chart of population estimates for 30 countries in 2020, sorted alphabetically by country name. React components render the SVG visualization, while D3 v5 utilities handle data loading with `d3.csv`, linear scaling with `scaleLinear` for the x-axis, and band scaling with `scaleBand` for the y-axis categories. The code formats tick labels using `d3.format`, and bars include native SVG `<title>` tooltips. Data comes from a remote CSV file, with population values multiplied by 1000 during preprocessing.

SSai Gottumukkala
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