Skip to main content
SimilarExport ZIP
100%

ICE-6.js

✓ Published1🌍 Public
Jjayanthamol99
Last edited Mar 16, 2023
Created on Mar 16, 2023

This bar chart displays COVID-19 death counts by country, with a horizontal layout where each bar's length is proportional to the number of deaths. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the CSV data to an SVG canvas. A margin-based coordinate system positions the axes and cyan-filled rectangles, while the data is loaded via `d3.csv` and rendered as a static, non-interactive graphic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This bar chart displays COVID-19 deaths by country, ranking the top nations based on their reported death tolls. The visualization uses a horizontal bar layout with red rectangles, where the x-axis represents death counts and the y-axis lists country names. The code imports D3 v5 functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting that converts large numbers into abbreviated values. The data is loaded via `d3.csv` from an empty URL, so the chart renders without actual data in its current state.

NNithish Kumar
91% match
Loading thumbnail…

ICE-6

A horizontal bar chart displays total COVID-19 deaths for 20 countries, with red bars ranked by country name on the y-axis and a linear death count scale on the x-axis. It loads CSV data via `d3.csv`, parses and filters the dataset, and renders SVG rectangles sized with `scaleBand` and `scaleLinear`. The React component manages state with hooks and uses D3’s axis utilities for gridlines and tick labels.

Ssrividya-bachina
91% match
Loading thumbnail…

ICE -6 Bar Chart

This bar chart displays the total COVID-19 deaths for the top ten countries, sorted in descending order and colored with D3’s `schemeCategory10` palette. It uses an SVG rendered via D3 v7’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes added by `d3.axisBottom` and `d3.axisLeft`. A manual legend maps each country’s name to its colored rectangle. The data is loaded from a CSV file using `d3.csv`.

MM Hema
89% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 bar graph

A bar chart displays the total COVID-19 deaths for twelve countries, forming a ranked comparison of mortality. The visualization loads CSV data from a GitHub gist and renders horizontal bars using React and D3 v5. Code uses `d3.csv`, `scaleBand`, and `scaleLinear` to map country names and death counts to SVG rectangles. Axis ticks and gridlines are drawn manually with `line` and `text` elements, while the chart title appears in the HTML heading.

Cchandanagandla
88% match
Loading thumbnail…

Fork of ICE-6

This visualization displays a horizontal bar chart of the top 10 countries with the highest COVID-19 death counts, with country names on the y-axis and death totals on the x-axis. The chart uses React for component structure and D3 v5 modules including `scaleLinear`, `scaleBand`, and `csv` for data loading, rendering as SVG rectangles. Data is sourced from a public CSV file fetched asynchronously, and the bars are styled with a uniform purple fill against a dashed-border title.

Vvegurusaiprathyusha
87% match
Loading thumbnail…

Fork of ICE-6.js

This bar chart, forked from ICE-6.js, visualizes the total reported COVID-19 deaths for ten countries, with the United States showing the highest count and South Korea the lowest. The visualization uses D3 v7 to map the categorical country names to a band scale on the y-axis and the continuous death counts to a linear scale on the x-axis, rendering the bars as SVG rectangles. The chart’s axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the data is loaded from a local `data.csv` file and styled with cyan fills via CSS.

Aajaysonu
87% match
Loading thumbnail…

ICE -6

This visualization displays COVID-19 data for ten countries, using a horizontal bar chart where bar length represents each country's population based on latitude values from the CSV data source. The React application uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and renders SVG rectangles with orange stroke styling. D3's csv parser loads the external data, while d3.max computes the domain for the linear scale, and tick marks are generated programmatically with custom grid lines.

GGARIDIDEEKSHITHREDDY
86% match
Loading thumbnail…

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

This example displays a horizontal bar chart of COVID-19 death counts for 15 countries, ranked by total deaths. Built with React and D3 v5, it renders SVG marks through React components, using D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load the external dataset. The code manually draws gridlines, axis ticks, and labels, with each bar’s width mapped to the death count.

Ttejasviprasad06@gmail.com
85% match