Skip to main content
SimilarExport ZIP
100%

Fork of Tutorial_1_Sivani

✓ Published0🌍 Public
Kkommineniamarasadasivani2002@gmail.com
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Tutorial_1_Sivani

This example shows a horizontal bar chart of 2010 population estimates for select countries, with green bars sorted by country name and labeled axes. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars, `csv` to load data from a GitHub-hosted CSV file, and SVG `rect` elements to render marks. The code defines reusable Axis and Marks components, formats tick labels with `format`, and includes a tooltip title on each bar showing the population value.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tutorial_1_Sivani

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with a green bar for each nation and blue tick lines along the bottom axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `d3.format` to abbreviate large population values (e.g., “1.2B”). Data loads from a CSV via `d3.csv` and renders as SVG rectangles with tooltips on hover.

Kkommineniamarasadasivani2002@gmail.com
93% match
Loading thumbnail…

Fork of Question_1_sivani

This horizontal bar chart displays the population figures for ten countries in the year 2000. Each bar is rendered as an SVG `<rect>` using React, with its length proportional to the population value. The chart’s axes are generated using `d3.scaleBand` for the categorical country labels and `d3.scaleLinear` for the continuous population scale, with tick formatting via `d3.format`. The data is loaded from a remote CSV file using `d3.csv`.

Kkommineniamarasadasivani2002@gmail.com
88% match
Loading thumbnail…

Fork of Activity 5

This example shows a horizontal bar chart of population estimates for 30 countries in 2020, using a CSV dataset loaded from GitHub. The chart displays rectangular bars colored light green, with blue tick lines and labels for each country on the left axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `format` to abbreviate population values (e.g., converting millions to billions). The `Marks`, `AxisBottom`, and `AxisLeft` components render the SVG elements.

Ssjannaikode@gmail.com
87% match
Loading thumbnail…

Fork of Varun_6_Question1

This example displays a horizontal bar chart of 2010 population data for ten countries, loaded from a remote CSV file. The visualization uses React for component structure and D3 v5 scales (scaleBand, scaleLinear) to map country names and population values to SVG positions. Bars are rendered as SVG rectangles with native tooltips, while styled tick marks and axis labels annotate the chart. The data undergoes a preprocessing step that multiplies the 2000 population column by 1000 to derive the plotted values.

VVarunKumarKambhampati@my.unt.edu
87% match
Loading thumbnail…

Varun_6_Tutorial1

This example shows a horizontal bar chart of 2020 population data for 30 countries, sorted by country name. It uses React with SVG rendering through D3 v5, employing D3’s `scaleBand`, `scaleLinear`, `csv` parser, and `format` for axis labels. The axes are custom components (AxisBottom and AxisLeft), and bars are drawn as `<rect>` elements with tooltips using `<title>`. Data is loaded asynchronously via a remote CSV URL, and the chart is styled with a Poppins font and minimal styling.

VVarunKumarKambhampati@my.unt.edu
86% match
Loading thumbnail…

Fork of Fork of Task8_Tutorial1_Question1.2HKK

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with D3's scaleBand and scaleLinear mapping country names and population values to the SVG canvas. The React app loads CSV data via d3.csv, renders axes through custom AxisBottom and AxisLeft components, and displays values using si-format tick labels that convert gigabytes to billions. Blue rectangles represent each country's population, with tooltips showing formatted values on hover.

Hhemanthkakani1999@gmail.com
86% match
Loading thumbnail…

Fork of activity 6_Task 1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name along the y-axis. The chart uses React to render SVG marks, with D3 v5’s `scaleBand` and `scaleLinear` to position bars and axes, and `format` to abbreviate population values (e.g., “B” for billions). Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with raw population values multiplied by 1,000. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are built as React components, and each bar includes a native SVG `<title>` tooltip.

Ggouthamigongidi2457@gmail.com
86% 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
86% match