Fork of Activity 6_Task 1.2

100%

Fork of Activity 6_Task 1.2

✓ Published0🌍 Public

Last edited Oct 17, 2024

Created on Oct 17, 2024

This example shows a horizontal bar chart comparing the population of 20 countries in 2010, with a green bar for each country and a blue axis. The React app loads data from a CSV file via D3’s `csv` function, then uses `scaleBand` and `scaleLinear` to map the country names and population values to SVG rectangles. Axis labels are formatted with D3’s `format` function to abbreviate numbers like “1.2B”. The visualization renders entirely as SVG elements, with axis ticks and marks defined in separate ES6 modules.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of activity_6 Task1

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization is built with React and D3 (scaleBand, scaleLinear, format), rendering SVG rectangles for bars and custom axis components. Data is loaded from a CSV file via d3.csv and parsed to numeric population values.

Hhui249378@gmail.com

93% match

Loading thumbnail…

Fork of Activity 6_Task1

This horizontal bar chart displays the 2020 population for thirty countries, using green bars and blue axis lines. Built with React and D3 v5, the visualization loads data from an external CSV via the `csv()` function and renders as an SVG. The code defines custom components for axes and marks, using `scaleBand` and `scaleLinear` for positioning, with tooltips showing formatted population values.

HHarshita Vairagade

93% match

Loading thumbnail…

Fork of Activity6_task1.1

This example displays a horizontal bar chart comparing population figures for ten countries in the year 2000. The React application loads CSV data via `useData` and D3’s `csv` function, then renders SVG bars using `scaleBand` and `scaleLinear`. Axes are built with custom `AxisBottom` and `AxisLeft` components, while tooltips appear through SVG `<title>` elements using a D3 `format` tick formatter.

DDeekshitha Annreddy

93% match

Loading thumbnail…

Fork of Activity 6_Task 1

This example presents a horizontal bar chart showing population by country, with each bar’s length encoding the population value and country names on the y-axis. The chart uses React to render SVG elements, with scales and axes created via d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously from a CSV file using d3.csv, and population values are formatted using d3.format to display compact labels like billions. The visualization includes axis labels, tick marks, and styled bars with distinct colors.

Kkotagirivarshith2411@gmail.com

93% match

Loading thumbnail…

Fork of Activity8_Task1_DV

This example presents a horizontal bar chart ranking the populations of 30 countries in 2020, using green bars to encode the population values along the x-axis, with country names on the y-axis. Written in React with D3 version 5, the code defines reusable components for axes and marks, leveraging `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`. Data is loaded from a CSV file via the d3 `csv` function, and the rendering uses SVG `rect` elements. The chart includes axis labels, tick marks, and a tooltip showing abbreviated population values.

Llikithabaddam@my.unt.edu

93% match