Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
Rrayavarapulokesh3@gmail.com
Last edited Oct 21, 2024
Created on Oct 20, 2024
Forked from Hello VizHub

This visualization displays a horizontal bar chart of the 2020 population for 30 countries, using a light-green fill for each bar. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes a formatted tooltip on each bar, with tick labels formatted from grams to billions using `format('.2s')`. Data is loaded from a CSV file via the `csv` function, and axes are composed from custom components that generate tick marks and labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 1

This visualization displays the population of 30 countries in 2020 as a horizontal bar chart. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file using D3’s `csv` function, and population values are multiplied by 1000. The SVG rendering uses custom React components for axes and marks, with tooltips formatted using D3’s `format` function to abbreviate large numbers (e.g., “1.23B”).

Nnikhilthoutu24@gmail.com
94% match
Loading thumbnail…

activity 6_Task1

This bar chart displays the 2020 population for 30 countries, using horizontal bars where length encodes the population value. The visualization is rendered as an SVG with React, using D3 version 5's `scaleBand` for the categorical y-axis of country names and `scaleLinear` for the numeric x-axis. Population data is loaded from a CSV file hosted on GitHub via D3's `csv` function. The axes are custom components (`AxisBottom`, `AxisLeft`), while the bars themselves are `rect` elements created in the `Marks` component.

GGanesh Gundekarla
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This visualization shows the 2020 population of 30 countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are colored a light green, with blue axis ticks and a labeled x-axis in billions. The code uses React hooks—`useState`, `useCallback` and `useEffect`—to load CSV data via `d3.csv` from a GitHub repository, then renders the chart with `d3.scaleBand` and `d3.scaleLinear` as SVG elements, formatting tick labels using `d3.format`.

Ggketan456@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, with each bar’s length representing population size and country names on the y-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, and `csv` loader to fetch and process data from a GitHub-hosted CSV. SVG rendering is driven by reusable React components for axes and marks, with axis labels and green bars styled via CSS. Tooltips appear on hover, showing the population value in a compact format (e.g., “1.2B”).

SSiva Kishore Reddy
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, ranked vertically by name with horizontal bars indicating population size. A green fill and SVG rendering make the ranking immediately readable. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, while `csv` loads data from a GitHub-hosted CSV file. Axes are custom components, and tooltips appear via SVG `<title>` elements.

Bbhargavr016@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays population figures for 30 countries in 2020, using a green rect for each country with a native SVG tooltip showing the formatted value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom `AxisBottom` and `AxisLeft` components to render ticks. Population data is loaded from a remote CSV via `d3.csv`, with values multiplied by 1000 and formatted using `d3.format`. The chart includes a labeled population axis and blue tick lines.

JJaiyaGhanta@my.unt.edu
94% match
Loading thumbnail…

activity 6_Task 1

This visualization is a horizontal bar chart comparing the 2020 populations of 30 countries, sourced from a CSV file. Population values are encoded as bar lengths on a linear scale, while countries are listed on the categorical y-axis. The chart uses D3 v5 and React, with custom SVG components for axes and marks, and it formats tick labels using D3’s `format` function to abbreviate large numbers.

Kkondaveeti.bhargavi7780@gmail.com
94% match