Activity 7

Activity 7

This horizontal bar chart displays the 2010 populations of ten countries, sorted by name along the y-axis. The visualization uses React with D3.js v5, constructing an SVG with scales from `d3.scaleBand` and `d3.scaleLinear`. The population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` (abbreviated to billions), and rendered as green rectangles. Axis tick marks and labels are styled with blue lines and gray text, with a cumulative x-axis label reading "POPULATION-2010".

LLakshmanRangisetti

Rrakshithareddy217@gmail.com

Activity 6

This interactive bar chart visualizes the population of ten countries in the year 2000. The chart uses a horizontal layout with a band scale for the categorical country axis and a linear scale for the population axis. Built with React and D3 v5, the visualization renders as an SVG with custom axis components and rectangular marks. Data is loaded from a remote CSV file, and each bar includes a tooltip that formats large population values using the `d3.format` function with SI prefixes.

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`.

Activity 7

This bar chart displays the 2010 populations of the top ten countries. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, with data loaded via `csv` from a GitHub dataset. Each green bar is an SVG `rect`, rendered through React components like `Marks`, `AxisBottom`, and `AxisLeft`, with axis tick values formatted using D3's `format`.

VVarshareddy2912

Activity 7

This example shows a horizontal bar chart of the top 10 countries by 2010 population. It uses React to render SVG elements and D3 v5 scales and axes for layout, with data loaded from a CSV file via d3.csv. The chart includes blue tick lines, green bars, and a formatted population axis label. Tooltips display the population values using D3’s format function with SI-prefix notation.

BBhavyaMammai

Activity 7

This horizontal bar chart displays the population of ten countries in 2010, using a D3.js `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The application, built with React, renders SVG `rect` elements scaled to population values, with D3's `format` function converting large numbers into abbreviated labels like “B” for billions. Data is loaded asynchronously via `d3.csv` from a remote GitHub repository, while custom `AxisBottom` and `AxisLeft` components generate the chart’s tick marks and labels.

Rrushithareddyy

Activity 7_Part1

This visualization displays the population of ten countries in 2020 as a horizontal bar chart, with countries sorted on the y-axis and population shown on the x-axis. The bars are rendered as SVG rectangles using React components, with the population values scaled by a linear axis and formatted in a compact, readable way (e.g., "1.2B"). The chart is built with D3.js v5 for data loading and scaling functions, including `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `csv` for fetching the dataset from a remote GitHub source. Axis ticks and labels are styled with a brown line color and a Poppins font, and each bar includes a tooltip showing the population value.

Rrikhitakoganti12

Vvarun.mahankali39@gmail.com

Activity 7

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ordered along a categorical y-axis and a linear x-axis. The visualization is rendered with React and SVG, leveraging D3’s `scaleBand`, `scaleLinear`, and `format` APIs to compute positions and abbreviate tick labels. Data is loaded asynchronously from a remote CSV file via `d3.csv`, with hover tooltips revealing exact population values through native SVG `<title>` elements.