RamyaPutta

100%

✓ Published0🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

Forked from fork

This example displays the population of ten countries in 2019 using a horizontal bar chart rendered as SVG. It fetches CSV data via `d3.csv` and uses React hooks (`useState`, `useEffect`) to load and manage the dataset. The chart employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and custom tick rendering with grid lines and labels. Bars are drawn as green `<rect>` elements, with axes manually created using D3’s scale functions rather than `axisLeft` or `axisBottom`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

RamyaPutta

This example visualizes sales data for 10 U.S. states using a horizontal bar chart rendered as SVG. It loads a CSV file from a GitHub gist, uses `d3.csv` for data parsing and `scaleBand`/`scaleLinear` for positioning. React manages the component state and lifecycle, while D3’s `max` and `format` handle numeric scaling. The chart includes gridlines and axis labels built with custom SVG elements, with bars colored blue by default. The data updates asynchronously, showing a loading message until the CSV is fetched and processed.

RRamyapriyaPutta

87% match

Loading thumbnail…

ram

This visualization displays a horizontal bar chart of the top 10 most populous countries in India for 2019, with each bar representing the population count. The chart uses React to manage state and render SVG elements, while D3 v5 provides the scale functions (`scaleBand`, `scaleLinear`) and the `csv` method to load data from a GitHub gist. Axes are drawn manually with `.ticks()` and grid lines, and bar lengths are determined by the `xScale` mapping the maximum population value.

RRakshithaRao27

85% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 10 most populous countries in 2019 as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The visualization uses React for component rendering and D3 v5’s `csv`, `scaleBand`, and `scaleLinear` APIs to load, scale, and draw the data as SVG rectangles. Population data comes from a CSV file linked in the code, and the chart is fully rendered in the browser using React’s `useState` and `useEffect` hooks.

RRamakanth771

84% match

Loading thumbnail…

Fork of fork

This example displays a horizontal bar chart of the top 10 most populous countries, using population data from 2019 loaded via `d3.csv`. The visualization is built with React and rendered as SVG, with `d3.scaleBand` positioning the country labels and `d3.scaleLinear` mapping population values to bar widths. Grid lines and tick marks are generated manually using `xScale.ticks()`, and axes are drawn with custom SVG elements rather than D3’s axis components. The chart updates reactively when the CSV data finishes loading.

RRamyapriyaPutta

84% match

Loading thumbnail…

Ramya - ICE-6

This interactive bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Horizontal bars are ordered by country name, with population values formatted in billions along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements to render each bar. Hovering over a bar reveals a tooltip with the formatted population value.

RRamyapriyaPutta

84% match

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, with each bar labeled by country name on the y-axis and labeled numeric population values on the x-axis. The chart uses D3’s `scaleBand` and `scaleLinear` to position the bars, and SVG `<rect>` elements for the marks, with hover tooltips displaying the formatted population value. The visualization is built with React and rendered using SVG elements, with the data loaded asynchronously from a CSV file. The axes are customized with blue tick lines and formatted tick labels via D3’s `format` function.

Rramyaraomadhavareddy@gmail.com

83% match

Loading thumbnail…

Population

A horizontal bar chart displays the 2020 population of ten countries, sourced from a CSV file and rendered as SVG elements. The visualization uses React with a `useEffect` hook to fetch and parse the data via `csv`, then applies D3's `scaleBand` and `scaleLinear` for positioning. Gridlines and axis labels are generated from `xScale.ticks()`, while each country's bar length reflects its population value.

AAnmol Gupta

82% match

Loading thumbnail…

[SR] Bar Chart with React & D3

A horizontal bar chart displays the ten most populous countries in 2020, using population data loaded from a CSV file. The chart is built with React components and D3 scales, where `d3.scaleBand` positions the categorical country labels on the y-axis and `d3.scaleLinear` maps population values to bar widths. Axis ticks and labels are rendered as SVG elements using D3’s `scaleBand` and `scaleLinear` APIs, while bars include native SVG `<title>` tooltips showing formatted population values. The visualization is rendered entirely in SVG, with a clean layout defined by explicit margins and a Poppins font.

Ssuserocc

82% match