Task_8_Q2

Task_8_Q1.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, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are parsed from a CSV file and formatted with D3's `format` function, converting values to billions. The chart includes custom axis components and uses SVG rectangles with tooltips showing the precise population for each country.

DDipesh

Activity 6_Q2.A2

This stacked bar chart compares the populations of ten countries from 2010 to 2020 using data from a CSV file. Red and blue bars represent each year, with country names along the x-axis and population values on the y-axis. The visualization uses D3.js v6 APIs like `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to render SVG rectangles, with a legend identifying the two time periods.

SSeema Shrestha

Task_8_Q1.2

A bar chart displays the population of 20 countries in 2010, sorted by country name along the y-axis and population magnitude along the x-axis. The chart uses React and D3 v5, with `scaleBand` and `scaleLinear` for ordinal and numeric axes, respectively. Data is loaded as CSV from a GitHub repository using `d3.csv`, and values are formatted with `d3.format`. Marks are rendered as SVG rectangles, with tooltips showing population values in a compact, abbreviated format. Axis ticks and labels are styled via custom React components.

DDipesh

Vvenkataravitarunelisetty@my.unt.edu

QUESTION-2(TASK-2)

This stacked horizontal bar chart displays population distribution across multiple countries for the years 1950–2020, with each bar segment representing a yearly population count. It uses d3.csv to load the data, d3.stack() to compute the stacked segments, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. Hovering over a segment highlights it and shows a tooltip with the specific year and population value, using d3.axisLeft, d3.axisBottom, and d3.scaleBand.

Task_8_q1

A horizontal bar chart displays the populations of ten countries as of the year 2000. The visualization uses React with D3 v5, rendering bars as SVG rectangles via the `scaleBand` and `scaleLinear` scales, with axes rendered by custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file using the `csv` function from d3. Population values are formatted in billions using `format('.2s')`. Tooltips show the formatted population on hover through a native SVG `<title>` element.

YYeshwanth963@gmail.com

Task8 Q1 2

This chart displays the 2010 population of 20 countries as a horizontal bar chart, with each bar’s length proportional to population. The SVG is rendered using React, with D3 v5’s `scaleBand` and `scaleLinear` mapping countries and population values. The code fetches CSV data via D3’s `csv` method, formats axis ticks using `d3.format`, and includes tooltips via SVG `<title>` elements. Axes are custom components drawing ticks and labels, with light green bars styled via CSS.

Ssruthimreddy6@gmail.com

Task8_Q1

This example displays a horizontal bar chart of the population of ten countries for the year 2000, with bars sorted by country name and a blue axis line. The visualization uses React and D3 v5 to render SVG marks; `d3.scaleBand` and `d3.scaleLinear` map the categorical and quantitative variables, while axes are built from custom modules. Population data is loaded as CSV from a remote repository, with values scaled by a thousand. The chart includes interactivity via native SVG `<title>` tooltips that format tick values with `d3.format`.

LLakshmi Keerthi

Rreddyswethuvahana@gmail.com

Task8Q1DV

A horizontal bar chart displays the population of ten countries in the year 2000, with the y-axis ordered by country name. Bars are rendered as green SVG rectangles, their lengths proportional to population values read from an external CSV file. The chart uses React to build the SVG structure with D3 v5’s `scaleBand` for categorical y-axes and `scaleLinear` for the quantitative x-axis, formatted with `format('.2s')` to abbreviate large numbers. Hovering over a bar reveals its exact value via a native `<title>` tooltip, and axes are styled with blue tick lines and gray labels.