Skip to main content
SimilarExport ZIP
100%

Fork of Activity-6

✓ Published2🌍 Public
KKarnam Abinay Goud
Last edited Oct 20, 2024
Created on Oct 20, 2024
Forked from Activity-6

This fork of Activity-6 presents a horizontal bar chart that ranks the top 30 countries by their 2020 population, using data from a CSV file hosted on GitHub. The bars are drawn as SVG rectangles, with their widths scaled by population values and their vertical positions determined by a categorical y-scale. The visualization uses D3 v5 for data loading (via `d3.csv`) and scale construction, while React manages the component state and rendering. Axis components render tick marks and labels, and hovering over a bar reveals its exact population value through a native SVG `<title>` tooltip.

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…

Fork of Activity 6_task1

This bar chart visualizes the top 30 countries by population in 2020, sourced from a CSV file. Using D3 v5 within a React framework, the code employs `scaleBand` and `scaleLinear` for axis mappings and renders bars as SVG rectangles. The chart includes custom tick formatting via `format('.2s')`, converting values to billions with a 'B' suffix, and a tooltip showing the formatted population value on hover.

KKarnam Abinay Goud
94% match
Loading thumbnail…

Fork of Fork of Activity-6

This horizontal bar chart displays the 2020 population estimates for 30 countries, with each bar's length proportional to its population value. Built with React and D3.js, the visualization uses reusable components for axes and marks. The `AxisBottom` component generates tick marks with formatted labels, while `AxisLeft` renders categorical labels. The `Marks` component maps each data row to a rectangle positioned by the categorical y-scale and sized by the linear x-scale, with tooltips showing the exact population via SVG `<title>` elements. Data is loaded asynchronously using D3's `csv` parser from a GitHub-hosted CSV file.

KKarnam Abinay Goud
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of population data for 30 countries in 2020. The visualization uses React to render an SVG with D3.js scales and axes. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a GitHub repository. Each bar is a `<rect>` element with a `<title>` tooltip showing the population value, formatted using D3's `format` function to abbreviate large numbers.

Aanisha.peddireddy@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav
94% match
Loading thumbnail…

Fork of Activity 6

This bar chart displays the 2020 populations of the top 30 countries, ranked vertically. Population values are formatted in billions using D3's `format` function, with a custom tick label replacing 'G' with 'B'. The visualization loads CSV data via `d3.csv` from a GitHub repository and renders SVG elements from React components. Axes and marks are built using D3's `scaleBand` and `scaleLinear`, with tooltips provided by SVG `<title>` elements.

Aajaykumarseelam@my.unt.edu
94% match
Loading thumbnail…

Fork of Activity 6

This fork of Activity 6 displays a horizontal bar chart ranking the populations of 30 countries for 2020, sourced from a GitHub-hosted CSV. The visualization uses React components to render SVG marks, with `d3.csv` for data loading and D3 scales to map population values and country names to pixel positions. Custom axis components generate tick marks and labels, while each bar includes a native SVG `<title>` element for hover tooltips.

Kkrishi7079@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

This horizontal bar chart displays the top 30 countries by 2020 population, with green bars extending from a shared baseline and blue tick marks along the axes. Built with React, the visualization uses D3 v5’s `scaleBand`, `scaleLinear`, and `format` utilities to map country names and population values to SVG rectangles, while the `csv` loader fetches data from a GitHub-hosted CSV file. Axis components render tick lines and labels, and hover tooltips reveal formatted population values via SVG `<title>` elements.

Mmayasuedorman@gmail.com
93% match
Loading thumbnail…

Fork of Activity 6

A horizontal bar chart displays the 2020 population of 30 countries, ranked in descending order from the dataset loaded via `d3.csv` from a GitHub-hosted CSV file. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders bars as SVG `<rect>` elements. Custom `AxisBottom` and `AxisLeft` components generate ticks, while a `<title>` element provides tooltips with formatted values like "30M". The React app manages data loading asynchronously with a `useEffect` hook.

Ssathvik0311@gmail.com
93% match