Skip to main content
SimilarExport ZIP
100%

Activity 6 task 1

✓ Published0🌍 Public
Vvenkatabhaskaratetali@my.unt.edu
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Activity6_Task3

This visualization displays the populations of 20 countries in 2010 as a horizontal bar chart. Using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, the React-rendered SVG bars are color-coded green with a tooltip showing the formatted population value. The code loads CSV data via d3.csv, applies a custom tick format that converts gigabytes to billions, and includes axis components for labeled ticks.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6 Task 1.2

This visualization presents a horizontal bar chart of population data for 20 countries, sourced from a CSV file for the year 2010. The bars are rendered as green SVG rectangles, with a blue axis line and the y-axis labels placed to the left. Built with React and D3 v5, the code uses `scaleBand` for the categorical axis and `scaleLinear` for the numeric scale, with a custom tick formatter that abbreviates large numbers.

BBamanGayathri
95% match
Loading thumbnail…

Activity6_Task1

This visualization displays population data for ten countries in the year 2000 using a horizontal bar chart rendered as SVG. The chart ranks countries from top to bottom by population, with green bars sized linearly to population values and formatted axis labels converting large numbers to billions. The React app loads CSV data from a GitHub repository using d3.csv, then applies d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Tooltips on each bar show the exact population value via SVG title elements.

Aamarnadhkari98@gmail.com
94% match
Loading thumbnail…

ACTIVITY6TASK-1

This visualization displays a horizontal bar chart ranking the populations of 20 countries for 2010, using green bars labeled along the left axis with a formatted population scale on the bottom. The React application loads data from a CSV file via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axes, rendered as SVG rectangles. Tooltips, provided through native SVG `<title>` elements, show the exact population in billions using d3.format.

HHanuReddy
94% match
Loading thumbnail…

activity 6_Task 1

This visualization displays the populations of 20 countries in 2010 as a horizontal bar chart, using React and D3 v5 to render the SVG elements. It loads data from a CSV file via a custom `useData` hook with `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The bars are drawn as SVG `<rect>` elements with a native `<title>` tooltip showing formatted population values, and tick marks are generated using `xScale.ticks()` with custom formatting.

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

Activity 6_Task 1

This bar chart displays population data for twenty countries in 2010, using horizontal bars with a green fill. The visualization is built with React and D3 v5, leveraging d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate large numbers. Data is loaded from a remote CSV file via d3.csv, and all marks and axes are rendered as SVG elements.

KKondreddy Saikiran reddy
94% match
Loading thumbnail…

Task1_Activity6

This visualization displays populations of ten countries in the year 2000 as a horizontal bar chart rendered with SVG in React. It uses D3’s scaleBand for the categorical y-axis, scaleLinear for the quantitative x-axis, and format for truncated tick labels (e.g., 'B' for billions). Data is loaded via d3.csv from a GitHub-hosted CSV file, with population values multiplied by 1,000. Tooltips show formatted population values via SVG <title> elements, and axis ticks are styled with blue lines and gray text.

Ssanjanadadi19@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

This visualization displays the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with scales created via d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously from a CSV file using d3.csv, and axis ticks are formatted with d3.format to abbreviate values like billions. Tooltips appear on hover via SVG title elements.

JJayanth Reddy Sripathi
94% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries for the year 2010, sorted by country name along the y-axis. The visualization uses React with D3 v5 scales, rendering an SVG with colored horizontal bars. D3’s `scaleBand` and `scaleLinear` map country names and population values, while the tick format converts values to billions. Data is loaded from a remote CSV via D3’s `csv` method, and interactive tooltips appear on each bar using SVG `<title>` elements.

Bbhargavipagolu2025@gmail.com
94% match