Skip to main content
SimilarExport ZIP
100%

Fork of Task-7

✓ Published1🌍 Public
JJames Cruz
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from 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.

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

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.

JJames Cruz
94% match
Loading thumbnail…

Fork of Fork of Task-7

This example presents a horizontal bar chart of 2020 population data for the top 30 countries, sourced from a CSV file. Built with React and D3 v5, it renders vector graphics as SVG elements. The visualization uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The bars are drawn as SVG rectangles, and hovering over each bar reveals a tooltip displaying the population value formatted in billions. The chart's title, "POPULATION-2020", is placed below the x-axis.

JJames Cruz
93% match
Loading thumbnail…

Fork of Activity 6_Task 1

This example displays a horizontal bar chart of population totals for 30 countries in 2020, using a bar length to encode each country’s population magnitude. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, and `csv` to load data from a GitHub-hosted CSV file. Rendered as SVG, it includes custom axis components, a formatted tick label using `format('.2s')`, and tooltips via the `<title>` element.

Hharsha13638@gmail.com
92% match
Loading thumbnail…

Fork of Activity06_Task01

This example shows a horizontal bar chart of the populations of 30 countries in 2020. It is rendered as SVG with React, using D3’s scaleBand for the categorical y-axis and scaleLinear for the x-axis. Axis ticks and tick labels are generated by custom components; the bars carry tooltips with formatted population values via a D3 `title` element. Data loads from a remote CSV using D3’s `csv` function.

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

Fork of Activity 6_Task 1

This visualization presents a horizontal bar chart comparing the populations of the top 30 countries in 2020, with each bar labeled by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative axes, while `d3.format` converts raw values into readable SI units. Custom React components for axes and marks render the SVG rects, and data is loaded asynchronously from a CSV file via `d3.csv`.

Kkaringusathwika@gmail.com
91% match
Loading thumbnail…

Fork of JC Task-7 Q1

This example displays a horizontal bar chart of population data for 20 countries in 2020. It uses React with SVG rendering, and D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions to load and transform the data, and to position the bars and axes. The bars are drawn as SVG rectangles, with a native `<title>` element providing a simple tooltip. Data comes from a CSV file hosted on GitHub.

JJames Cruz
91% match
Loading thumbnail…

Fork of Activity 6_Task 1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to bars and population values to bar widths, rendered as SVG `<rect>` elements with a `<title>` tooltip. The data is loaded via `d3.csv` from a GitHub gist, and axes are built custom components using D3’s tick generation.

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

Fork of Fork of Fork of Task 8 Q1-2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name with a tooltip on each bar showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and the SVG renders axes with custom `AxisBottom` and `AxisLeft` components.

Vvchittimadha@gmail.com
91% match