Activity 6_Tutorial Task 1_Harini

100%

Activity 6_Tutorial Task 1_Harini

✓ Published1🌍 Public

Last edited Apr 1, 2024

Created on Apr 1, 2024

This horizontal bar chart displays the populations of 30 countries in 2020, ranked with the largest population at the top. The visualization pairs React with D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values from the CSV source are formatted in billions using D3's `format('.2s')`. The SVG marks are simple rectangles, with blue axis ticks and lines styled through CSS, and x-axis labels translated from gigabytes notation to billions.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_tutorial1

This bar chart displays the 2020 population of 30 countries, sorted alphabetically, using horizontal bars encoded by population size. It is built with React and D3 v5, using `scaleLinear` and `scaleBand` to map population values to bar widths and countries to row positions. Axes, tick labels, and rectangles are rendered as SVG elements, with a native SVG `<title>` element providing tooltips. Population data is loaded from a CSV file hosted on GitHub, with values formatted using D3's `format` function.

HHarshithakodakandla@my.unt.edu

91% match

Loading thumbnail…

Activity_6 task 1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom React components render the axes and marks as SVG rectangles. Population data comes from an external CSV file, formatted using D3’s `format` function to display values in billions. Hovering over any bar reveals its exact value through a native SVG `<title>` tooltip.

HHarinathChakali33@gmail.com

90% match

Loading thumbnail…

Activity 6_Question 1.1_Harini

A horizontal bar chart displays the populations of ten countries in the year 2000, sourced from a CSV file via d3.csv. The chart uses React with D3 v5 scales, rendering SVG rectangles for each bar. A linear scale maps population values to bar widths, while a band scale positions countries along the y-axis. Axis components generate the tick marks and labels, and hover tooltips show formatted population values.

Kkamarthyharini24@gmail.com

90% match

Loading thumbnail…

Activity 6_Question 1.2_Harini

This bar chart displays the populations of twenty countries in 2010, sorted along a horizontal axis with country names on the vertical axis. It uses D3 v5 scales (`scaleBand`, `scaleLinear`) and React components to render SVG rectangles, with axis labels and ticks styled in red and teal. Data is loaded via `d3.csv` from a GitHub URL, and tick values are formatted using `d3.format` with the suffix 'B' for billions.

Kkamarthyharini24@gmail.com

90% match

Loading thumbnail…

Activity6_Task 1

This bar chart displays the top 30 countries by population in 2020, using horizontal bars sorted by country name. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis) managing coordinate mapping. Population values are loaded from a CSV file and formatted with a custom tooltip using D3's format function. The chart includes styled axes, hover effects, and a maximum domain slightly exceeding the largest population value.

Hharinihari6791@gmail.com

90% match

Loading thumbnail…

Activity_6_Tutorial 1

This example displays a horizontal bar chart of the top 30 countries by 2020 population, with each bar labeled by country name and colored light green. The visualization uses React with D3 v5, leveraging `d3.csv` to load data from a GitHub-hosted CSV, `scaleBand` and `scaleLinear` for positioning, and native SVG elements for rendering. Custom axis components format tick labels using D3's `format` helper, converting values to abbreviated “B” units, while tooltips show the formatted population on hover.

HHarsha vardhan reddy Yarmareddy

89% match

Loading thumbnail…

Activity 6 Tutorial 1

This horizontal bar chart displays the population of 30 countries for the year 2020, with country names labeled along the y-axis and population values represented by bar lengths along the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map the data, and renders SVG rectangles through custom `Marks`, `AxisBottom`, and `AxisLeft` components. Population values are formatted with D3’s `format` function, and the data is loaded asynchronously from a CSV file using `d3.csv`.

BBharath Vupputuri

89% match

Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, loaded from a remote CSV via `d3.csv`. The visualization uses React components to render an SVG, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Axis labels and tick marks are generated with custom `AxisBottom` and `AxisLeft` components, and each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Aaravapalliharika2002@gmail.com

89% match