Skip to main content
SimilarExport ZIP
100%

Fork of Activity7_Task1_2

✓ Published0🌍 Public
AArungopal Andalam
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Activity7_Task1

This visualization shows the 2010 population of 20 countries as a horizontal bar chart, with the data sorted by country name. The chart uses React components to render SVG elements, including custom `AxisBottom`, `AxisLeft`, and `Marks` components that call D3 scale functions like `scaleBand` and `scaleLinear`. Population values are loaded via `d3.csv` from a remote GitHub URL and formatted with `d3.format` to abbreviate large numbers (e.g., converting gigabytes to billions). The bars include a native SVG tooltip showing the formatted population value.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Task1

This is a horizontal bar chart of population data for ten countries in the year 2000, rendered as SVG via React. The visualization uses React hooks (useState, useEffect) and D3 v5 scales including d3.scaleBand and d3.scaleLinear, with components for axes and marks. Data is loaded as CSV from a GitHub URL using d3.csv, with each bar’s width mapped to population via d3.max and tooltips formatted using d3.format. Axes are custom-built with React components, and the chart includes a labeled x-axis showing population in billions.

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

Fork of activity6_Task1q2

This interactive bar chart displays the population of 20 countries in 2010, with each country listed on the vertical axis and its population shown as a horizontal bar length. The visualization is built using React and D3 version 5, leveraging `scaleBand`, `scaleLinear`, and the `csv` loader to fetch data from a GitHub URL. SVG rectangles represent the bars, with tooltips formatted using D3's `format` function to abbreviate large numbers (e.g., '1.2B'). Axis components are custom React elements, and the chart is rendered entirely as SVG within a React component.

Ssudheervnarasimha1@gmail.com
93% match
Loading thumbnail…

Fork of Activity6_Task1

This visualization displays the populations of 30 countries in 2020 as a horizontal bar chart, with the x-axis labeled “POPULATION-2020.” Built with React and D3 v5, it uses `scaleBand` for the categorical Country axis and `scaleLinear` for the Population axis, with `csv` loading data from a GitHub-hosted dataset. SVG rectangles are rendered from the `Marks` component, with axes drawn by `AxisBottom` and `AxisLeft`, and a `format('.2s')` tick formatter converting numbers to abbreviated labels.

Kkartheekgrpt@gmail.com
93% match
Loading thumbnail…

Fork of Activity6_Task1

This horizontal bar chart displays the top 20 countries by 2010 population, with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning and `csv` to load data from a GitHub-hosted CSV file. SVG rectangles represent each country, with tooltips showing formatted population values via D3’s `format` function. Axes are custom-rendered components, and the data is processed by converting the 2010 values from thousands to raw numbers before slicing the dataset.

PPothuguntla Pranitha
93% match
Loading thumbnail…

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This visualization displays the population of 20 countries in 2010 using horizontal bars, with countries listed along the vertical axis and population values on the horizontal axis. The chart renders as an SVG using React components, with D3 scaleBand and scaleLinear functions managing the layout. Data loads from a CSV file via d3.csv, and the x-axis uses d3’s format function to abbreviate large numbers (e.g., converting billions to “B”). Bar marks include tooltips showing the precise formatted population value, while axis ticks and labels are generated using custom React components.

HHema Tummapala
93% match
Loading thumbnail…

Fork of Activity6_Task1

This visualization displays the populations of 20 countries in 2010 as horizontal bars sorted along a categorical y-axis. Built with React and D3.v5, it uses `scaleBand` and `scaleLinear` to map countries and population values, rendering SVG rectangles with tooltips. Axis components generate custom ticks, with bottom tick labels formatted using `d3.format` to abbreviate large numbers (e.g., “1.2B”). Data is loaded asynchronously from a CSV file using D3’s `csv` function.

IILYAS AHMED
93% match
Loading thumbnail…

Fork of Task1_activity7

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, sorted by country name. The visualization uses React to render SVG elements, with D3 v5 scales (d3.scaleBand and d3.scaleLinear) positioning the bars and axes. Data is loaded via d3.csv from a GitHub-hosted CSV file, and popup tooltips appear on hover using SVG `<title>` elements. The chart applies D3’s d3.format with the '.2s' SI prefix to abbreviate population values, such as converting billions to "B" labels.

Kkaushikreddy901@gmail.com
92% match
Loading thumbnail…

Fork of Task1_activity7

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, sorted by country name. The visualization uses React to render SVG elements, with D3 v5 scales (d3.scaleBand and d3.scaleLinear) positioning the bars and axes. Data is loaded via d3.csv from a GitHub-hosted CSV file, and popup tooltips appear on hover using SVG `<title>` elements. The chart applies D3’s d3.format with the '.2s' SI prefix to abbreviate population values, such as converting billions to "B" labels.

Kkaushikreddy901@gmail.com
92% match