Fork of Fork of ICE-6 bar graph

100%

Fork of Fork of ICE-6 bar graph

✓ Published1🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

This example shows a horizontal bar chart ranking twelve cities by their pollution index scores from the “Healthy lifestyle city 2021” dataset, with blue bars and labeled axes. It uses React to manage state via useState and useEffect, loading data with d3.csv. The chart is rendered as an SVG, using d3.scaleBand for the y-axis city labels, d3.scaleLinear for the x-axis pollution values, and d3.max to set the domain.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE7 Pie Charts

This fork of ICE7 Pie Charts displays a horizontal bar chart ranking cities by their book counts, using data loaded from a CSV file. The visualization initially shows a loading state before rendering ten bars with a blue x-axis grid and labeled y-axis. Built with React and D3, the code employs `d3.csv` for data parsing, `scaleBand` and `scaleLinear` for positioning, and SVG elements to draw the bars and ticks.

Bblikitha

84% match

Loading thumbnail…

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

This example shows a horizontal bar chart of city temperatures, using React to render SVG marks and D3 to compute scales. It loads city data from a CSV file, slices the first 15 rows, and maps each city’s `Basic_length` value to a bar’s width. The code uses `d3.csv` for parsing, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` for domain calculation. Grid lines and axis ticks are drawn manually with SVG elements, while React’s `useEffect` and `useState` manage asynchronous data loading.

NNeeharikaGali

83% match

Loading thumbnail…

Fork of Fork of ICE6

This example displays a horizontal bar chart comparing the population of ten countries. D3.js loads the data from a remote CSV file, and React renders the visualization as SVG elements. The chart uses D3's scale functions to map data values to pixel coordinates, with axis ticks generated from the linear scale. Bars are drawn as SVG rectangles, showcasing how D3 and React can be combined for data-driven graphics.

Hharika-1929

83% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This example renders a horizontal bar chart showing 2022 accident data by city name, using React for component structure and D3 v5 for scales and axes. The code loads data from a CSV file and uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis values, with grid lines drawn via `xScale.ticks()`. SVG rectangles represent each bar, and the visualization is styled with purple grid lines and a title.

Mmanishcheruku

82% match

Loading thumbnail…

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

This visualization presents a horizontal bar chart of bestselling books information, ranking eleven items by population metrics from an external CSV dataset. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` to map categorical labels and numeric values to SVG rectangles. The code leverages React hooks (`useState`, `useEffect`) for data loading and rendering, while D3 utilities handle CSV parsing, scales, axes, and tick generation. The SVG output includes orange gridlines and labeled axes, with steelblue bars sized proportionally to each entry's population value.

AArefa Patwary

82% match

Loading thumbnail…

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

This example shows a horizontal bar chart of the ten most populous countries, using population data from 2019 loaded from a CSV file. The chart is built with React and D3 v5, rendering SVG marks for bars and text labels. It uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `csv` to parse the data, with bars colored steelblue and axis ticks drawn manually.

Bbindhureddy98

82% match

Loading thumbnail…

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

This example displays a horizontal bar chart ranking the ten most populous countries, with the heading “highest population” and bars rendered in steelblue. It loads CSV data from a GitHub gist, parses the population column, and uses React hooks (useState, useEffect) to manage asynchronous data loading. D3 v5 modules (scaleBand, scaleLinear, max, csv) compute the scales and data parsing, while React elements generate SVG rects and tick labels. The visualization demonstrates a hybrid approach where D3 handles data preparation and scales, and React handles the rendering of marks and axes.

Ddivyakota99

81% match

Loading thumbnail…

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

This visualization displays a horizontal bar chart comparing the population of the top 10 countries from a CSV file hosted on GitHub. It uses React for component structure and state management, with D3 (v5) for the scales and axes. The SVG rendering maps each country's population to a bar’s width using `d3.scaleLinear`, while `d3.scaleBand` positions the categorical labels along the y-axis. The chart includes blue x-axis gridlines and labeled ticks, presenting a clean, static comparison of the selected data.

Ssudhamshu24

81% match