Fork of Fork of Activity 7

Fork of Activity 7

This example shows a horizontal bar chart comparing the populations of the top 10 countries in the year 2000. The visualization uses React components with D3 v5 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. Data is loaded from a CSV file using `d3.csv`, and the bars are rendered as SVG rectangles with tooltips showing formatted population values. The chart includes custom axis components for the bottom and left sides, with population values formatted using `d3.format`.

Ggoudrohit2000@gmail.com

Vvarun.mahankali39@gmail.com

Fork of Activity 7

A horizontal bar chart displays the 2010 population of the top 20 countries, sorted by value. Built with React and D3 v5 (scaleBand, scaleLinear, csv, max, format), it renders marks as SVG rectangles. The chart loads data from a GitHub-hosted CSV file, with axes using custom components and a tooltip formatted with the `.2s` SI prefix.

Fork of Fork of Activity 7

This interactive bar chart displays the population of the top 10 countries as of 2010, with each bar color-coded in green. The visualization uses a React front-end with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded dynamically from a CSV file hosted on GitHub, parsed with D3’s `csv` function, and rendered as SVG rectangles with tooltips formatted using SI prefixes. The code includes custom axis components for bottom and left ticks, with styling defined in an external HTML file.

Ggoudrohit2000@gmail.com

Fork of Fork of activity 6 q1.2

This visualization displays a horizontal bar chart of population data for the top 20 countries in 2010, sorted in descending order. The chart uses D3.js (v5) with React to render SVG rectangles, where bar length encodes population values and the y-axis lists country names. The code employs `scaleBand` and `scaleLinear` from D3 for axes, with data loaded from a CSV via `d3.csv`. Axis ticks are styled with yellow lines, and tooltips show formatted population values when hovering over bars.

RRakesh Yadav

Fork of Activity

This visualization shows the 2010 population of 20 countries as a horizontal bar chart. The code loads data from a CSV file and renders bars as SVG rectangles using React, with axes built from D3 v5's `scaleBand` and `scaleLinear`. Tooltips display population values using D3's `format` function, and the chart applies margins and axis labels within a fixed 960x500 viewport.

Ssathvik0311@gmail.com

SSathishvepuri143@gmail.com

Fork of activity-6-a1-2

This bar chart displays the populations of 20 countries for the year 2010, using data fetched from a CSV file via the d3.csv function. The visualization renders as an SVG with React, using d3 scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis. Thick green bars represent population values, and hovering reveals tooltips via SVG title elements. The axis labels and tick formatting are built with custom React components for the bottom and left axes.

Fork of Fork of Activity 7

This is a horizontal bar chart showing the population of 20 countries in 2020, rendered as SVG elements within a React application. The chart uses D3 version 5 scales (`d3.scaleBand` and `d3.scaleLinear`) to map country names and population values to positions and lengths. Data is loaded from a CSV file via a custom `useData` hook, with tick marks styled blue and a green fill for each bar. Tooltips display the formatted population value on hover.

MManideeprenikindi

Kkrishna444battula@gmail.com

Fork of Activity 6_T-1 Q-2

This visualization displays the top 20 countries by 2010 population using a horizontal bar chart rendered with React and SVG. D3’s scaleBand and scaleLinear position the bars, while custom React components generate axes and marks. Population values from the CSV are formatted with d3.format (e.g., “1.2B”). The chart includes a title, axis labels, and hover tooltips showing formatted values.