Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published0🌍 Public
Kkesava
Last edited Oct 25, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This horizontal bar chart displays the population of 30 countries in 2020, ordered by country name, with green bars and blue axis lines. The visualization loads a CSV file from a GitHub gist using D3's `csv` function, then renders the data as SVG rectangles via React. D3's `scaleBand` and `scaleLinear` position the bars, while custom `AxisBottom` and `AxisLeft` components generate ticks using D3's `ticks` and `domain` methods. Population values are formatted with D3's `format` function using the SI format to abbreviate large numbers.

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

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file via the D3 `csv` function. The visualization uses React to render SVG elements, with D3's `scaleBand` and `scaleLinear` mapping country names and population values to positions. Tooltips reveal exact population figures, and axes include custom tick formatting that abbreviates large numbers. The chart applies a green fill to marks and a blue stroke to axis lines.

Ssanjanadadi19@gmail.com
95% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 30 countries in 2020, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, while React components render the SVG elements. Data is loaded from a CSV file via `d3.csv` and formatted with `d3.format` to abbreviate large numbers, for example converting Gigas to Billions. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

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

Activity 6

A horizontal bar chart displays the population of 30 countries in 2020, ordered by country name on the y-axis. A linear x-scale encodes population values, with formatted tick labels converting scientific notation to billions (e.g., “1.40B”). Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for axes, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Axis ticks are styled with blue lines, and tooltips show the formatted population value on hover.

Aanushapodapati99@gmail.com
94% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name, with each bar’s length representing population in billions. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` marks with tooltips via `<title>`. Data is loaded from a remote CSV using `d3.csv`, and axes are rendered by custom components (`AxisBottom`, `AxisLeft`) with tick formatting via `d3.format`.

Gganesh.hns48@gmail.com
94% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of 30 countries for 2020, with bars colored light green and axes styled with blue tick lines. The visualization uses React with SVG rendering, leveraging D3 v5 utilities including `scaleBand`, `scaleLinear`, `max`, and `format` to map country names and population values. Population data is loaded from a CSV file via `d3.csv`, with axis labels and tick formatting applied through helper components.

Aamshureddy13@gmail.com
94% match
Loading thumbnail…

ACTIVITY_06

This visualization shows the populations of 30 countries in 2020 as a horizontal bar chart, ranked by country name on the y-axis and population magnitude on the x-axis. The code loads CSV data via d3.csv, scales the population values into billions, and renders SVG bars using React components for the axes and marks. It uses d3.scaleBand and d3.scaleLinear for positioning, with tooltips formatted via d3.format. The data source is a raw GitHub-hosted CSV file, and the chart is styled with blue axis lines and green bars.

Rragasrikakarla27@gmail.com
94% match
Loading thumbnail…

Activity 6

This bar chart displays the population figures for 30 countries in 2020, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React to render SVG elements, with D3 v5 functions such as `scaleBand` and `scaleLinear` for scaling, and `csv` for loading data from a GitHub-hosted CSV file. Tooltips reveal precise values formatted using D3's `format` function, and the chart includes custom axis components.

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

Activity 6

This visualization displays the 2020 populations of 30 countries as a horizontal bar chart, using a band scale for country names and a linear scale for population values. The chart shows bars in light green with blue tick marks on the axes, and includes a tooltip formatted with D3's `format` API to abbreviate large numbers (e.g., "1.2B"). Built with React and D3 v5, the code explicitly uses `scaleBand`, `scaleLinear`, and `max`, while a custom `useData` hook fetches CSV data from a GitHub repository. The SVG is rendered via React components (`AxisBottom`, `AxisLeft`, `Marks`).

Pperamranji
94% match