Skip to main content
SimilarExport ZIP
100%

Activity6_task1

✓ Published0🌍 Public
Ggsdontineni518@gmail.com
Last edited Oct 23, 2024
Created on Oct 23, 2024
Forked from Hello VizHub

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name along the y-axis. Each bar’s length encodes population value, with a formatted tick label converting SI units (e.g., "B" for billions) for readability. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, then sliced to the first 20 rows.

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 horizontal bar chart displays the population of 20 countries in 2010, ordered by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to map the data from a remote CSV file, while `d3.format` converts tick labels to abbreviated "B" for billions. The SVG rendering includes custom axis components and rectangle marks with tooltips showing each value, styled with green fills and blue tick lines.

Jjaswanthreddy2715@gmail.com
95% match
Loading thumbnail…

Activity6_Task1-2

This example shows a horizontal bar chart of population data for 20 countries in 2010, sorted by country name along the y-axis with population values on the x-axis. The visualization uses React components to render SVG elements, with D3 v5 scales (`scaleBand` and `scaleLinear`) and formatting utilities. The data is loaded via D3’s `csv` function from a remote gist, and each bar includes a native SVG `<title>` tooltip that displays the formatted population value. The axes are custom components that generate tick marks and labels, with formatting that converts large numbers to abbreviated units like “B” for billions.

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

Activity_6(11754343)_Task_1

This bar chart displays the population of 20 countries in 2010, sorted along a vertical band scale with horizontal bars proportional to population values. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map country names and population counts to SVG rectangles. Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, with axis ticks and labels rendered by custom React components. Hovering over a bar reveals its exact population via the SVG `title` element.

HHari Prasanth Penugonda
95% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the population of 20 countries in 2010, sorted by country name on the vertical axis with population values extending horizontally. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rendering. The chart loads CSV data from a GitHub repository using D3’s `csv` function, and includes formatted tick labels that abbreviate large numbers (e.g., converting "G" to "B" for billions) along with tooltips on each bar. The code demonstrates modular components for axes and marks, with styling applied through CSS classes.

Rrahman.mehmood2002@gmail.com
94% match
Loading thumbnail…

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Mmeenam1106@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the population of 20 countries for 2010, sourced from a CSV file, with bars sorted by country name. The chart uses D3's `scaleBand` and `scaleLinear` to map data to SVG coordinates, rendered as `rect` elements within a React component. Axes are drawn with custom components, and tick labels are formatted using D3's `format` function to abbreviate large numbers.

HHari Kiran
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
94% match
Loading thumbnail…

Activity6_task1

A horizontal bar chart displays the population of 20 countries from the year 2010, sorted by country name on the y-axis and population on the x-axis. Each bar includes a tooltip showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, with SVG `rect` elements for marks. Data is loaded via `d3.csv` from a remote GitHub gist, with population values converted to numbers and formatted using `d3.format`.

Mmasters200128@gmail.com
94% match