Time Zones

100%

✓ Published0🌍 Public

Last edited Sep 16, 2018

Created on Sep 16, 2018

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.

AI-generated description

A TopoJSON file of time zones, derived from https://github.com/evansiroky/timezone-boundary-builder. Simplified using Mapshaper.

CSV table from IBM - Time zone IDs that can be specified for the user.timezone property.

Similar vizzes

Loading thumbnail…

Timezones

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.

Mmbostock

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

71% match

Loading thumbnail…

SpaceTimeProject

A world map colored by each country's economy classification, with a categorical color legend showing the mapping. The visualization uses d3-geo-projection's geoNaturalEarth1 projection and d3.geoPath to render the countries, with data loaded from the World Atlas TopoJSON and TSV files. Users can pan and zoom the map via d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with the Spectral scheme, and a custom colorLegend function draws the legend.

AAndreas Möllhoff

71% match

Loading thumbnail…

World Map with Topojson data

This example displays a world map using TopoJSON data, rendering countries as blue-filled paths with pink strokes against a white spherical backdrop. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths, while the TopoJSON library’s `feature` method extracts country geometries from a remote JSON file. The visualization loads data asynchronously via `json` and appends each country path to the SVG canvas, demonstrating a straightforward choropleth-free baseline of global boundaries.

PPrathyusha0304

70% match

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

70% match

Loading thumbnail…

World Map-ICE8

A choropleth-style world map displays countries as light red filled regions with white strokes against a light blue sphere. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render geographic outlines, reading GeoJSON TopoJSON data from a GitHub gist. The `topojson` library’s `feature` function extracts country boundaries, which are then drawn as SVG paths within a 960×500 viewport.

HHarshinireddyy19

70% match

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries on a natural Earth projection, colored uniformly with a light green fill on a blue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` from d3 to generate the geographic paths from TopoJSON world data. The visualization supports zooming and panning via the custom `zoom` event, while hovering over a country turns it red. Data is loaded from the world-atlas package, which provides both TSV metadata and TopoJSON geometry.

Ccpsshan

70% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with color encoding driven by data loaded from the world-atlas TopoJSON and TSV files. The SVG rendering uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, while an ordinal color scale maps country attributes to fill colors. Interactive pan and zoom are enabled through `d3.zoom`, which transforms both the map and sphere layers. A color legend is positioned on the left side to interpret the scale.

YYoung Song

70% match