Skip to main content
SimilarExport ZIP
100%

Airplanes-to-heaven

✓ Published0🌍 Public
Ssriramvsharma
Last edited Apr 28, 2021
Created on Apr 28, 2021
Forked from HTML Starter

This example shows the scale of COVID-19 deaths by rendering 8,524 airplane emojis, each representing 366 people—the seating capacity of a Boeing 747—as of April 27, 2021. The plain-text data is expanded in a `for` loop in JavaScript and inserted into the DOM via `document.getElementById("root").innerHTML`. Styling uses a simple CSS grid with a centered wrapper and constrained paragraph width. The visualization relies solely on vanilla JavaScript and CSS, with no external libraries or data loading.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Airplane Crashes and Fatalities Since 1908

This example displays the raw contents of an airplane crashes and fatalities dataset, loaded from a CSV file and rendered as a JSON-formatted text preview. The visualization initially fetches the data using the Fetch API, parses it with `d3.csvParse`, and converts numeric fields to numbers. The `viz` function manages the loading state, showing a "LOADING" placeholder until the data arrives, then updates the display via a `setState` callback. The interface uses D3 v7 for DOM selection and rendering, presenting the parsed records in a simple `<pre>` element.

Sstchiang
67% match
Loading thumbnail…

TEST

Daily COVID-19 deaths by country are plotted over time on a logarithmic y-axis, with each country shown as a line. Hovering over the chart highlights the nearest line and displays a tooltip with the country, death total, and date, using a Voronoi overlay built with `d3.Delaunay`. The data comes from the Johns Hopkins Coronavirus Dataset and is smoothed with a repeated averaging blur. The React-based visualization uses D3 scales, axes, and line generators, rendering to SVG.

Zzhangwbhi
67% match
Loading thumbnail…

Voronoi Data Art

This visualization displays the global spread of COVID-19 deaths, with a logarithmic y-axis showing smoothed daily death counts for each country over time. Hovering over a curve highlights the active country and displays a tooltip with its total deaths. The implementation uses React with d3.scaleTime, d3.scaleLog, and d3.line to render SVG paths. A d3.Delaunay triangulation and d3.voronoi overlay capture mouse events across the chart, while data is loaded from the CSSEGISandData COVID-19 time-series CSV.

CCurran Kelleher
66% match
Loading thumbnail…

51) React + D3 Axes

This example shows the global cumulative death toll from the early COVID-19 pandemic as a time-series line chart, with horizontal and vertical marker lines highlighting the 10,000-death threshold and the most recent date. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate an SVG path, while custom React components render the marker lines. D3’s `axisBottom` and `select` handle the gridlines and tick labels. Data is loaded as CSV from a Johns Hopkins repository and transformed with `d3.csv` and `timeParse`.

Llefat92
65% match
Loading thumbnail…

Untitled

A scatter plot tracks COVID-19 confirmed cases against deaths on logarithmic axes, with each point representing a country and its population and regional color encoding. Overlaid dark-red lines radiate from the origin, annotating fatality rates and country labels. A circular legend explains the point size, color, and opacity encoding. The React-based D3 visualization uses `d3.axisBottom`, `d3.min`, and `d3.ticks` for axes and grid, while custom functions render the legend, annotations, and rotated fatality labels, using county-level GeoJSON data from `county.json` as a backdrop.

Pphemmati
65% match
Loading thumbnail…

Summarizing Coronavirus Data

A single number dominates the page: the total global COVID-19 deaths, calculated as of the most recent date in the Johns Hopkins time-series dataset. The visualization reduces the entire pandemic’s toll to one large, red statistic, formatted with commas. The code loads the CSV with `d3.csv`, sums the latest column of death counts using JavaScript’s `reduce`, and displays the result via React by setting `textContent` on a `<pre>` element. It uses d3’s `format` helper to add comma separators.

KKtuzinowski
65% match
Loading thumbnail…

Summarizing Data Coronavirus

This visualization summarizes global COVID-19 death data by displaying a single large number: the total deaths on the most recent date in the dataset. It loads an archived time series CSV from the CSSEGISandData GitHub repository using `d3.csv`, then uses React’s `useState` and `useEffect` to fetch and store the data. A `reduce` operation sums the values from the last date column, and `d3.format` adds comma separators for readability. The final message, including the date, renders in large red text via a `pre` element.

Nn.koldovsky@gmail.com
65% match
Loading thumbnail…

Coronavirus 1,000,000 line React + D3 Axis

This chart tracks cumulative COVID-19 deaths worldwide over time, using a single bold red line to show the total rising toward one million. The visualization combines React components with D3 scales and axes, including a horizontal marker line at the 1,000,000-death threshold and a vertical “now” marker at the most recent date. Data comes from the Johns Hopkins CSSE time-series CSV, transformed by d3.csv and d3.timeParse, while d3.axisBottom renders the time axis with grid lines.

AAndre J Denais
65% match