Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published0🌍 Public
Gguruabhay294@gmail.com
Last edited Oct 22, 2024
Created on Oct 21, 2024
Forked from Hello VizHub

This horizontal bar chart displays the population of ten countries for the year 2000, with bars arranged in descending order from top to bottom. It uses React with SVG rendering and D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Each bar includes a `<title>` element for tooltip support, and axes are created with D3’s `format` function to abbreviate large numbers. The data is loaded remotely as a CSV file using the `csv` function from D3.

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

A horizontal bar chart displays the populations of ten countries in the year 2000, with country names on the y-axis and population values on the x-axis. The chart uses React components to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for scales and `format` for tick labels. Data is loaded asynchronously from a remote CSV file via `d3.csv`, with each rectangle including a native SVG `<title>` element for tooltip display.

Hhemanthmaddila13@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the population of ten countries in the year 2000, with country names on the y-axis and population formatted in billions on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded as CSV from a GitHub repository using D3's `csv` method, with axis labels and tick formatting handled by custom `AxisBottom` and `AxisLeft` components.

Mmythripopuri2001@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays population data for ten countries in the year 2000. Bars are rendered as SVG rectangles using React components, with scales from d3.scaleBand and d3.scaleLinear positioning and sizing each mark. Axis components generate tick marks and labels, while a tooltip format function converts large numbers into abbreviated strings using d3.format. Data is loaded asynchronously via d3.csv from a GitHub gist.

Vvidiyalasahithi1999@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of ten countries in the year 2000, sourced from a CSV file. It uses a React with D3 v5 approach, rendering SVG via `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Green bars encode values formatted with D3's `format` function, converting abbreviations like 'G' to 'B'. Native SVG `<title>` elements provide tooltips with the formatted population values, while axes are generated from `xScale.ticks()` and the domain.

LLokesh Madem
95% match
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the population of ten countries for the year 2000, with country names on the y-axis and population values on the x-axis. The visualization is built with React, D3 v5, and SVG, using `scaleBand` and `scaleLinear` for positioning. Data is loaded from a remote CSV file, and axis tick labels are formatted using D3’s `format` function to abbreviate large numbers with "B" for billions.

LLakshmiPrasannaValdas@my.unt.edu
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of ten countries in the year 2000, using a d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. The React components render SVG rectangles via the reusable Marks, AxisBottom, and AxisLeft modules, with axis ticks styled through CSS. Data is loaded as CSV using d3.csv, formatted with d3.format, and tooltips are provided by SVG title elements.

Sshanmukhivasa@my.unt.edu
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 10 countries in the year 2000, ordered along a vertical band scale with horizontal bars extending from a shared origin. The visualization uses React with d3-scale’s `scaleBand` and `scaleLinear` to map country names and population values, while custom React components render SVG axes and marks. Population values are loaded from a CSV file, scaled using d3-format’s `format('.2s')` to abbreviate tick labels (e.g., ’B’ for billions), and exposed via native SVG `<title>` tooltips. Styling applies blue tick lines, light green bars, and a Poppins font.

Ggsdontineni518@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. Built with React and D3 v5, it renders as an SVG and loads CSV data from a GitHub repository. The visualization uses `scaleBand` and `scaleLinear` for positioning, with axes generated by custom React components and D3’s `format` for abbreviated tick labels.

Cchinnivikramnunna@gmail.com
94% match