Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

MMuhammadsaad.khan@vuw.ac.nz

Last edited May 29, 2024

Created on May 29, 2024

This interactive orthographic globe displays world COVID-19 case counts, coloring each country on a red sequential scale based on its total cases. The visualization uses d3.geoOrthographic projection with d3.geoPath to render country boundaries from a loaded GeoJSON dataset, while COVID-19 statistics come from an external CSV file. Users can drag the globe to rotate it, and a d3.timer animation continuously spins the projection. Hovering over a country reveals a tooltip showing its exact case number, and a legend shows the color-to-case-value mapping.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This interactive map displays COVID-19 total cases by country, colored on a red sequential scale. Built with D3 v7 and the `d3.geoOrthographic` projection, the map uses `d3.geoPath` to render country boundaries from GeoJSON data. Hovering highlights a country in orange and reveals a tooltip. A legend shows the color scale. The globe can be dragged to rotate, and a timer automatically spins it, recalculating the projection each frame. Case data loads from a linked CSV file.

MMuhammadsaad.khan@vuw.ac.nz

94% match

Loading thumbnail…

Fork of Spinning Globe

A spinning orthographic globe visualizes global COVID-19 case counts by country, with a sequential red color scale for intensity and a tooltip on hover. Built with D3.js (version 7.8.2) and the `d3.geoOrthographic` projection, it uses `d3.geoPath` for country outlines and `d3.timer` for continuous rotation. The choropleth map loads world geometries from a GeoJSON file and COVID-19 case data from a local CSV, while user drag interactions via `d3.drag` adjust the rotation. A legend displays the color scale range.

MMuhammadsaad.khan@vuw.ac.nz

92% match

Loading thumbnail…

Fork of Circles with D3

This interactive map shows total COVID-19 cases per country on a rotating orthographic globe. The visualization uses D3.js with `d3.geoPath` and `d3.geoOrthographic` to project world GeoJSON data, while a sequential red color scale encodes case counts loaded from a CSV file. Users can hover over countries to see exact case numbers in a tooltip, and drag or auto-rotate the globe through `d3.drag` and `d3.timer`.

MMuhammadsaad.khan@vuw.ac.nz

89% match

Loading thumbnail…

Fork of Spinning Globe with capitals

This visualization displays a rotating orthographic globe with capital cities and COVID-19 case data colored on countries. The globe automatically spins via `d3.timer` while supporting drag interaction through `d3.drag`. It uses `d3.geoOrthographic` with `geoPath` to render country boundaries, graticule lines, the equator, and Greenwich meridian. Radial gradients applied through SVG definitions create a night-side effect on the sphere. City points are sized by population using `geoPath`’s `pointRadius` method, and COVID-19 data is loaded from a CSV file.

MMuhammadsaad.khan@vuw.ac.nz

86% match

Loading thumbnail…

Fork of Covid-19

This map visualizes confirmed COVID-19 cases per country as of September 25, 2020, using a sequential color scale applied to a natural Earth projection. It loads country boundaries from the `world-atlas` TopoJSON and case data from a TSV file, then renders each country as an SVG path with a fill color derived from the case count. Hovering highlights a country in red and reveals a tooltip with total cases, deaths, and cases from the last 14 days. The implementation uses d3's `geoPath`, `scaleOrdinal`, and `schemeSpectral`, with custom zoom and interactive color legend controls.

SSaipramod Yerra

84% match

Loading thumbnail…

Fork of Covid-19

A world map uses semitransparent orange circles to show cumulative COVID-19 case counts by country on March 25, 2020. The visualization renders country boundaries as SVG paths via `d3.geoPath` with a `geoMercator` projection, and scales circle radii with `d3.scaleSqrt`. Data comes from a CSV of Johns Hopkins case counts, loaded with `d3.csv`. A range slider is present, but it does not currently change the displayed date.

Ddas888530

84% match

Loading thumbnail…

Fork of Fork of Covid-19

This visualization displays a global map of cumulative COVID-19 cases on March 25, 2020, with orange circles sized by the square-root of case counts. Static by default, it includes a date slider that currently does not update the visualization. It loads world country boundaries via TopoJSON and renders them with `d3.geoPath` using a Mercator projection, while plotting case data from a CSV file. The implementation uses `d3.csv`, `d3.scaleSqrt`, `d3.scaleOrdinal`, and `d3.timeParse` to process and encode the data.

Ddas888530

82% match

Loading thumbnail…

Fork of Covid-19 confirmed cases

This visualization displays global COVID-19 confirmed cases and deaths on a world map, using a spectral color scale to represent case counts per country. Built with React and rendered as SVG, it employs d3.geoNaturalEarth1 and d3.geoPath to project geographic boundaries from world-atlas TopoJSON, while loading case data from a TSV file. A custom color legend with circles and text labels clarifies the scale, and hovering over a country highlights it in red and shows a tooltip with its name, case count, and death toll. The map supports zooming through d3.zoom, and the color scale uses d3.scaleOrdinal with d3.schemeSpectral.

Bbhargav83

82% match