Question2 task 1

task 1

This interactive bar chart displays the 2020 populations of 30 countries, from a CSV file, using horizontal bars sorted by country name. Green rectangles represent each nation’s population, with hover tooltips revealing the precise value. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG rendering, with axis ticks formatted using `format('.2s')`.

Nnitishsurneni@gmail.com

Question 1 task 1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, with each bar labeled with its corresponding population value. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` and `d3.scaleLinear` to map countries and population values to screen coordinates. Custom axis components (`AxisBottom` and `AxisLeft`) generate rotated tick labels and formatted tick text, while the `Marks` component draws the steel-blue rectangles and value labels. The data is loaded from a CSV file hosted on GitHub, processed in a `useData` function, and filtered to extract the 2000 population column.

NNithish Karanam

Vvenkatdinesh5010@gmail.com

Activity6_task1

This horizontal bar chart displays the 2020 populations of 30 countries, with bars sorted by country name along the y-axis and population values along the x-axis. The visualization uses D3 v7 to load CSV data from a GitHub repository, then renders SVG rectangles with a light green fill. The x-axis uses a linear scale with custom tick formatting to abbreviate large numbers (e.g., 200M, 1.2B), while the y-axis employs a band scale to position the country labels. Axis labels are added via the AxisBottom and AxisLeft components.

Ggnitishreddy0245@gmail.com

Activity6_Task1

This horizontal bar chart displays the population of 30 countries in 2020, ordered alphabetically from top to bottom. Each green bar’s length represents population, with a tooltip showing the exact value on hover. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads data from a GitHub-hosted CSV file. SVG rendering includes custom `AxisBottom` and `AxisLeft` components to draw axes with labeled ticks.

Ddaneeshchowdary18@gmail.com

Question-1.2 Task-1

This horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses React with D3.js scales and axes to render SVG rectangles, with bars sized proportionally to population values. The code imports D3’s `scaleBand`, `scaleLinear`, and `format` APIs, while loading data via `csv` from a GitHub-hosted CSV file. Tooltips show formatted population values using a custom tick format that shortens large numbers to billions.

MMahimaChowdaryKasthala@my.unt.edu

question2(task-1)

This horizontal bar chart displays the populations of 20 countries in 2010, with each bar labeled by country name and population value, sorted in descending order from China to France. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the categorical y-axis of country names. The code draws axis ticks via `d3.axisLeft` and `d3.axisBottom`, formats population labels with `d3.format('.2s')`, and includes hover effects that change bar colors through CSS.

Rrahulsiddhartha123@outlook.com

Activity 6_Task 1 Question 2

This bar chart displays the 2010 populations of 30 countries, ranked from largest to smallest, using a horizontal layout. The visualization loads data from a CSV file hosted on GitHub and renders it with React and SVG. The implementation uses D3 v5 for data processing and scales, specifically `csv`, `scaleBand` for the y-axis, and `scaleLinear` for the x-axis, with custom components for axes and marks. Blue tick lines and light green bars are rendered, with tooltips showing formatted population values.

Activity 6 task 1

This bar chart ranks the top 30 countries by population in 2020, using horizontal bars with population values on the x-axis and country names on the y-axis. The visualization is built with D3.js (v7) and rendered as an SVG, loading data from a CSV file. It uses custom components like `AxisBottom`, `AxisLeft`, and `Marks` to create the axes and bars, with D3's `scaleLinear` and `scaleBand` for data mapping and a custom tick format that converts numbers to billions.

NNithish Karanam