Skip to main content
SimilarExport ZIP
100%

acitivity6_task1(2)

✓ Published0🌍 Public
Gguruabhay294@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This interactive bar chart displays the 2010 population data for 20 countries, ranked from highest to lowest. Built with React and D3 v5, it renders SVG rectangles whose lengths are scaled linearly by population. The chart uses D3's `scaleBand` for categorical country labels, `scaleLinear` for quantitative values, and a custom number formatter that abbreviates large figures with 'B' for billions. Data loads remotely as CSV through D3's `csv` function, with tooltips showing formatted population values.

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…

Activity6_Task1

This bar chart displays the 2010 population estimates for 20 countries, ranked vertically by country name. Data is loaded from a remote CSV file and rendered as SVG rectangles using React. The visualization uses D3 v6 scales (`scaleBand` and `scaleLinear`) along with custom `AxisBottom` and `AxisLeft` React components. Axes are formatted with D3's `format` function to abbreviate large population values, and tooltips show the same formatted values on hover.

Kkandooriabhiram@gmail.com
92% match
Loading thumbnail…

Acitvity6_1.2

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name, using React to render SVG elements and D3 v5 for scales and formatting. The visualization reads population data from a GitHub-hosted CSV file, applies a linear scale for bar lengths and a band scale for country categories, and formats axis tick labels in abbreviated units (e.g., “1.2B”) via D3’s `format` function.

Rrishikareddy181@gmail.com
92% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 20 countries in 2010, ordered by country name. Built with React and rendered as an SVG, it uses D3 v5 scales and axes: a linear scale for population and a band scale for countries. The chart applies custom tick formatting, converting values like '1.2G' to '1.2B', and includes tooltips on each bar. Data loads from a remote CSV via D3's `csv` function.

CChaitanya Ratan Sree
92% match
Loading thumbnail…

activity 6_Task 1

This interactive bar chart visualizes the 2010 population data for 20 countries, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v5, it uses an SVG canvas and relies on `scaleBand` for the categorical axis and `scaleLinear` for the population values. The data is fetched from a remote CSV file using `d3.csv`, and tooltips are provided via SVG `<title>` elements. The visualization demonstrates a clean, annotated layout with custom tick formatting for readability.

Mmeghna.reddy700@gmail.com
91% match
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the 2020 population estimates for thirty countries, using horizontal bars ordered by country name. The visualization relies on D3 version 5's `scaleBand` and `scaleLinear` to map categorical and quantitative data, with React components rendering SVG rectangles. Data is loaded from a remote CSV via D3's `csv` function, and population values are formatted using D3's `format` with SI prefixes, converting values from raw numbers to billions.

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

activity 6_Task 1

This bar chart shows the population of countries in 2010, with horizontal bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, rendering as an SVG with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded as CSV from GitHub, with the population values converted from the '2010' column and multiplied by 1000. The chart includes axis labels, tick marks, and tooltips displaying formatted population values.

Bbobbymeyermsis@gmail.com
91% match
Loading thumbnail…

activity 6_Task 1

This interactive bar chart visualizes the 2020 population rankings of 30 countries, using a horizontal layout for easy comparison. The chart is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` handle the axis mappings and the SVG rectangles are generated from the CSV data. The bottom axis uses a `.2s` format to abbreviate large numbers, converting 'G' to 'B' for readability, while the left axis lists country names. Tooltips on each bar provide the precise population value, and the interface is styled with a green fill and blue axis ticks.

Bbhargavireddy4016@gmail.com
91% match
Loading thumbnail…

activity 6_Task 1.2

This bar chart visualizes the top 20 countries by population for the year 2010, using a horizontal layout with countries on the y-axis and population on the x-axis. It uses React with D3 v5 scales (scaleBand, scaleLinear) to position SVG rectangles, with axis components rendering ticks and labels. Data loads from a CSV via d3.csv, and tooltips display formatted population values using d3.format.

Ssanjanaadapa7@gmail.com
91% match