Skip to main content
SimilarExport ZIP
100%

Activity 7-1

✓ Published0🌍 Public
Ppjdhungana@gmail.com
Last edited Jun 28, 2023
Created on Jun 28, 2023
Forked from Hello VizHub

A horizontal bar chart displays the population of 19 countries in 2015, sorted alphabetically by country name. The bars are filled with light green rectangles, with blue tick marks and gray text labels for the axes. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.csv` to fetch the data from a GitHub raw CSV file. Hovering over a bar reveals a tooltip with the population value formatted using `d3.format`. The SVG output is rendered directly within a React component.

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 7

A horizontal bar chart shows the populations of 30 countries in 2020, ranked by country name, with bars colored green on a white background. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Population values are formatted with `d3.format` and displayed with tick labels, while data is loaded asynchronously from a CSV via `d3.csv`.

Iindushashi.g@gmail.com
92% match
Loading thumbnail…

Activity 7

This interactive bar chart displays the population of 20 countries in 2020, sorted alphabetically along the vertical axis with population values on the horizontal axis. The visualization uses React components to render SVG elements, with D3 v5 functions like `scaleBand`, `scaleLinear`, and `format` handling the scales and number formatting. Data is loaded asynchronously from a CSV file hosted on GitHub, and hovering over a bar reveals a tooltip with the formatted population value. The chart includes labeled axes with blue tick marks and styled green bars.

MManideeprenikindi
92% match
Loading thumbnail…

Activity 7-2.1

A horizontal bar chart visualizes the 2020 populations of the top 20 countries, sourced from a GitHub CSV file. The chart uses green bars with blue tick lines and tooltips, formatted with D3's `format` API to show abbreviations in billions. Built with React and D3 v5, the visualization demonstrates ES6 module imports, including local components for axes and marks, and renders entirely as SVG elements.

Ppjdhungana@gmail.com
92% match
Loading thumbnail…

Activity 7

A horizontal bar chart displays the 2020 populations of ten countries, sorted by country name, with bars rendered as green SVG rectangles. The chart uses D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and population values to screen positions, while React components build the axes and marks. Data loads from a remote CSV file, with population values converted from thousands. Axis tick labels use D3's `format` to abbreviate large numbers, and hovering over a bar reveals a native tooltip with the formatted value.

Aakshayvenishetty1437
92% match
Loading thumbnail…

Activity 7

This bar chart displays the 2020 population for 20 countries, with horizontal green bars sorted by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and formats tick labels with `d3.format`. Data is loaded from a remote CSV via `d3.csv`, and SVG rectangles render each mark with a tooltip.

Ssaikrishnabussa
92% match
Loading thumbnail…

Activity 7 Task 1

This bar chart displays the population of twenty countries for the year 2020, with countries listed on the vertical axis and population values on the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering orange rectangles as marks via SVG. Data is loaded from a remote CSV file using D3’s `csv` function, and axis ticks are customized with a format that converts values to billions. The chart includes blue tick lines and a labeled x-axis for population.

AArun Pratap
92% match
Loading thumbnail…

Activity 7

This visualization displays the 2020 populations of 20 countries as a horizontal bar chart, using green bars sorted by country name on a blue-axis grid. Built with React and D3 v5, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `d3.csv` to load data from a GitHub-hosted dataset. The chart formats population values in billions using D3’s `format` function and includes tooltips via SVG `<title>` elements.

Bbogasamudramvamsikrishnareddy
91% match
Loading thumbnail…

Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, using D3.js scaleBand and scaleLinear to map country names and population values to SVG rectangles. The React-based visualization reads CSV data from a GitHub repository, formats axis tick labels using D3's format function to abbreviate large numbers, and includes interactive tooltips via SVG `<title>` elements. Axes are rendered with custom React components, with blue tick lines and green bars styled through CSS.

Hharsha
91% match