Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Activity-6 Q1-1.2

✓ Published0🌍 Public
Kkrishi7079@gmail.com
Last edited Mar 30, 2025
Created on Mar 30, 2025

This example visualizes the 2010 population of 20 countries as a horizontal bar chart, with each bar’s length encoding population magnitude. The bars are rendered as light green rectangles on an SVG canvas, using a linear x-scale and a band y-scale for country labels. Population data is loaded from a GitHub-hosted CSV via `d3.csv`. Axes are configured with `d3.axisBottom` and `d3.axisLeft`, with tick labels formatted using `d3.format` (converting millions to billions). The chart is built modularly with separate JavaScript files for axes and marks, all orchestrated in `index.js`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity-6 Q1-1.1

This horizontal bar chart visualizes the population of ten countries in the year 2000. Sorted bars extend from the left, with light green rectangles representing each nation's population value, while the y-axis lists country names and the x-axis displays population counts. Built with D3 v7, the visualization uses `d3.axisBottom` and `d3.axisLeft` for axes, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and the SVG rendering is generated through separate modules for axes, marks, and data fetching.

Kkrishi7079@gmail.com
93% match
Loading thumbnail…

Fork of Fork of activity 6_ Q1.2

This example displays a horizontal bar chart of population data for 20 countries, with each bar’s length proportional to the 2010 population value. The visualization uses D3’s `scaleBand` and `scaleLinear` for axis scaling, with formatted tick labels. Built with React and rendered as SVG, it loads data from a remote CSV via D3’s `csv` utility. Interactivity is basic, with tooltips showing the population value on hovering over a bar.

Kkowshiksamudrala08@gmail.com
91% match
Loading thumbnail…

Fork of Activity6 Task_1

This bar chart displays the population of 20 countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map data to SVG rectangles, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes. Population data is loaded from a remote CSV file via `d3.csv`, formatted with compact notation (e.g., "1.2B"), and rendered as light green bars using the SVG `rect` element.

Bbhavya.kanyadara@gmail.com
91% match
Loading thumbnail…

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Aaadesh.pranesh@gmail.com
91% match
Loading thumbnail…

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

Fork of Activity_6 Q1.1

This bar chart shows the population of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The code uses React components to render SVG elements, including custom AxisBottom and AxisLeft components for ticks and labels. It loads CSV data from a GitHub repository using d3.csv, then applies a linear scale for population and a band scale for countries. The bars are green rectangles with tooltips showing formatted population values, and the x-axis labels use d3-format to abbreviate large numbers.

Bbhavya.kanyadara@gmail.com
90% match
Loading thumbnail…

Fork of Activity 6_Q1_2

This visualization shows a horizontal bar chart comparing the 2010 population of twenty countries, sourced from a CSV file hosted on GitHub. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, rendering marks as SVG rectangles. Axes are customized via reusable components, and `d3.format` converts tick labels from billions to abbreviate them.

KKarnam Abinay Goud
90% match
Loading thumbnail…

Fork of Fork of Activity6_q1.1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart using SVG rendering in React. The code employs d3.scaleBand and d3.scaleLinear from the D3 v5 library to map countries to the y-axis and population values to the x-axis, with formatted tick labels converting numbers to billions. Data is loaded from a CSV file via d3.csv, and the bars include tooltips showing the population value. The chart also features custom axis components and a Poppins font from Google Fonts.

Aabjalshaik02@gmail.com
90% match