Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
Jjasthilavanya2022@gmail.com
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from Activity 7

A fork of the D3 Activity 7 example displays 2020 population estimates for 30 countries as horizontal bar charts, with a blue axis and green marks. The React app loads CSV data via `d3.csv`, uses `d3.scaleBand` and `d3.scaleLinear` to position bars, and renders SVG elements. Axes, labels, and tick formatting rely on `d3.format`; tooltips are provided by SVG `<title>` elements, and the project includes a D3 v6 tutorial video link.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7 sample

This fork of Activity 7 shows a horizontal bar chart of 2020 population estimates for 30 countries, with bars colored green on an SVG rendered through React. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate tick labels (e.g., “B” for billions). Data is loaded from a CSV file via d3.csv and transformed by multiplying the “2020” column by 1000. Axes and marks are built declaratively as React components, with a `<title>` element providing a native tooltip on each bar.

Kkrishi7079@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

LLohitha Konidena
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

LLohitha Konidena
93% 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 Activity 7

This example visualizes the 2020 population of 30 countries using a horizontal bar chart. The SVG renders through React components, with d3.scaleBand positioning countries on the y-axis and d3.scaleLinear mapping population values to bar lengths on the x-axis. Axis tick labels use d3.format with the '.2s' specifier to abbreviate values, replacing 'G' with 'B' for billions. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with each bar including a native SVG tooltip showing the formatted population value.

Ppavanbellam@my.unt.edu
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
92% match
Loading thumbnail…

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.

MManideeprenikindi
92% match
Loading thumbnail…

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.

MManideeprenikindi
92% match