Skip to main content
SimilarExport ZIP
100%

Fork of Activity 6_2

✓ Published0🌍 Public
Mmanishmanda@my.unt.edu
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Activity 6

This example shows a horizontal bar chart of the top 20 countries by 2010 population, sourced from a CSV file on GitHub. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to SVG bars, with `d3.csv` loading the data. The code imports local ES6 modules for axes and marks, formats population ticks with `d3.format`, and uses SVG `<title>` elements for tooltips. Axes are rendered as SVG groups, with styling applied via CSS classes.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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

Fork of Activity 7

A horizontal bar chart displays the 2010 population of the top 20 countries, sorted by value. Built with React and D3 v5 (scaleBand, scaleLinear, csv, max, format), it renders marks as SVG rectangles. The chart loads data from a GitHub-hosted CSV file, with axes using custom components and a tooltip formatted with the `.2s` SI prefix.

Vvarun.mahankali39@gmail.com
94% match
Loading thumbnail…

Fork of Fork of Activity 6_Task 1

This example displays a horizontal bar chart of the top 20 countries by 2010 population, using a CSV file loaded via `d3.csv`. It shows a population bar chart with a formatted x-axis that converts values to billions (e.g., "B") using `d3.format`. The visualization is built with React components (e.g., `AxisBottom`, `AxisLeft`, `Marks`) and renders SVGs using `d3.scaleBand` and `d3.scaleLinear`. The bars are styled with a light green fill (`#90ee90`), and hover tooltips are provided by SVG `<title>` elements.

Hhemanthdummy999@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6_Q1

This example displays a horizontal bar chart of the top ten countries by population in the year 2000, with bars sized proportionally to population values. It uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning. The `csv` loader fetches data from a GitHub-hosted CSV file, and `format('.2s')` converts population numbers into abbreviated labels like “1.2B”. Native SVG `<title>` elements provide hover tooltips, while axis ticks and labels are generated through custom React components.

KKarnam Abinay Goud
94% match
Loading thumbnail…

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

KKritin Kesav
93% match
Loading thumbnail…

Fork of Activity6_Q1.2

This example displays a horizontal bar chart of 2010 population data for twenty countries, loaded from a CSV file. The chart uses React with D3 v5 scales and axes, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. SVG rectangles render the bars, with tooltips appearing on hover. The code imports D3 utilities like `csv`, `format`, and `max` to process and format the data, replacing 'G' with 'B' for billion labeling.

SShiva Sai Reddy
93% 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
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