activity 6q1.2

Kkeerthana11.mcs@gmail.com

Activity 6_Q1.2

This bar chart displays the population of 20 countries in 2010, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population data is loaded via `d3.csv` from a GitHub-hosted CSV and rendered as SVG rectangles. Axis components and marks are built as separate ES6 modules, with tick labels formatted using `d3.format`.

Sswapnadabburi@my.unt.edu

Activity-6-q1.2

This bar chart displays the populations of 20 countries in 2010, ranked along a vertical categorical axis with horizontal bars. The visualization uses D3 version 5 within a React framework, rendering to SVG via React components. Data is loaded from a remote CSV using d3.csv, with population values scaled by 1000. Axes are generated using d3.scaleBand and d3.scaleLinear, while d3.format applies SI-prefix tick labels that convert billions to B. Each bar includes a native SVG title tooltip showing the formatted population value.

Ssriyaalugupalli@my.unt.edu

Activity6-Q1.2

This bar chart displays the population of the top 20 countries in 2010, ranked by country name on the vertical axis and population count on the horizontal axis. Built with D3 v5 within a React framework, it renders as an SVG. The chart uses D3's `scaleBand` and `scaleLinear` for axes, utilizes `csv` to load data from a GitHub repository, and formats tick labels with `format`. Hovering over a bar reveals a tooltip with the population value.

Ssaitejakaranam10@gmail.com

activity6q1(2)

This visualization displays population figures for 20 countries in 2010 as horizontal bars. The chart uses React with D3 v5's `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths. Rendered as SVG, the code imports data from a GitHub-hosted CSV file and applies D3's `format` function to abbreviate axis tick labels. Blue axis lines, green bars, and a Poppins typeface style the visualization. Native SVG `<title>` elements provide tooltips showing the formatted population value for each bar.

Activity-6-q1.2

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles, with React managing the component structure. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and population values are formatted with `d3.format` to abbreviate large numbers (e.g., “1.2B”). Blue axis lines and green bars are styled with CSS.

Bbhargavr016@gmail.com

Ssaiteja.cse.rymec@gmail.com

activity 6_Q1.1

This bar chart displays the populations of ten countries in 2010, with country names on the y-axis and population values on the x-axis. The data is loaded from a remote CSV file using the `csv` function from D3 v5, while React manages the component state and rendering as SVG elements. The chart uses `scaleBand` and `scaleLinear` to position bars, with formatted tick labels converting values to billions via D3’s `format` API. Hovering over a bar reveals the exact population through a native SVG `<title>` tooltip.

activity6 q1.1

This example shows a horizontal bar chart comparing the population of different countries for the year 2000, with the top 10 countries sorted by population. The chart uses React components to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numerical x-axis. Data is loaded from a CSV file using d3.csv, and axis ticks are formatted with d3.format using SI notation that converts "G" to "B" for billions.

Hhkodiripaka15@gmail.com

Ssrilekhasridasyam@my.unt.edu

Activity6_q1_2

This bar chart displays the population of 20 countries in 2010, sorted by country name along the vertical axis. Each bar’s length encodes the population value, with a formatted x-axis label converting SI units (e.g., “1.2B”) for readability. The visualization is built with React and D3 v5, using `scaleBand` for the categorical axis and `scaleLinear` for the population scale. Data is loaded asynchronously from a CSV file via `d3.csv`, and SVG rectangles render the marks with a native tooltip showing the population value.