Fork of Activity 7

100%

Fork of Activity 7

✓ Published0🌍 Public

Aakankshareddygorla@my.unt.edu

Last edited Oct 20, 2024

Created on Oct 20, 2024

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file and rendered as SVG. React components build the visualization, using `scaleBand` and `scaleLinear` from D3 v5 to map country names and population values to positions and lengths. The `Marks` component draws rectangles with tooltips, while `AxisBottom` and `AxisLeft` generate ticks and labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

MManideeprenikindi

94% match

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 shows a horizontal bar chart of 2020 population by country, with bars ordered by country name. The React component uses a D3 `csv` fetch to load the data (sliced to 30 entries) from a gist, and `scaleBand`/`scaleLinear` for positioning. The SVG rendering draws axes via custom `AxisBottom` and `AxisLeft` components, and `Marks` creates `<rect>` elements with `<title>` tooltips. Styling includes HTML/CSS for tick lines and fill colors.

FFayezuddin Mohammed Khan

94% match

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of population data for 30 countries in 2020. The visualization uses React to render an SVG with D3.js scales and axes. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a GitHub repository. Each bar is a `<rect>` element with a `<title>` tooltip showing the population value, formatted using D3's `format` function to abbreviate large numbers.

Aanisha.peddireddy@gmail.com

93% match

Loading thumbnail…

Fork of Fork of Activity-6

This horizontal bar chart displays the 2020 population estimates for 30 countries, with each bar's length proportional to its population value. Built with React and D3.js, the visualization uses reusable components for axes and marks. The `AxisBottom` component generates tick marks with formatted labels, while `AxisLeft` renders categorical labels. The `Marks` component maps each data row to a rectangle positioned by the categorical y-scale and sized by the linear x-scale, with tooltips showing the exact population via SVG `<title>` elements. Data is loaded asynchronously using D3's `csv` parser from a GitHub-hosted CSV file.

KKarnam Abinay Goud

93% match

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart comparing the populations of 30 countries in the year 2000, sorted by country name on the y-axis. The chart uses React components to render SVG rectangles via `Marks.js`, with `scaleBand` and `scaleLinear` from D3 v5 handling the axes. Data is loaded asynchronously from a CSV file using `d3.csv` inside a custom `useData` hook, and each bar includes a native SVG `<title>` element for tooltips. The axes are built with reusable `AxisBottom` and `AxisLeft` components, and tick labels are formatted with `d3.format`.

Ssriharshakondakindi@gmail.com

93% match

Loading thumbnail…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav

93% match

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the 2010 population of the top 20 countries, sorted by value. Built with React and D3 v5 (scaleBand, scaleLinear, csv, max, format), it renders marks as SVG rectangles. The chart loads data from a GitHub-hosted CSV file, with axes using custom components and a tooltip formatted with the `.2s` SI prefix.

Vvarun.mahankali39@gmail.com

93% match

Loading thumbnail…

Fork of Activity 7

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file fetched via `d3.csv`. The visualization uses D3 scales (`scaleBand`, `scaleLinear`) and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render the SVG. Horizontal bars are drawn as `<rect>` elements, with tooltip text showing formatted values using D3’s `format` function. The chart includes styled gridlines, axis labels, and a "POPULATION-2020" title, all rendered through React’s declarative component structure.

Pperamranji

93% match