Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Task-7

✓ Published1🌍 Public
JJames Cruz
Last edited Apr 15, 2024
Created on Apr 15, 2024

A horizontal bar chart displays the populations of 30 countries for 2020, sorted by country name. The visualization uses D3 v5 scales and SVG rendering within a React application, with `d3.csv` loading the dataset from a GitHub repository. Population values are transformed from the raw data, and d3's `format` function converts large numbers into abbreviated labels like “B” for billions.

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 Task-7

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020, sourced from a CSV file. Built with React and rendered as SVG, it uses D3 v5 APIs like `scaleBand`, `scaleLinear`, and `format` to map data to coordinates and create tick labels. The visualization includes a bottom axis with formatted values and a left axis with country names, with styled tick marks and bars defined in the accompanying HTML.

JJames Cruz
94% match
Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

Ppraneeth.d555@gmail.com
92% match
Loading thumbnail…

Fork of Fork of Activity_6_Task_1_Question_1_2

This horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. Rendered as an SVG using React, the visualization loads data from a GitHub-hosted CSV file via the D3 `csv` function. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, with axes and rectangular marks built from custom React components. Population values are formatted with D3’s `format` function to abbreviate large numbers, and tooltips on each bar show the precise formatted value.

LLarry Johnson
92% match
Loading thumbnail…

Fork of Fork of Activity8_Task1_DV

This horizontal bar chart displays the 2020 population for 30 countries, sourced from a CSV file loaded with `d3.csv`. Built with React and D3 v5, it renders as an SVG. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the x-axis, and `d3.format` to abbreviate large numbers to billions. A `<title>` element provides tooltips.

Llikithabaddam@my.unt.edu
91% match
Loading thumbnail…

Fork of Task 1

This chart displays the 2020 population of 30 countries as horizontal bars, scaled linearly by population and sorted by country name. The visualization uses React components with D3 scales (d3.scaleBand, d3.scaleLinear) to position and size SVG rectangles, while D3’s format function converts large numbers to billions (e.g., “B” suffix). Axes are custom React components drawing ticks and labels, with blue tick lines and light green bars. Population data is loaded as CSV from GitHub, processed in useData hook, and supports hover tooltips via SVG title elements.

AAbhinay Peeta
91% match
Loading thumbnail…

Fork of Task8-task1

This bar chart displays the population of countries in 2020, ranked by country name. The visualization renders horizontal bars using React and SVG, with D3 v5's `scaleBand` and `scaleLinear` mapping country names and population values to screen coordinates. The chart includes custom axis components (`AxisBottom`, `AxisLeft`) and bars (`Marks`) that display tooltips on hover. Data is loaded from a CSV via D3's `csv` function, and the population values are multiplied by 1000 for display. The chart is styled with Poppins typography and uses a green color for the bars.

Sshraehithareddy@gmail.com
91% match
Loading thumbnail…

Fork of Activity 6_Task1

This bar chart displays the population of 30 countries in 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React with D3 scales—`scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis—to render SVG rectangles. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and the code includes custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate axis ticks and bars. The x-axis labels are formatted with `d3.format` to abbreviate large numbers (e.g., converting millions to billions with an "B" suffix).

EElena Momtcheva
91% match
Loading thumbnail…

Fork of Fork of Task 8_Task 1.2

This bar chart displays the population of 20 countries in 2010, sourced from a CSV loaded via the `d3.csv` API. The React application uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Horizontal bar marks are rendered as SVG `<rect>` elements, with `d3.format` applied to axis tick labels, showing values in billions. The code demonstrates local ES6 module imports and component composition.

Jjaswanthichowdarykalapala@my.unt.edu
90% match