Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
MMuhammadsaad.khan@vuw.ac.nz
Last edited Jun 4, 2024
Created on Jun 4, 2024
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

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.

MMuhammadsaad.khan@vuw.ac.nz
94% 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
88% 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
87% 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
87% 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
85% match
Loading thumbnail…

Fork of Covid-19

This interactive SVG map visualizes the global distribution of confirmed COVID-19 cases, total deaths, and recent 14-day case counts as of September 25, 2020. It displays countries colored by a sequential spectral scale, with hover tooltips revealing detailed statistics. The visualization uses D3.js v5, leveraging `geoPath` and `geoNaturalEarth1` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and custom zoom and color legend components. Data is loaded from TSV and TopoJSON sources, processed using `topojson` features.

SSaipramod Yerra
85% 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 Map (Positive Cases)

This map visualizes the relative number of COVID-19 cases per country, using a logarithmic color scale based on daily positive cases over the past seven days. Countries are rendered as SVG paths via `d3.geoPath`, with data loaded from TopoJSON and TSV files using `d3.json` and `d3.tsv`. It includes a Voronoi overlay constructed with `d3.Delaunay` for hover interactions, and a legend generated through a custom `colorLegend` function. The visualization is built with React and D3 v6, supporting zoom and pan.

Kkaruppuraja
84% match