Fork of Activity6T1Tutorial

100%

Fork of Activity6T1Tutorial

✓ Published0🌍 Public

Last edited Mar 29, 2025

Created on Mar 29, 2025

This horizontal bar chart displays the populations of the top 30 countries in 2020, using a lightgreen-to-orange hover effect to highlight individual bars. The visualization loads data from a CSV file via `d3.csv()` and maps the `Population-2020` column to a linear X-axis, while country names are plotted on a band-scaled Y-axis. The chart includes labeled axes and is rendered as SVG, with styling applied through CSS classes and D3's axis generation methods.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6Task1T1

This horizontal bar chart displays the top 30 countries by population in 2020, with each bar’s length encoded by population value and colored by a pastel ordinal scale. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.axisBottom`/`d3.axisLeft` to generate tick marks. Data loads asynchronously via `d3.csv` from a GitHub Gist, and bars are drawn as SVG rectangles with opacity, while axis labels and tick styling are applied through CSS.

Mmaheshsachin1234@gmail.com

92% match

Loading thumbnail…

Fork of Fork of ACTIVITY_6_TASK1

This horizontal bar chart displays the population of the top 30 countries in 2020, with each country represented by a lightgreen bar scaled against a linear population axis. The visualization uses d3.v7 with SVG rendering, employing d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The code loads CSV data from a GitHub repository, formats population values with d3.format to show abbreviations like "200B", and applies margins and axis labels for clarity. Both axes include custom tick formatting and rotated text labels.

Ssravani1969@gmail.com

92% match

Loading thumbnail…

Fork of Activity6_Q2

This chart displays the top 20 countries by population in 2010, using a horizontal bar chart rendered as an SVG. Countries are sorted in descending order along the y-axis, with bar lengths proportional to population on a linear scale and formatted numerical labels shown at each bar's end. The visualization is built with D3 v7, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, along with `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded from a remote CSV file, filtered to the 2010 column, and styled with light green bars that darken on hover.

Hharinihari6791@gmail.com

90% match

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the 2020 population for the top 30 countries, sorted along a horizontal axis with population values and a vertical axis listing country names. The visualization uses D3 v7 to load CSV data, create a linear x-scale and band y-scale, and render light-green SVG rectangles. Axis components are built with `d3.axisBottom` and `d3.axisLeft`, with tick formatting that converts values to a concise billion/million notation (e.g., "1.2B"). The chart is generated entirely in SVG, with margins and scaling calculated in JavaScript.

Nnavyabade05@gmail.com

89% match

Loading thumbnail…

activity6_tutorial1

This horizontal bar chart displays the top 30 countries by population in 2020, using a lightgreen fill for each bar. The chart sorts countries along the y-axis with population values on the x-axis, formatted with a custom tick formatter that converts values to billions. Built with D3 v7 and SVG, the visualization leverages `d3.scaleLinear` and `d3.scaleBand` for positioning, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data is loaded asynchronously from a CSV file via `d3.csv`, with the population column parsed as a number.

Sshreshikaveerannagari@gmail.com

89% match

Loading thumbnail…

Fork of Activity 7

This horizontal bar chart displays the top 30 countries by 2020 population, with green bars extending from a shared baseline and blue tick marks along the axes. Built with React, the visualization uses D3 v5’s `scaleBand`, `scaleLinear`, and `format` utilities to map country names and population values to SVG rectangles, while the `csv` loader fetches data from a GitHub-hosted CSV file. Axis components render tick lines and labels, and hover tooltips reveal formatted population values via SVG `<title>` elements.

Mmayasuedorman@gmail.com

89% match

Loading thumbnail…

Fork of Activity 6

This bar chart displays the 2020 populations of the top 30 countries, ranked vertically. Population values are formatted in billions using D3's `format` function, with a custom tick label replacing 'G' with 'B'. The visualization loads CSV data via `d3.csv` from a GitHub repository and renders SVG elements from React components. Axes and marks are built using D3's `scaleBand` and `scaleLinear`, with tooltips provided by SVG `<title>` elements.

Aajaykumarseelam@my.unt.edu

89% match

Loading thumbnail…

Fork of Activity 7

This example shows the population of the top 20 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It is rendered as SVG in a React application using D3 v5 scales such as `scaleBand` and `scaleLinear`, with data loaded from a CSV file via D3’s `csv` function. The bars are colored light green, and the x-axis labels use D3’s `format` to abbreviate values into billions.

Iindushashi.g@gmail.com

89% match