Skip to main content
SimilarExport ZIP
100%

Timezones

✓ Published0🌍 Public
Mmbostock
Last edited Jul 21, 2019
Created on Feb 26, 2014

This visualization displays a world map of time zones as a dark silhouette, with hover highlighting for each zone, and overlays a graticule and white boundaries between zones. It uses the d3.geo module with a Mercator projection, geoprojecting timezone polygons from a TopoJSON file derived from a shapefile of world time zones. Interactive hover effect is achieved through CSS :hover styling, which turns the hovered zone orange and displays its IANA time zone ID as a tooltip.

AI-generated description

Timezone shapefile from Eric Muller.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Time Zones

This visualization displays a world map colored by time zone, derived from a TopoJSON file of time zone boundaries sourced from the timezone-boundary-builder project. The map is rendered using `d3.geoPath` on a projected topology, with each zone’s color corresponding to its raw UTC offset (e.g., GMT-12:00 to GMT+12:00), parsed from a CSV table containing time zone IDs, raw offsets, and DST minutes. The choropleth encoding lets viewers quickly distinguish regional clock offsets, while the underlying polygons are simplified via Mapshaper for efficient display in the browser.

CCurran Kelleher
84% match
Loading thumbnail…

Times

This example displays a world map using John Moir’s Times projection, with continents shown in dark gray and country boundaries in white. The map is rendered as an SVG, enclosed by a graticule and a spherical outline. It uses the `d3.geo.times()` projection from the extended geographic projections plugin, along with `d3.geo.path()`, `d3.geo.graticule()`, and `topojson` to convert GeoJSON world data for land and boundary layers.

Mmbostock
76% match
Loading thumbnail…

World Map hover version

This example displays an interactive world map rendered with SVG, featuring countries that change color when hovered over. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes from TopoJSON data, while country names are loaded from a TSV file. Users can pan and zoom the map using D3’s `zoom` behavior, and a CSS hover effect highlights each country in red. The map includes a blue sphere background representing the Earth’s outline.

Ddata-inside
75% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929
74% match
Loading thumbnail…

World Map interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

EEmma
74% match
Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

BBhavyaMammai
74% match
Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster
74% match
Loading thumbnail…

World map

This interactive world map displays country boundaries using a natural Earth projection, with hover tooltips showing country names and zoom/pan controls for exploration. It loads geographic data from the world-atlas TopoJSON and TSV files, then renders countries with D3’s `geoPath` and `geoNaturalEarth1`. The visualization uses `d3.zoom` for interaction and `topojson.feature` to convert TopoJSON geometry, with hover effects styled via CSS.

NNikhil Prakash
74% match