Skip to main content
SimilarExport ZIP
100%

Activity 6 Task 1.1

✓ Published0🌍 Public
BBamanGayathri
Last edited Oct 18, 2024
Created on Oct 18, 2024
Forked from Hello VizHub

This bar chart displays the population of ten countries in the year 2000, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React with D3 v5 APIs including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` for fetching data from a GitHub repository. SVG rectangles render the marks, with axis ticks and labels styled through CSS. The chart sorts and slices the loaded dataset to show the top ten most populous countries.

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

Activity 6 task1

This bar chart visualizes the population of the top 10 countries in the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for the axes. Each bar is a `rect` element with a title tag for tooltips, and the y-axis labels show country names while the x-axis uses a custom tick format to convert values to billions.

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

Activity6_task1.1

This bar chart displays the population of ten countries for the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. Built with React and D3 v5, it employs `d3.scaleBand` and `d3.scaleLinear` to map data, and renders SVG rectangles via the custom `Marks` component. The chart is populated from a CSV file loaded asynchronously using `d3.csv`, with axes drawn by `AxisBottom` and `AxisLeft`.

Yyadlapallisaisathvik@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
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
94% 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
94% match
Loading thumbnail…

Activity 6_Task 1

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.

Gguruabhay294@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

This bar chart shows the population of ten countries in the year 2000, ranked and scaled by count. Built with React and D3 v5, it uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code imports D3 functions like `csv`, `scaleBand`, `scaleLinear`, `max`, and `format` to load and process data from a GitHub-hosted CSV. Custom axis and mark components render rectangles with tooltips, and the x-axis labels are formatted using SI prefixes, converting 'G' to 'B' for billions. The chart includes styled ticks, a light green fill for bars, and a Poppins font.

AAreeba Hassan
94% match