Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
SSumanthnaidu213
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from activity 6_Task 1

This example displays a horizontal bar chart of 2020 population data for 30 countries, using green bars with a blue axis. Built with React and D3.js v5, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the population x-axis, and `d3.format` to convert large numbers into abbreviated labels like "B" for billions. The data is fetched from a GitHub CSV using `d3.csv`, and interactive tooltips show the formatted population value on hover. The chart is rendered as an SVG with custom reusable components for axes and marks.

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 of population data for 30 countries in 2020, with country names on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5 providing the `scaleBand`, `scaleLinear`, `max`, and `format` functions for scaling axes and formatting tick labels. Data is loaded from a CSV file using D3's `csv` function and parsed into numeric population values. Blue tick lines, gray text, and green bars style the chart, with hover tooltips showing formatted population values.

Ssumanthpenna0221@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart of population figures for 30 countries in 2020, with country names on the y-axis and numeric population values on the x-axis. It uses d3.scaleBand and d3.scaleLinear for scales, with d3.format to abbreviate tick labels. Data is loaded via d3.csv from a GitHub-hosted CSV file. React components render SVG rectangles for the bars, and each bar includes a tooltip showing the formatted population value.

SSumanthnaidu213
95% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis and scaled proportionally along the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the data, with axes rendered by custom `AxisBottom` and `AxisLeft` components. The visualization reads CSV data from a GitHub repository, formats population values in billions using D3's `format`, and renders marks as SVG rectangles with tooltips.

Ssumanthnaidu213@gmail.com
95% match
Loading thumbnail…

Activity 6_Task 1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, with each bar’s length representing population size and country names on the y-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, and `csv` loader to fetch and process data from a GitHub-hosted CSV. SVG rendering is driven by reusable React components for axes and marks, with axis labels and green bars styled via CSS. Tooltips appear on hover, showing the population value in a compact format (e.g., “1.2B”).

SSiva Kishore Reddy
94% match
Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays 2020 population figures for countries, with bars extending from a shared left edge to lengths proportional to population values. The visualization uses React to render SVG elements, while D3 v6 scales and axes handle positioning and tick formatting, converting large numbers into abbreviated labels like "1.2B". Data is loaded asynchronously from a GitHub-hosted CSV file via D3's `csv` function. Interactive tooltips appear on hover through SVG `<title>` elements, revealing exact population values.

SSumanthnaidu213
94% match
Loading thumbnail…

activity 6_Task 1.2

A horizontal bar chart displays the populations of 20 countries for 2020, sorted by country name. The visualization uses React with D3 v5 APIs including `scaleBand`, `scaleLinear`, and `max` to compute scales, while SVG `rect` elements render the bars. Data is loaded from a CSV file via `d3.csv` and formatted using `d3.format`. The chart includes labeled axes with tick marks and a tooltip showing formatted population values.

Ssumanthnaidu213@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

This example displays a horizontal bar chart of population data for 30 countries in 2020, with green bars and blue axis ticks on an SVG canvas. The React code loads D3 v5 via UNPKG and uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis. Data is fetched from a CSV file using `d3.csv` and formatted with `d3.format` to abbreviate large numbers. The visualization demonstrates modular ES6 imports for axes and marks, with tooltips showing exact population values on hover.

Hhemanthdummy999@gmail.com
94% match
Loading thumbnail…

Activity6 Task1

This example displays a horizontal bar chart of 2020 population data for 30 countries, with bars colored light green and a blue axis line. It renders as a React application using D3 v5 to scale and format the population values (e.g., converting gigabytes to billions in tick labels). Data is loaded from a remote CSV file, and the chart is drawn using SVG rectangles. The code explicitly uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.csv` to process and visualize the dataset.

Ppslharika@gmail.com
94% match