Skip to main content
SimilarExport ZIP
100%

Fork of Activity6_Task1

✓ Published0🌍 Public
IILYAS AHMED
Last edited Apr 6, 2025
Created on Apr 6, 2025
Forked from Activity6_Task1

This bar chart displays the top 20 countries by population in 2010, with countries listed on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for axis scaling. The `Marks.js` component creates the orange bars, while `AxisBottom.js` and `AxisLeft.js` generate the axes. Data is loaded asynchronously from a CSV file using D3's `csv` function, and hover effects show precise population values via SVG `<title>` tooltips.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Task1

This bar chart displays the populations of the top 20 countries in 2010, sorted by country name along the vertical axis. The horizontal bars use a linear scale to represent population values, with tick labels formatted in billions using d3.format. The visualization is built with React and renders SVG elements, pulling data from a remote CSV file via d3.csv. Axes are constructed using custom components that map scales to SVG lines and text, while rectangular marks include native tooltips showing the formatted population value.

IILYAS AHMED
97% 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
95% match
Loading thumbnail…

Fork of Activity6_Task1_Question2

This bar chart displays the population of the top 20 countries in 2020, with countries listed on the vertical axis and population values on the horizontal axis. The visualization uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping data to positions. Each bar’s width reflects the population value, and hovering reveals a tooltip via the SVG `<title>` element. Data is loaded asynchronously from a GitHub-hosted CSV using D3’s `csv` function, formatted with `format('.2s')` to abbreviate large numbers. The chart includes custom axis components for bottom and left ticks.

Hharshabandi3060@gmail.com
94% match
Loading thumbnail…

activity6_Task 1

This bar chart displays the top 20 countries by their 2010 population. The code uses D3 version 5 within a React framework to render SVG elements, with a linear scale for population and a band scale for country names. The `axisBottom` and `axisLeft` components generate the axes, while the `marks` component creates the bars, each with a tooltip showing the formatted population value. Data is loaded from a CSV file via D3's `csv` function.

SSreeKohaliPatel@my.unt.edu
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 Activity 6_Task 1

This interactive bar chart displays the population of the top 10 countries in the year 2000, with each country represented by a horizontal bar. The visualization uses a React framework with D3 v5 to render SVG elements. The code employs `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the CSV data is loaded asynchronously via `csv`. The chart features customizable axis components, a green color fill for bars, and tooltips showing population values formatted in SI notation.

Hhemanthdummy999@gmail.com
93% 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…

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
93% match