Skip to main content
SimilarExport ZIP
100%

Fork of Activity6_q1.1

✓ Published1🌍 Public
Jjahnavigummadi@my.unt.edu
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Activity6_q1

A fork of a VizHub activity example, this visualization renders a horizontal bar chart of country populations for the year 2000. The data is loaded from a GitHub-hosted CSV and displayed using React and D3 v5, with the top ten countries sorted by population. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG `<rect>` marks for each bar and a `<title>` element for tooltips. The code demonstrates importing D3 functions and local ES6 modules, and customizes axis styling through 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 Hello VizHub for activity 6

This example displays a horizontal bar chart of the top 30 countries by 2020 population, using data loaded from a CSV file hosted on GitHub. The visualization renders as an SVG, built with React and D3 v5. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to abbreviate population values. Custom components draw the axes, while each bar includes a tooltip showing the formatted population value.

Sshravan.s0710@gmail.com
92% match
Loading thumbnail…

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Aabjalshaik02@gmail.com
92% match
Loading thumbnail…

Fork of activity 6_ Q1.1

This example displays a horizontal bar chart of population data for ten countries in the year 2000. A React functional component renders SVG elements, using D3’s `scaleBand` and `scaleLinear` to position the bars and axes. The chart loads CSV data via `d3.csv` from a GitHub repository, formats the tick labels with `d3.format`, and includes tooltips on each bar using SVG `<title>` elements. Axis components are built as separate ES6 modules for bottom and left orientations.

Kkowshiksamudrala08@gmail.com
91% match
Loading thumbnail…

Fork of A6_Q1.1

This fork of Activity6_Task1 renders a horizontal bar chart of the top ten countries by population in the year 2000. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) and React components to position SVG rectangles and axes, with a tooltip showing the formatted population value. The chart applies a light green fill to bars, blue tick lines, and a Poppins font, loading data from a CSV URL and formatting large numbers with D3's `format`.

SShashankkodishala@my.unt.edu
91% match
Loading thumbnail…

Fork of Activity 6_2

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.

Mmanishmanda@my.unt.edu
91% 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 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
90% 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
90% match