Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published1🌍 Public
Vvishu.valandas@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example displays a horizontal bar chart comparing the 2010 populations of 20 countries, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The visualization renders as SVG, with custom `AxisBottom` and `AxisLeft` components generating ticks, and `Marks` creating rectangles with tooltips formatted using `d3.format`.

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 uses a horizontal bar chart rendered with React and SVG to compare the 2010 populations of twenty countries. The chart sorts countries vertically using an ordinal scale and encodes population values with a linear scale, formatting large numbers with abbreviations (e.g., “1.5B”). It pulls data from a CSV file hosted on GitHub. The code leverages d3’s `scaleBand`, `scaleLinear`, `format`, and `csv` functions, along with custom React components (`AxisBottom`, `AxisLeft`, `Marks`) that render SVG elements. Tooltips display the formatted population value for each bar.

Mmayasuedorman@gmail.com
93% match
Loading thumbnail…

Activity 6

This bar chart displays the populations of 20 countries in 2010, sorted vertically by country name with proportional horizontal bars. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via reusable AxisBottom, AxisLeft, and Marks components. Population values are parsed from a CSV file using `d3.csv`, formatted with `d3.format`, and displayed with a tooltip on each bar.

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

Activity 6.2

This is a horizontal bar chart displaying the populations of twenty countries in 2010, sorted by country name. The chart uses React components to render SVG elements, with D3 scales (`scaleBand`, `scaleLinear`) and formatting via `d3.format`. Data is loaded asynchronously from a CSV using `d3.csv`, and each bar includes a tooltip showing the population value. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to construct the visualization.

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

Activity 6

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name, with each bar’s length representing population in billions. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` marks with tooltips via `<title>`. Data is loaded from a remote CSV using `d3.csv`, and axes are rendered by custom components (`AxisBottom`, `AxisLeft`) with tick formatting via `d3.format`.

Gganesh.hns48@gmail.com
93% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name. The visualization uses React with D3 version 5, employing `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Data loads from a CSV file via `d3.csv`, with population values multiplied by 1000, and renders as SVG rectangles with tooltips. Axis components and marks are modularized as separate ES6 modules, with styling applied via CSS classes.

Nnandasaipalankius@gmail.com
93% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of ten countries in 2020, sorted with the largest at the top. D3's `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render the axes and bars. The chart loads data from a remote CSV file using `d3.csv`, converts the year-2000 column to population by multiplying by 1000, and uses `d3.format` to abbreviate axis tick labels (e.g., billions). The visualization is built with React and D3 v5, rendering to SVG with a Poppins font and custom styling for ticks and marks.

Mmailtomeanusha11@gmail.com
93% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries in 2010, sorted along a vertical categorical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` and `scaleLinear` for positioning, axes created from custom components, and tooltips via SVG `<title>` elements. Data is loaded from a CSV file using `d3.csv`.

Rrakshithareddy217@gmail.com
92% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries in 2010, sorted along a vertical categorical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` and `scaleLinear` for positioning, axes created from custom components, and tooltips via SVG `<title>` elements. Data is loaded from a CSV file using `d3.csv`.

Rrakshithareddy217@gmail.com
92% match