Fork of Activity 7 new

Activity 7

This bar chart displays land use for food across ten food types, with horizontal bars showing values for the year 2010. The visualization uses React to render SVG elements, with scales and formatting from D3 v5. The chart reads data from a CSV file, employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, and includes axis components from local ES6 modules. Hovering reveals exact values via native SVG `<title>` tooltips.

UUmarani Vemula

91% match

Fork of Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, loaded from a CSV file. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Axes are generated with custom React components, and a tooltip using SVG `<title>` elements reveals precise values. The chart is formatted with D3's `format` function to abbreviate large numbers.

80% match

Fork of Activity 7

This bar chart displays the populations of 20 countries as horizontal bars, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` and `scaleLinear` for positioning, with population values loaded via `d3.csv` from a GitHub dataset. Axes are custom React components, and the x-axis uses `d3.format` to abbreviate tick labels from billions to "B" units.

HHemanthh81

79% match

Fork of Fork of Activity 7

This is a horizontal bar chart showing the population of 20 countries in 2020, rendered as SVG elements within a React application. The chart uses D3 version 5 scales (`d3.scaleBand` and `d3.scaleLinear`) to map country names and population values to positions and lengths. Data is loaded from a CSV file via a custom `useData` hook, with tick marks styled blue and a green fill for each bar. Tooltips display the formatted population value on hover.

Fork of Activity 7

This example shows a horizontal bar chart comparing the 2020 estimated populations of 20 countries, with each bar’s length encoded by population value and labeled along the left axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis, `scaleLinear` for the population scale, and `format('.2s')` to abbreviate tick labels (e.g., “B” for billions). Data is loaded as CSV via `csv()` from a remote GitHub URL, with numeric values multiplied by 1000, and rendered as SVG `<rect>` elements with tooltips.

SSwapna1915

Fork of Activity 7

This visualization displays a horizontal bar chart of population data for 20 countries as of 2020, sourced from a GitHub-hosted CSV file. Using d3.scaleBand and d3.scaleLinear, the chart renders as an SVG, with blue tick lines for the y-axis and a population axis formatted with d3.format to abbreviate large numbers with 'B' for billions. Rectangles serve as marks, each with a tooltip showing the exact population value via an SVG title element. The visualization integrates D3 v5 with React, using hooks like useState and useEffect to load and manage data.

Fork of Activity 7

This example visualizes population data for 20 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis, formatted in billions. The visualization reads data from a CSV file via D3’s `csv` function, applies a `scaleBand` for country categories, and a `scaleLinear` for population values. React components render SVG elements, with `AxisBottom` and `AxisLeft` generating ticks, and `Marks` producing rectangles with `<title>` tooltips. The code uses D3 v5 and React 16.9.

Fork of Activity 7