Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
Ssriharshakondakindi@gmail.com
Last edited Apr 2, 2024
Created on Apr 2, 2024
Forked from 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`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart comparing the populations of the top 10 countries in the year 2000. The visualization uses React components with D3 v5 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. Data is loaded from a CSV file using `d3.csv`, and the bars are rendered as SVG rectangles with tooltips showing formatted population values. The chart includes custom axis components for the bottom and left sides, with population values formatted using `d3.format`.

Ggoudrohit2000@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

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.

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

Fork of Activity 7

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, with each bar labeled with its country name and a tooltip displaying the formatted population value on hover. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes and data mapping. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and axis ticks are formatted using d3.format to abbreviate large numbers (e.g., 'B' for billions). The chart features custom axis components that generate tick marks and labels, with styling applied through CSS selectors.

Nnissisharon61@gmail.com
93% 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
93% match
Loading thumbnail…

Fork of Activity_6_tut-1

This example shows a horizontal bar chart comparing the population of thirty countries in 2020, with each bar representing a country and its length scaled by population. The chart uses React components to render SVG elements, with d3.v5 providing the scaleBand and scaleLinear functions to map country names and population values to pixel coordinates. The axis components generate tick marks and labels, while the Marks component draws the bars with native SVG <rect> elements. Data is loaded asynchronously from a CSV file using d3.csv and formatted with d3.format.

Ssairam.amaraneni22@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 presents a horizontal bar chart of population data for 30 countries in 2020, sorted by country name. The chart uses React to render SVG elements, with D3 scales (scaleBand and scaleLinear) and format utilities computing positions and tick labels. The graph displays axis lines and text in blue and gray, with green bars that include tooltips showing formatted population values. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization updates after the data fetch completes.

Rravularasesh3102@gmail.com
92% 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
92% match
Loading thumbnail…

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

KKritin Kesav
92% match