Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
Mmythripopuri2001@gmail.com
Last edited Apr 8, 2024
Created on Apr 8, 2024
Forked from Hello VizHub

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.

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 in the year 2000, using horizontal bars ranked by value. The visualization uses React with D3 v5, rendering as an SVG. The `Marks` component creates rectangles whose width is scaled by population, while the `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data is loaded via the `csv` API from a remote URL, with population computed by multiplying the 2000 column by 1000. The `scaleBand` and `scaleLinear` functions map countries and populations to screen coordinates, and formatted tick labels replace 'G' with 'B' for billions.

Mmaheshchowdaryponnaganti@my.unt.edu
96% match
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
96% match
Loading thumbnail…

activity 6_Task 1.1

A horizontal bar chart displays the population of ten countries in the year 2000, sorted by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Green bars include tooltips, and axes are annotated with a custom formatter that converts SI units like "G" to "B" for billions.

Jjtulasi05@gmail.com
95% 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
95% 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
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 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
95% match
Loading thumbnail…

activity 6_Task 1

This visualization presents a horizontal bar chart comparing the populations of ten countries in 2000, with countries listed along the vertical axis and population values represented by bar widths. The chart uses React with D3 v5, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with population values processed by multiplying the 2000 column by 1,000. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, while each bar in the `Marks` component includes a native `title` tooltip showing the formatted population value.

Aamanipeddolla@my.unt.edu
95% match