Skip to main content
SimilarExport ZIP
100%

Activity 8 - Q1.2

✓ Published0🌍 Public
SSamir Tarda
Last edited Apr 9, 2024
Created on Apr 9, 2024
Forked from Hello VizHub

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The visualization uses React with SVG rendering and D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded asynchronously via D3's `csv` parser from a GitHub-hosted CSV file. Custom React components render the axes and rectangular marks, with formatted tick labels converting billions using D3's `format` function.

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 Q1.2

This example displays a horizontal bar chart comparing the populations of 20 countries in 2010, with the countries sorted along the y-axis and population values along the x-axis. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded as CSV via D3’s `csv` function from a remote gist.

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

Activity-6-q1.2

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles, with React managing the component structure. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and population values are formatted with `d3.format` to abbreviate large numbers (e.g., “1.2B”). Blue axis lines and green bars are styled with CSS.

Bbhargavr016@gmail.com
94% match
Loading thumbnail…

Activity6_Q1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses React with D3 v5 scales, including d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Data is loaded via d3.csv from a GitHub repository and rendered as SVG rectangles with native tooltips showing formatted population values. Custom React components handle axis rendering with tick formatting that converts Giga units to Billions.

VVidya Lakshmi Chitturi
94% match
Loading thumbnail…

Activity 8 - Q1

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, using a bar length to encode each value. The chart is built with React and renders SVG elements, using D3 v5’s `scaleBand` and `scaleLinear` for positioning and scaling. Data is loaded asynchronously from a GitHub-hosted CSV file via D3’s `csv` parser. The code also demonstrates custom axis components and a tooltip that appears on hover through an SVG `<title>` element.

SSamir Tarda
94% match
Loading thumbnail…

Activity-6_Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The bars are rendered as SVG rectangles using React components, with D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` to abbreviate large numbers (e.g., "1.2B"), and each bar includes a tooltip showing the exact value.

Tthoutunikhitha@gmail.com
94% match
Loading thumbnail…

Activity 8_Q1.A2

A horizontal bar chart displays population figures for twenty countries in 2010, using green rectangles to represent values on a linear scale. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV via `d3.csv`, and axes and marks are rendered as SVG components with formatted tick labels converting gigabytes to billions.

SSeema Shrestha
93% match
Loading thumbnail…

Activity 8_Q1.1

This bar chart displays the population of ten countries in the year 2000, with horizontal bars sorted by country name. The visualization uses React to render SVG elements, while D3 v5 handles data loading via `csv()` and scales through `scaleBand` and `scaleLinear`. Custom React components define the axes and marks, with data sourced from a GitHub-hosted CSV file.

UUthkarsh Reddy Junuthula
93% match
Loading thumbnail…

Activity-8 Q1.2

This example presents a horizontal bar chart showing the populations of 20 countries for the year 2010, using data from a remote CSV file. The visualization uses D3 v5 within a React framework, rendering a scalable vector graphic (SVG) with green bars. It employs D3’s `scaleBand` for the categorical country axis and `scaleLinear` for the population scale, while the `AxisBottom` and `AxisLeft` modules generate tick marks. The code also demonstrates custom formatting, converting values to billions with the `format` function, and uses React's `useData` hook to load and process the data.

SSree Yuktha Sunkara
93% match