activity 6_Task 1

Bbhavyamoturi2509@gmail.com

activity6_task1

This example shows a horizontal bar chart comparing the populations of 30 countries for the year 2020, using an SVG rendered through React. The visualization loads data from a CSV file using D3’s `csv` function and displays the bars with D3’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are built with custom React components `AxisBottom` and `AxisLeft`, and each bar is a `<rect>` element with a `<title>` tooltip that formats values using `d3.format(".2s")`.

Ssairamisetti3829@gmail.com

activity 6_Task 1

This example shows a horizontal bar chart comparing country populations for 2020, with country names on the y-axis and population values on the x-axis. It loads CSV data dynamically and renders SVG bars using React components. The code builds scales with `d3.scaleBand` and `d3.scaleLinear`, formats tick labels with `d3.format`, and creates custom axis components like `AxisLeft` and `AxisBottom` that generate tick marks and text elements.

activity 6_Task 1

This example shows a horizontal bar chart comparing 2020 populations for up to 30 countries, with each bar labeled by country and sized proportionally to its population. The chart uses an SVG rendering with a green fill for bars and blue tick lines, and hover tooltips formatted with abbreviations like "B" for billions. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote gist URL. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are custom React components that generate tick lines and rectangular marks, while `format('.2s')` handles tick label abbreviation.

Jjtulasi05@gmail.com

Aasheshpinisetti@my.unt.edu

activity 6_Task 1

This example shows a horizontal bar chart of the 2020 populations of 30 countries, with bars sorted by country name. The chart is built using React and D3 v5, with SVG rendering. It uses `d3.csv` to load data from a remote CSV file, `d3.scaleBand` and `d3.scaleLinear` for the axes, and a custom `Marks` component to render the bars. The bars display population values, with a tooltip showing the formatted number, and the y-axis labels list country names.

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name, using SVG rendered via React. The chart loads CSV data from a GitHub gist, multiplies the 2020 value by 1000, and maps it to a linear scale, while countries are positioned with a band scale. Axes are built with custom React components (AxisBottom, AxisLeft), and a marks component renders each bar with a native tooltip. The code uses d3.scaleBand, d3.scaleLinear, and d3.format for tick labels.

SSrihith Reddy Gaddam

Activity6_Task1

This example displays a horizontal bar chart comparing 2020 population figures for 30 countries. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numerical x-axis. Data is loaded asynchronously from a CSV file via d3.csv, and population values are formatted using d3.format with a custom tick formatter that converts gigabytes to billions. The chart includes axes generated through custom React components and interactive tooltips using SVG title elements.

KKhushi Desai

Ssaisnehapalle@my.unt.edu

Activity6_Task 1

This example shows a horizontal bar chart of population data for 30 countries in 2020, with country names on the y-axis and population values on the x-axis. The chart renders as an SVG using React components for the axes and marks, with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format`) to display tick labels in billions. Data is loaded asynchronously from a CSV file via `csv` and `useEffect`, and each bar includes a tooltip showing the formatted population value.

Yyadlapallisaisathvik@gmail.com

Activity6_task1

This example displays a horizontal bar chart comparing the 2020 populations of 30 countries, using D3 v5 and React to render the visualization as an SVG. The code imports `scaleBand`, `scaleLinear`, `format`, and `csv` from D3 to process the remote CSV data and map each country to a proportional green bar. Custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the axes and rectangles, with tooltips showing formatted population values. The chart includes blue tick lines and labels for the “POPULATION-2020” axis.