Fork of activity 6_ Q1.1

100%

Fork of activity 6_ Q1.1

✓ Published0🌍 Public

Last edited Apr 13, 2024

Created on Apr 13, 2024

This bar chart displays the populations of 30 countries in 2020, ordered along a vertical band scale. Each bar’s length encodes population via a linear scale, with axis ticks formatted in billions and a labeled horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` from D3 for scales and `csv` to load data from a GitHub-hosted CSV. SVG rendering is handled through React components, with tooltips provided by native `<title>` elements.

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…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav

94% match

Loading thumbnail…

Fork of Activity 6_Question1b

This bar chart displays the population of 20 countries in 2010, ordered along the vertical axis with horizontal bars extending to represent each country’s population. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars rendered as SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, and axis ticks are formatted with `d3.format` to abbreviate large numbers (e.g., converting billions).

Aanusha.chilkamarri26@gmail.com

94% match

Loading thumbnail…

Fork of Activity_6 Q1

A horizontal bar chart displays the populations of 30 countries from a CSV file, with labels on the y-axis and population values on the x-axis formatted in billions. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scaling, `AxisBottom` and `AxisLeft` for axes, and `Marks` to render SVG rectangles with tooltips showing exact values. The data is loaded via `csv` from a gist URL, with population values multiplied by 1000 to represent actual figures.

Bbhavanadupati3@gmail.com

94% match

Loading thumbnail…

Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

Vvidyagangasani@my.unt.edu

94% match

Loading thumbnail…

Fork of Fork of activity 6_ Q1.2

This example displays a horizontal bar chart of population data for 20 countries, with each bar’s length proportional to the 2010 population value. The visualization uses D3’s `scaleBand` and `scaleLinear` for axis scaling, with formatted tick labels. Built with React and rendered as SVG, it loads data from a remote CSV via D3’s `csv` utility. Interactivity is basic, with tooltips showing the population value on hovering over a bar.

Kkowshiksamudrala08@gmail.com

94% match

Loading thumbnail…

Fork of Activity-6 task 1

This bar chart displays the 2020 populations of 30 countries, ordered vertically by country name with horizontal bars representing population values. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, scales population data from a CSV file, and renders SVG marks with custom axis components. Tooltips appear via native SVG `title` elements.

Rrahulnathmukkolla@gmail.com

93% match

Loading thumbnail…

Fork of Fork of Activity 7

This chart displays the populations of twenty countries in 2020 as horizontal bars, sorted by country name along the vertical axis and scaled linearly by population along the horizontal axis. The visualization is rendered as an SVG using React, with D3 v5’s `scaleBand` and `scaleLinear` handling the axis mappings and `format` producing the tick labels. Data is fetched via `d3.csv` from a remote GitHub-hosted CSV file, and each bar includes a tooltip showing its formatted population value.

Ssairamisetti3829@gmail.com

93% match

Loading thumbnail…

Fork of Activity 7

This chart displays the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` to map data to positions, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are loaded from a CSV file and formatted with D3’s `format` function, converting billions to a readable "B" suffix. The chart includes a labeled x-axis and blue tick lines, with a green fill for each bar.

Llikhithakarunakarreddym@gmail.com

93% match