Activity6_Task1

activity 6_Task 1

This visualization shows the population of ten countries in the year 2000 as a horizontal bar chart, with countries listed on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the scaling, while the AxisBottom and AxisLeft components generate the tick marks and labels. Data is loaded from a remote CSV file via d3.csv, and population values are formatted using d3.format with the '.2s' notation, displaying values in billions.

SSatish Nallamadugu

Mmaheshchowdaryponnaganti@my.unt.edu

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ranked by value. The visualization uses React with D3 v5, rendering as an SVG. The `Marks` component creates rectangles whose width is scaled by population, while the `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data is loaded via the `csv` API from a remote URL, with population computed by multiplying the 2000 column by 1000. The `scaleBand` and `scaleLinear` functions map countries and populations to screen coordinates, and formatted tick labels replace 'G' with 'B' for billions.

activity 6_Task_1

This visualization displays the populations of ten countries in the year 2000 using a horizontal bar chart, sourced from a CSV file. Built with React and D3 v5, it renders chart elements as SVG components, including bottom and left axes. The code employs D3's `scaleBand` and `scaleLinear` to map data to positions, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) structure the visualization. Population values are formatted using D3's `format` API, converting large numbers into abbreviations like “1.2B”.

Ppaulphillips@my.unt.edu

Aamarnadhkari98@gmail.com

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.

Vvishu.valandas@gmail.com

Activity 6_task1

This bar chart displays the population of ten countries in the year 2000. The visualization uses React with D3 v5 to load CSV data from a GitHub repository, scale the bars using `scaleBand` and `scaleLinear`, and render the chart as SVG. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw axes and rectangles, with tooltips formatted using D3's `format`. The chart includes a labeled x-axis and uses a Poppins font.

Ssairamisetti3829@gmail.com

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, with horizontal bars ordered by country name and encoded by population value. Rendered as an SVG via React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, while `AxisBottom` and `AxisLeft` components generate tick marks and labels. The data is loaded from a CSV file using D3’s `csv` function, and each bar includes a tooltip showing the formatted population value.

Yyadlapallisaisathvik@gmail.com

Activity6_task1.1

This bar chart displays the population of ten countries for 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 employs `d3.scaleBand` and `d3.scaleLinear` to map data, and renders SVG rectangles via the custom `Marks` component. The chart is populated from a CSV file loaded asynchronously using `d3.csv`, with axes drawn by `AxisBottom` and `AxisLeft`.

Aadityatrip9899@gmail.com

Activity-6 Task_1

This visualization presents a horizontal bar chart depicting the population of ten countries in the year 2000. The chart uses a green fill for the bars, with blue axis lines and gray tick labels. The data is loaded from a remote CSV file using d3.csv and parsed with a custom row function that multiplies the population value by 1000. The chart is rendered using React, with D3 v5 scales (`scaleLinear` and `scaleBand`) mapping the data to SVG rectangles, and the axes are drawn with `d3.axisBottom` and `d3.axisLeft` calls on a `<g>` element.