Skip to main content
SimilarExport ZIP
100%

Activity 6 Tutorial 1

✓ Published1🌍 Public
Nnikhilapogula@my.unt.edu
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Hello VizHub

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.

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…

Activity6 Tutorial 1

This example shows a horizontal bar chart of population estimates for 30 countries in 2020, using a React-based SVG rendering approach. The visualization uses `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, with formatted tick labels converting values to billions. The code loads CSV data via `d3.csv`, applies a custom row-parsing function, and renders the bars using generated `rect` elements with hover tooltips provided by SVG `<title>` elements. Axes are constructed as separate React components that generate tick marks and labels using D3's scale methods.

Ssharanyabobbala@my.unt.edu
93% match
Loading thumbnail…

Activity 6 Tutorial 1

This example presents a horizontal bar chart showing the 2020 population for 30 countries. The visualization uses D3 v5 for data loading and scaling, with React components for rendering each SVG element. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions, while custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick marks and bar rectangles. The data is fetched from a CSV file using D3’s `csv` function, and tooltips display formatted population values.

BBamanGayathri
93% match
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_tutorial1

This example shows a horizontal bar chart of population figures for 30 countries in 2020, with a tooltip on each bar when hovered. The visualization is built with React and rendered as SVG, using D3 v5’s `scaleBand` and `scaleLinear` for axes. Data is loaded from a CSV via `d3.csv` and formatted with `d3.format`. The chart includes blue tick lines, gray tick labels, and green bars.

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

activity 6 tutorial 1

This example presents a horizontal bar chart of the 2020 population for 30 countries, sorted from largest to smallest by the y-axis. The data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles using React components. It applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with `d3.format` to abbreviate population values in billions. Axes and marks are built with reusable React components that map data to SVG elements.

Nnissisharon61@gmail.com
92% match
Loading thumbnail…

Activity_6_Tutorial 1

This example displays a horizontal bar chart of the top 30 countries by 2020 population, with each bar labeled by country name and colored light green. The visualization uses React with D3 v5, leveraging `d3.csv` to load data from a GitHub-hosted CSV, `scaleBand` and `scaleLinear` for positioning, and native SVG elements for rendering. Custom axis components format tick labels using D3's `format` helper, converting values to abbreviated “B” units, while tooltips show the formatted population on hover.

HHarsha vardhan reddy Yarmareddy
92% match
Loading thumbnail…

Activity6_tutorial_1

This example displays a horizontal bar chart of population data for 30 countries from the year 2020, using a D3 CSV load and React rendering to SVG. The chart encodes country names on the y-axis and population values on the x-axis, with bars colored green and blue tick marks. The code imports `csv`, `scaleBand`, `scaleLinear`, `max`, and `format` from D3, and uses React.js to manage the data-fetching state and render the visualization. Tooltips on each bar show the population value using a SI format that abbreviates large numbers.

11810vineeth@gmail.com
92% match