nfriend/globe

A web page that displays a choropleth map on a globe, configured by data passed through the URL

globe

A web page that displays a choropleth map on a globe, configured by data passed through the URL: globe.nathanfriend.io

Examples

Disclaimer: These are just for demonstration purposes! Most of the data was generated by ChatGPT and is almost certainly full of errors.

• Population
• Average height
• Favorite color
• Annual rainfall
  • Data sourced from https://en.wikipedia.org/wiki/List_of_countries_by_average_annual_precipitation
• Hacker News traffic
  • Data sourced from https://toolhub.tech/blog/Demographics-of-Hacker-News/

Usage

To use this map, link to https://globe.nathanfriend.io with any of the URL hash parameters in the table below. Note that all hash parameter keys must be lowercase (e.g. us_color, not US_color).

For example: https://globe.nathanfriend.io/#us_color=red&us_label=This%20country%20is%20red

There are two main ways to color the map:

1. Explicit colors: specific colors are provided for each country using URL parameters like us_color=red&ca_color=blue.
2. Calculated colors: numerical values are provided for each country using URL parameters like us_value=5&ca_value=1. The map will automatically determine the color of each country based on where it falls in the range of provided values.

These options can be used together; when a country has both a _value and a _color parameter provided, the _color parameter takes precedence.

URL parameter reference

Parameter	Default	Example	Description
<two-letter country code>_color	none	us_color=red	Renders this country with the provided color. Color can be any valid CSS color (i.e. red, #ff0000, and rgba(255, 0, 0, 1) are all valid). Note that the value must be URL-encoded; for example, #ff0000 should be specified as %23ff0000.
default_color	gray	default_color=pink	The default country color.
<two-letter country code>_label	none	mx_label=Population:%20126.7%20million%20(2021)	The label text to render when the country is hovered. Special characters must be URL-encoded (for example, spaces must be specified as %20).
default_label	none	default_label=No%20data	The label text to render for countries that have no specific label text. Text must be URL-encoded. provided.
<two-letter country code>_value	none	ca_value=4.5	The numerical value to assign to this country. The map will automatically determine the country's color based on this value's relative size compared to all other provided country values.
default_value	none	default_value=1.2	The numerical value to assign to all countries that have no specific value provided.
interpolate_fn	interpolateYlOrRd	interpolate_fn=interpolateRainbow	The D3 color interpolation function to use when calculating the color of each country. (Only relevant when using the <country code>_value parameters.) See https://github.com/d3/d3-scale-chromatic for a list of all options.
background	none	background=white	A solid color to set as the background. If not provided, an image of a starry sky is used instead.
globe_style	day	globe_style=hollow	The style to use when rendering the globe. Valid options are night, day, or hollow.
hover_lift	0.02	hover_lift=0.5	How high to lift the country when hovered.

Source

This is more-or-less a copy/paste of the "Choropleth" example from globe.gl, with some additional logic to allow configuration of some properties through the URL.

Attributions

• Favicon image by macrovector on Freepik

Developing

• npm install --global http-server
• Run http-server at the root of the project