Fork of Circles with D3

100%

Fork of Circles with D3

✓ Published0🌍 Public

MMuhammadsaad.khan@vuw.ac.nz

Last edited Jun 4, 2024

Created on Jun 4, 2024

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles on a map

This visualization displays total COVID-19 cases by country as of August 30, 2020, using red circles sized with d3.scaleSqrt and positioned via d3.geoCentroid and d3.geoNaturalEarth1 projection. The map employs d3.geoPath for country outlines and includes interactive zoom via d3.zoom. A color legend and size legend are rendered as SVG components using React, with data loaded from a CSV time series and TopoJSON world atlas. Hovering reveals country names and case counts through SVG title elements.

JJean David

91% match

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

89% match

Loading thumbnail…

Fork of Circles with D3

Two synchronized world maps animate COVID-19 new cases per 100,000 people and vaccination rates over time, using sequential red and green color scales to encode values. Each map includes a play button and slider to scrub through dated records, with the choropleth paths colored from CSV data. The visualization uses D3.js version 3 with `d3.geoNaturalEarth2`, `d3.geo.path` for map projection, TopoJSON from the world-atlas package, and ISO country code mappings to join the data.

SSaipramod Yerra

89% match

Loading thumbnail…

Fork of Circles on a map

This example displays the total COVID-19 cases per country as of August 30, 2020, using circles sized by a d3.scaleSqrt on a world map. The map is rendered with d3.geoPath and a geoNaturalEarth1 projection, while country boundaries come from TopoJSON world-atlas data. Hovering highlights countries, and a size legend with a color legend—built via custom legend components—explains the scaling. The visualization supports zooming and panning through d3.zoom, with SVG circles positioned using d3.geoCentroid and the projection.

TTacue

89% 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

88% match

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

88% match

Loading thumbnail…

Circles on a Map

A time-series slider animates the spread of COVID-19 cases across a world map. Red circles, sized with `d3.scaleSqrt` according to confirmed case counts for each date, are positioned using the `d3.geoNaturalEarth1` projection. The visualization uses a slider built with `d3.drag` to scrub through dates, updating circle radii and tooltips. Country boundaries and hover states are rendered with `d3.geoPath`, with data loaded from a CSV of confirmed cases.

HHeechan lee

85% match

Loading thumbnail…

Circles on a map

This visualization displays confirmed COVID-19 cases per country on a world map, using a natural Earth projection from the topojson library. The map shows circles sized by the square root of case numbers, with a legend explaining the scaling. It uses d3.select, d3.geoPath, and d3.scaleSqrt for rendering, and supports interactive zooming. Data is loaded from a CSV file, and the map is rendered as SVG with hover tooltips showing country names and case counts.

EElena Dreosti

85% match