Fork of Activity 7 sample

100%

Fork of Activity 7 sample

✓ Published0🌍 Public

Last edited Mar 30, 2025

Created on Mar 30, 2025

This fork of Activity 7 shows a horizontal bar chart of 2020 population estimates for 30 countries, with bars colored green on an SVG rendered through React. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate tick labels (e.g., “B” for billions). Data is loaded from a CSV file via d3.csv and transformed by multiplying the “2020” column by 1000. Axes and marks are built declaratively as React components, with a `<title>` element providing a native tooltip on each bar.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of population data for 30 countries in 2020. The visualization uses React to render an SVG with D3.js scales and axes. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a GitHub repository. Each bar is a `<rect>` element with a `<title>` tooltip showing the population value, formatted using D3's `format` function to abbreviate large numbers.

Aanisha.peddireddy@gmail.com

94% match

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 presents a horizontal bar chart of population data for 30 countries in 2020, sorted by country name. The chart uses React to render SVG elements, with D3 scales (scaleBand and scaleLinear) and format utilities computing positions and tick labels. The graph displays axis lines and text in blue and gray, with green bars that include tooltips showing formatted population values. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization updates after the data fetch completes.

Rravularasesh3102@gmail.com

93% match

Loading thumbnail…

Fork of Activity 6

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using a React-based SVG rendering approach. The visualization ranks countries by population, with bars colored green and labeled axes showing country names and population values in billions. The code uses React components for layout, d3.js scaleBand and scaleLinear for positioning, and d3.csv to load the dataset from a GitHub-hosted CSV file. Tooltips provide formatted population values on hover, while the chart includes custom axis components and a Poppins font styling from Google Fonts.

Vvidyagangasani@my.unt.edu

93% match

Loading thumbnail…

Fork of Activity 7

This is a horizontal bar chart showing the 2020 population estimates for 30 countries and territories, with bars colored in light green against a white background. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file and formatted using D3’s `format` function to display values in billions with a "B" suffix. SVG rectangles are rendered for each bar, with tooltips revealing the exact population value.

Vvamsikrishnakanchukommala@my.unt.edu

93% match

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart of population data for 30 countries in 2020. The chart uses a linear x-scale for population values and a band scale for country names, with each bar colored green. The visualization is built with React and D3 v5, using SVG rendering. The code defines reusable components for axes and marks, and loads data from a CSV file using D3's `csv` function, with a tooltip that formats population values using D3's `format` function.

Ppraneeth.d555@gmail.com

93% match

Loading thumbnail…

Fork of Activity 7

A fork of the D3 Activity 7 example displays 2020 population estimates for 30 countries as horizontal bar charts, with a blue axis and green marks. The React app loads CSV data via `d3.csv`, uses `d3.scaleBand` and `d3.scaleLinear` to position bars, and renders SVG elements. Axes, labels, and tick formatting rely on `d3.format`; tooltips are provided by SVG `<title>` elements, and the project includes a D3 v6 tutorial video link.

Jjasthilavanya2022@gmail.com

93% match

Loading thumbnail…

Fork of Activity 7

This bar chart displays population estimates for 30 countries in 2020, organized alphabetically along the vertical axis with horizontal bar lengths encoding population values. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements for the bars. The data comes from a remote CSV file loaded via `d3.csv`, axis ticks are generated with custom React components, and numbers are formatted using `d3.format`.

Ssusarlasruthi2000@gmail.com

93% match

Loading thumbnail…

Fork of Activity 7

This example visualizes the 2020 population of 30 countries using a horizontal bar chart. The SVG renders through React components, with d3.scaleBand positioning countries on the y-axis and d3.scaleLinear mapping population values to bar lengths on the x-axis. Axis tick labels use d3.format with the '.2s' specifier to abbreviate values, replacing 'G' with 'B' for billions. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with each bar including a native SVG tooltip showing the formatted population value.

Ppavanbellam@my.unt.edu

93% match