Skip to main content
SimilarExport ZIP
100%

activity_6 fork

✓ Published1🌍 Public
Aasimcyb@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from activity_6 fork

This example shows a horizontal bar chart ranking the populations of thirty countries in 2020, using a React component that renders an SVG. The code imports D3’s `scaleBand`, `scaleLinear`, `max`, `format`, and `csv` to load data from a GitHub-hosted CSV, scale the values, and create tick labels formatted in billions. Custom React components render the axes and marks, with bars colored green and blue tick lines, while a `<title>` element provides tooltips.

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…

Activity 6

This example shows a horizontal bar chart ranking the populations of 30 countries in 2020, using a scaleBand for the categorical country axis and a scaleLinear for the numeric population axis. The bars are rendered as SVG rectangles with a light green fill that darkens on hover, and each includes a tooltip showing the formatted population value. Built with React and D3 v5, it loads CSV data via `d3.csv`, formats tick labels with `d3.format`, and uses custom axis components to display the population scale with billions abbreviated as "B".

FFayezuddin Mohammed Khan
92% match
Loading thumbnail…

Activity 6 Tutorial 1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020. It uses React with D3’s `scaleBand`, `scaleLinear`, `max`, and `format` APIs to build the visualization in SVG. The code loads CSV data via `csv` from a GitHub gist, formats tick labels with `.2s` (converting Gigabytes to Billions), and includes native SVG `<title>` tooltips. Axes are rendered as custom React components, with blue tick lines and green bars.

Nnikhilapogula@my.unt.edu
92% match
Loading thumbnail…

Activity 7

This example shows a horizontal bar chart ranking the populations of 20 countries in 2020, with bars colored green and labeled with formatted tick values. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and `csv` from D3 to load the data from a GitHub-hosted CSV file. Axes are custom components, and hovering over a bar displays a tooltip via the SVG `<title>` element.

NNukaShravanKumar
92% match
Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart of the top 30 countries by 2020 population, with blue axis ticks, green bars, and formatted labels (using SI units where G becomes B). The React application uses D3 v5 utilities d3.scaleBand, d3.scaleLinear, and d3.csv to fetch and process data, rendering SVG marks via custom components. Tooltips reveal precise population values on hover, while the axes and labels use styling from the Poppins font.

Aasimcyb@gmail.com
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

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

activity 6_Task 1

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, using a dataset loaded from a GitHub-hosted CSV file. React manages the component state, while D3 v5 provides the `scaleBand` and `scaleLinear` functions for positioning bars and axes, and the `format` helper for abbreviating tick labels (e.g., converting “G” to “B”). The SVG is rendered with reusable axis and mark components, each bar displaying a native tooltip via the `<title>` element. The visual design uses green bars, blue axis lines, and a Poppins font.

Ssindhuja27b@gmail.com
91% match
Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, with each bar labeled with its country name and a tooltip displaying the formatted population value on hover. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes and data mapping. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and axis ticks are formatted using d3.format to abbreviate large numbers (e.g., 'B' for billions). The chart features custom axis components that generate tick marks and labels, with styling applied through CSS selectors.

Nnissisharon61@gmail.com
91% match