Activity 6 Question 1

Activity 6 Question 1.1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. The visualization is built with React and D3 v5, where `d3.scaleBand` positions the categorical y-axis and `d3.scaleLinear` maps population values to bar widths. Data is loaded as a CSV via `d3.csv` from a GitHub repository, and SVG rectangles render the marks, with hover tooltips showing formatted population values using `d3.format`. Axis ticks and labels are generated by custom React components.

SSai Gottumukkala

Nnikhilapogula@my.unt.edu

Activity 6 Question 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. The visualization uses D3 v5 scales (scaleBand and scaleLinear) within a React component, rendering to SVG. Data is loaded from a CSV file via D3’s csv function, with the population values formatted using a custom tick formatter that converts large numbers to abbreviated forms like "B" for billions.

Gganeshseeram5decem@gmail.com

Activity6Question1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. Built with React and D3 v5, it loads CSV data from a GitHub repository and renders SVG rectangles. The code imports specific D3 functions like `scaleBand`, `scaleLinear`, `max`, and `format` (with a custom tick formatter that replaces 'G' with 'B' for billions). Axes and marks are implemented as separate React components, and tooltips show population values via SVG `<title>` elements.

Aanisha.peddireddy@gmail.com

Activity 6 Question 1.1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000, using a React-based SVG rendering with D3.js v5. The chart displays population values along the x-axis with formatted tick labels (using `d3.format`) and country names on the y-axis using `scaleBand`. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values multiplied by 1000 for display. The visualization includes axis components, light green bars, and tooltips showing formatted values via SVG `<title>` elements.

Activity 6 Question 1

This bar chart displays the population of ten countries in the year 2000, sorted by country name along the vertical axis. The visualization uses React with D3 v5 to render an SVG, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are loaded from a remote CSV file and formatted using D3’s `format` function, converting large numbers to abbreviated labels. The bars are colored solid blue, with axis ticks rendered in a contrasting red.

BBharath Vupputuri

Ttallapanenisahithi@gmail.com

Activity6-question 1.1

This bar chart displays the population in the year 2000 for ten countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5 functions like `scaleBand` and `scaleLinear` for the scales and `format` for tick labels. Data is loaded from a CSV file via D3's `csv` function. The chart includes blue tick lines, green bars, and a title, with tooltips showing formatted population values.

Activity 6 Question 1.1

This visualization displays the populations of ten countries in the year 2000 using a horizontal bar chart. The bars are drawn as SVG rectangles, with each country’s name shown on the y-axis and population values on the x-axis, formatted in billions. The code uses React to manage components, while D3 v5’s `scaleBand` and `scaleLinear` handle the axes and data scaling. The dataset is loaded via the `csv` function from a GitHub-hosted CSV file. Hovering over a bar reveals its exact population through a native SVG `<title>` tooltip.

Ssagipavan2385@gmail.com

Activity 6_Question-1

A horizontal bar chart displays the population of ten countries in the year 2000, with bars extending from left to right. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` functions mapping country names and population values to the chart's axes. The `csv` function loads the dataset from a remote GitHub Gist, and the axis components are custom React components that call D3's tick generation methods. Population values are formatted using `format('.2s')` and converted from thousands to billions for the axis labels.

Rrajkodavati7@gmail.com