Activity6_Q1.1

Activity6_Q1.1

A horizontal bar chart displays the population of ten countries in the year 2000, with bars extending from left to right and ordered by country name. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file using D3's `csv` function. Each bar includes a native SVG `<title>` tooltip showing the formatted population value, and the x-axis tick labels convert SI units from 'G' to 'B' using D3's `format`.

JJhansi Balla

Activity6_Q1.1

A horizontal bar chart displays the populations of ten countries in the year 2000. The visualization uses React to render an SVG, with D3 v5 providing the scaleBand and scaleLinear functions for positioning bars and axes. Data is loaded asynchronously from a CSV file via d3.csv. Custom React components define the axes and marks, with hover tooltips showing formatted population values.

SShiva Sai Reddy

Aamulyareddykondru01@gmail.com

Activity6_question-1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and custom React components for the axes and marks. Data is loaded from a remote CSV file via `d3.csv`. Bars are colored green, and hovering over a bar displays its population value using a native SVG `<title>` tooltip, with tick labels formatted in billions using `d3.format`.

Activity 6 task 1

This example displays a horizontal bar chart ranking the populations of ten countries for the year 2000. The visualization uses React to render SVG elements, with D3 v5 APIs including `scaleBand`, `scaleLinear`, `csv`, and `format` to load data, position bars, and format tick labels. Country names align on the left axis while population values appear on the bottom axis, and each bar includes a native SVG tooltip showing the formatted population value.

BBhavana Sharma

Vvishnutejareddyambati@my.unt.edu

Activity6 Q1.1

This example shows a horizontal bar chart of population data for ten countries from the year 2000, sourced from a CSV file. The chart uses the React framework to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. It employs `AxisBottom` and `AxisLeft` components to draw the axes, while the `Marks` component generates the bars. Hovering over a bar displays the population value via a tooltip, formatted using D3’s `format` function.

Ggouthamigongidi2457@gmail.com

activity 6_Q1.2

This example displays a horizontal bar chart ranking the populations of 20 countries in 2010, using a linear scale for population values and a band scale for country names. The visualization is built with React and D3 v5, leveraging `scaleBand`, `scaleLinear`, `max`, and `format` for axes and tick labels. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles with tooltips showing formatted population values.

Activity-6 Q1.1

This example shows a horizontal bar chart of population data for the year 2000 in ten countries, with the bars scaled linearly by population and labeled on a band scale for country names. The visualization is built with React and D3 v5, using `scaleBand`, `scaleLinear`, `max`, and `format` for axes and tick labels. It renders as an SVG, loads data from a CSV file via `d3.csv`, and includes tooltips on each bar showing the formatted population value.

KKavyaEti

Activity 6 Q 1.1

This example displays a horizontal bar chart ranking the population of ten countries for the year 2000, using data loaded from a CSV file via `d3.csv`. The React application builds an SVG visualization with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, formatting tick labels with `d3.format` to abbreviate large numbers. Bars are rendered as SVG rectangles with native `<title>` tooltips, while custom axis components handle the bottom and left tick generation.

RRukmini Devi Y