Skip to main content
SimilarExport ZIP
100%

Fork of Activity 6

✓ Published1🌍 Public
Vvidyagangasani@my.unt.edu
Last edited Apr 6, 2025
Created on Apr 6, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

Vvidyagangasani@my.unt.edu
95% match
Loading thumbnail…

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

NNithish Karanam
94% 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
94% match
Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart of the top 20 countries by 2020 population, using a React-based SVG rendering. It maps the `Population` values to bar widths and `Country` names along the left axis, formatting population figures with D3’s `format('.2s')` to display billions. The code loads CSV data via `d3.csv`, then scales the bars using `scaleBand` and `scaleLinear`. Axis components are built manually with React, and tooltips are provided through SVG `<title>` elements. The chart’s styling includes blue tick lines, green bars, and a Poppins font.

Vvineelaramulapalli32
94% 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
94% match
Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, with each bar labeled with its country name and a tooltip displaying the formatted population value on hover. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes and data mapping. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and axis ticks are formatted using d3.format to abbreviate large numbers (e.g., 'B' for billions). The chart features custom axis components that generate tick marks and labels, with styling applied through CSS selectors.

Nnissisharon61@gmail.com
94% 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
94% match
Loading thumbnail…

Fork of Activity 7

This horizontal bar chart displays the 2020 population of 30 countries, sorted in descending order with a green bar for each nation. The visualization loads CSV data from a GitHub gist and renders vector graphics using React with D3 v5, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes and bars are drawn as SVG elements via React components, with tooltips showing formatted population values.

Bbudalavijay2001@gmail.com
93% match