Geovisualization:

Maps
GEOVISUALIZATION: MAPS
Geovisualization

 Geovisualization (short for geographic visualization),

refers to a set of tools and techniques supporting the
analysis of geospatial data through the use of interactive
visualization.
 Geospatial: define the collective data has a geographic or
locational component.

Wiki
Geospatial Data Visualization

 Visualizing geospatial data

helps us communicate how
different data relate to
geographical locations by
rendering over the maps.
 Old tradition. Used since 17th
century!
 Google map is a
geovisualization tool
 renders travel path, traffic
information and other relevant
information over the maps.

John Snow and the Broad Street water pump

Geospatial Data Visualization

 Data Variable:
 categorical-nominal (independent variable)
 quantitative (dependent variable), Categorical
 visual variable:
 Color-saturation, color-hue, position, size.
Types of Map

 General Reference Maps (sometimes called planimetric maps)

 Topographic Maps
 Thematic
 Navigation Charts
 Cadastral Maps and Plans

https://www.icsm.gov.au/education/fundamentals-
mapping
Types of Map

 General Reference Maps (sometimes called planimetric maps)

 Examples: Street and tourist maps
 Shows important physical (natural and man–made) features in an
area. Their main purpose is to summarize the landscape to aid
discovery of locations.
 Topographic Maps
 Thematic
 Navigation Charts
 Cadastral Maps and Plans

https://www.icsm.gov.au/education/fundamentals-
mapping
Types of Map

 General Reference Maps (sometimes called planimetric maps)

 Topographic Maps
 (Topography is the study of the shape and features of land surfaces.)
 For example: Extend General Reference Maps by adding elevation in
detail.
 Thematic
 Navigation Charts
 Cadastral Maps and Plans

https://www.icsm.gov.au/education/fundamentals-
mapping
Types of Map

 General Reference (sometimes called planimetric maps)

 Topographic Maps
 Thematic
 maps which depict information on a particular topic or theme
 Ex: Weather, population density and geology maps
 Navigation Charts
 Cadastral Maps and Plans

https://www.icsm.gov.au/education/fundamentals-
mapping
Thematic Map example
Confirmed cases of coronavirus disease (COVID-19)

https://google.org/crisisresponse/covid19-map?hl=en
Thematic Map example

xperience.arcgis.com/experience/96dd742462124fa0b38ddedb9b25e429
Types of Map

 General Reference Maps (sometimes called planimetric maps)

 Topographic Maps
 Thematic
 Navigation Charts
 are produced as navigation aids for vehicle, ships, boats and aircraft.
 combine aspects of topographic, general reference and thematic
maps.
 Jargon: For the land they are called maps and for the sea/ocean they
are called charts.
 Cadastral Maps and Plans

https://www.icsm.gov.au/education/fundamentals-
mapping
Types of Map

 General Reference Maps (sometimes called planimetric maps)

 Topographic Maps
 Thematic
 Navigation Charts
 Cadastral Maps and Plans
 Cadastre of a country is its register of property titles and is usually
managed by government agencies (s.a. land title office)
 cadastral plan (or survey plan) is produced by a registered Ú licensed
surveyor who accurately measures and records the boundaries of each
property.
 Cadastral maps are produced by joining together individual cadastral
plans.
https://www.icsm.gov.au/education/fundamentals-
mapping
Types of Map

 General Reference (sometimes called planimetric maps)

 Topographic Maps
 Thematic
 maps which depict information on a particular topic or theme
 Ex: Weather, population density and geology maps
 Navigation Charts
 Cadastral Maps and Plans

https://www.icsm.gov.au/education/fundamentals-
mapping
Geovisualizaton

 Geographic Visualization, requires

 Requires geographical data
 Location, boundary, area
 Data dependent on the geographical data
Geovisualization: Choropleth

 Choropleth maps represent data

using different colors or shading
patterns for different regions. Each
color or shading pattern
corresponds to a different value or
range of values that a variable
can take.
Geovisualization: Choropleth
Anatomy

 Very popular way to visualise

quantitative values over a
geographical area, which can
show variation across the
displayed location.

https://datavizcatalogue.com/methods/
choropleth.html
Geopandas plot
Via a plugin carto

gdf.plot(
column='Count’,
cmap='YlOrRd’,
linewidth=0.8,
edgecolor='0',
legend=True,
markersize=[39.739192, -104.990337],
legend_kwds={'label’:
"Number of landslides“
}
)
https://www.bloomberg
.com/news/articles/201
9-02-24/spain-tops-italy-
as-world-s-healthiest-
nation-while-u-s-slips
Geovisualization: Choropleth

 Perceptual limitations.
 can't accurately read or compare
values from the map.
 uses area to encode values. So
large areas with low density (such
as the state of Nevada) are
overrepresented visually

2020 Unemployment statistics:

https://www.bls.gov/lau/tables.htm
Geovisualization: Choropleth

 Perceptual limitations.
 can't accurately read or compare
values from the map.
 uses area to encode values. So
large areas with low density (such
as the state of Nevada) are
overrepresented visually

https://www.270towin.com/maps/sabatos-crystal-ball-2020-president
Geovisualization: Bubble Map

 Bubbles/circles are displayed over

a designated geographical region
with the area of the circle
proportional to its value in the
dataset.

Bubble map of
Coronavirus
cases

www.cnn.com
Geovisualization: Bubble Map
Anatomy of Bubble Map

 Pro: Bubble Maps are good for

comparing proportions over
geographic regions without the
issues caused by regional area
size.

https://datavizcatalogue.com/methods/bubble_map.html
Geovisualization: Bubble Map

 Bubble maps can represent two dependent variables — one by

varying the size of the bubble and one by varying the color —
simultaneously in a single visualization.

https://www.nytimes.com/interactive/2016/11/01/upshot/many-ways-to-map-election-results.html
Geovisualization: Bubble Map

 Note: Overly large bubbles can overlap other bubbles and regions
on the map, so this needs to be accounted for.
Geovisualization: Dot Map

 A dot map (also called dot

density map or Scatter map)
uses a dot to indicate the
presence of a variable.
 Dot maps are useful for
showing spatial patterns.
 Note: Equal sized points

https://www.e-education.psu.edu/natureofgeoinfo/sites/www.e-education.psu.edu.natureofgeoinfo/files/image/hisp_dots.gif
Dot Density Map

 Popular visualization technique

since long.
 ex: 18th century population map
by département (administrative
district) in France.
 Potential alternatives:
 choropleth maps, cartograms
Dot Density Map

 Two Basic Types

 One-to-One: One dot represents one entity
 One-to-Many: one dot stands for a number of things or a value (e.g., 1
dot = 1,000 acres of wheat production).
 must be drawn on an equal area map projection. This is critical —
using a map projection which does not preserve the size of areas will
distort the perceived density of the dots.
 Albers Equal Area Conic, and Cylindrical Equal Area are all good
choices

http://axismaps.github.io/thematic-cartography/articles/dot_density.html
Dot Density Map

 Example:
 Earthquake map in north western part
of US.
 Disadvantage:
 Difficult to estimate numbers from the
map
 most dot density maps distribute
dots randomly, so precise locations
of the phenomenon is not exact.

scattermapbox: https://plotly.com/javascript/mapbox-layers/
Geovisualization: Hexbin Map

 Hexbin Map allows you to divide up

space in the map into bins and then
encode information about the data
that falls within each particular bin.
 Each region is represented equally!
 May or may not be used over the
actual map
 The hexagon is a preferred shape
because it is close to a circle but,
unlike a circle, you can form
continuous grids with hexagons.

https://www.r-graph-gallery.com/328-hexbin-m
 Geovisualization: Heat Map

 Heat maps are useful when you have to represent large sets of
continuous data on a map using a color spectrum (usually red-to-
blue or red-to-green).
 A heat map is different from a chloropleth map in that the colors in
a heat map may not correspond to geographical boundaries.

densitymapbox: https://plotly.com/javascript/mapbox-
density-heatmaps/
 Geovisualization: Connection Map

 Shows Geographical Relationship

Plotly line_geo

https://datavizcatalogue.com/methods/connection_map.html
 Geovisualization: Cartogram

 The geometry or space of the map is distorted in order to convey

the information of data variable. The distortion is in proportion to the
mapping variable. [Wiki]

Polulation
estimate
in 2100

http://metrocosm.com/how-to-make-
cartograms-with-animation/
Geovisualization: Cartogram

Source: https://realitycheck.wordpress.com/2006/11/01/the-india-social-cartogram-project-maps/
https://www.weforum.org/agenda/2018/09/this-fascinating-world-map-
was-drawn-based-on-country-populations/
Geovisualization: Cartogram

https://www.weforum.org/agenda/2018/09/this-fascinating-world-map-
was-drawn-based-on-country-populations/
/
Geovisualization: Cartogram

 Cartogram overcomes the limitations of other forms of

geovisualization in that it represents the mapping data variable to
the geographical area.
 Cartograms must be used with care because knowledge of the
actual land area is essential for the reader to make sense of the
distorted version shown in the cartogram.
 It is a good practice to show the actual map before introducing the
cartogram.
 see more:
 https://worldmapper.org/
 Noncontiguous Area Cartogram

 Shape Preserving:
 Ex: “How much is your vote
worth” map from NY-Times.
(Nov 2008]
 This map shows each state re-
sized in proportion to the
relative influence of the
individual voters who live
there. The numbers indicate
the total delegates to the
Electoral College from each
state, and how many eligible
voters a single delegate from
each state represents.

https://archive.nytimes.com/www.nytimes.com/interactive/2008/11/02/opini
on/20081102_OPCHART.html?_r=1
Noncontiguous Area Cartogram

 Dorling Cartogram
 Replaces shape by circles
 Circles are distributed to
represent original topology
 See
https://www.jasondavies.com/
maps/dorling-world/

ex: Carbon Footprint

http://image.guardian.co.uk/sys-files/Guardian/documents/2011/02/10/CarbonWeb.pdf
https://en.wikipedia.org/wiki/Danny_Dorling
Noncontiguous Area Cartogram

 Demers cartogram
 a variation of Dorling cartogram,
but it uses rectangles instead of
circles, and attempts to retain
visual cues at the expense of
minimum distance. [Wiki]
 Ex: NY Times 2012: Building a path
victory.
 d3 Examples:
https://bl.ocks.org/cmgiven/9d6bc
46cf586738458c13dd2b5dadd84

https://www.nytimes.com/elections/2012/ratings/electoral-map.html
(recap) Choropleth

 Choropleth maps represent data

using different colors or shading
patterns for different regions. Each
color or shading pattern
corresponds to a different value or
range of values that a variable
can take.

https://en.wikipedia.org/wiki/2020_coronavirus_pandemic_in_the_United
_States
(recap) Bubble Map

 Note: Overly large

bubbles can overlap
other bubbles and
regions on the map, so
this needs to be
accounted for.
Geovisualization: Dot Map

 A dot map (also called dot

density map or Scatter map)
uses a dot to indicate the
presence of a variable.
 Dot maps are useful for
showing spatial patterns.
 Note: Equal sized points

https://www.e-education.psu.edu/natureofgeoinfo/sites/www.e-education.psu.edu.natureofgeoinfo/files/image/hisp_dots.gif
Dot Density Map

 Popular visualization technique

since long.
 ex: 18th century population map
by département (administrative
district) in France.
 Potential alternatives:
 choropleth maps, cartograms
Dot Density Map

 Two Basic Types

 One-to-One: One dot represents one entity
 One-to-Many: one dot stands for a number of things or a value (e.g., 1
dot = 1,000 acres of wheat production).
 must be drawn on an equal area map projection. This is critical —
using a map projection which does not preserve the size of areas will
distort the perceived density of the dots.
 Albers Equal Area Conic, and Cylindrical Equal Area are all good
choices

http://axismaps.github.io/thematic-cartography/articles/dot_density.html
Dot Density Map

 Example:
 Earthquake map in north western part
of US.
 Disadvantage:
 Difficult to estimate numbers from the
map
 most dot density maps distribute
dots randomly, so precise locations
of the phenomenon is not exact.

scattermapbox: https://plotly.com/javascript/mapbox-layers/
Geovisualization: Hexbin Map

 Hexbin Map allows you to divide up

space in the map into bins and then
encode information about the data
that falls within each particular bin.
 Each region is represented equally!
 May or may not be used over the
actual map
 The hexagon is a preferred shape
because it is close to a circle but,
unlike a circle, you can form
continuous grids with hexagons.

https://www.r-graph-gallery.com/328-hexbin-m
 Geovisualization: Heat Map

 Heat maps are useful when you have to represent large sets of
continuous data on a map using a color spectrum (usually red-to-
blue or red-to-green).
 A heat map is different from a chloropleth map in that the colors in
a heat map may not correspond to geographical boundaries.

densitymapbox: https://plotly.com/javascript/mapbox-
density-heatmaps/
 Geovisualization: Connection Map

 Shows Geographical Relationship

Plotly line_geo

https://datavizcatalogue.com/methods/connection_map.html
 Geovisualization: Cartogram

 The geometry or space of the map is distorted in order to convey

the information of data variable. The distortion is in proportion to the
mapping variable. [Wiki]

Polulation
estimate
in 2100

http://metrocosm.com/how-to-make-
cartograms-with-animation/
Geovisualization: Cartogram

Source: https://realitycheck.wordpress.com/2006/11/01/the-india-social-cartogram-project-maps/
https://www.weforum.org/agenda/2018/09/this-fascinating-world-map-
was-drawn-based-on-country-populations/
Geovisualization: Cartogram

https://www.weforum.org/agenda/2018/09/this-fascinating-world-map-
was-drawn-based-on-country-populations/
/
Geovisualization: Cartogram

 Cartogram overcomes the limitations of other forms of

geovisualization in that it represents the mapping data variable to
the geographical area.
 Cartograms must be used with care because knowledge of the
actual land area is essential for the reader to make sense of the
distorted version shown in the cartogram.
 It is a good practice to show the actual map before introducing the
cartogram.
 see more:
 https://worldmapper.org/
 Noncontiguous Area Cartogram

 Shape Preserving:
 Ex: “How much is your vote
worth” map from NY-Times.
(Nov 2008]
 This map shows each state re-
sized in proportion to the
relative influence of the
individual voters who live
there. The numbers indicate
the total delegates to the
Electoral College from each
state, and how many eligible
voters a single delegate from
each state represents.

https://archive.nytimes.com/www.nytimes.com/interactive/2008/11/02/opini
on/20081102_OPCHART.html?_r=1
Noncontiguous Area Cartogram

 Dorling Cartogram
 Replaces shape by circles
 Circles are distributed to
represent original topology
 See
https://www.jasondavies.com/
maps/dorling-world/

ex: Carbon Footprint

http://image.guardian.co.uk/sys-files/Guardian/documents/2011/02/10/CarbonWeb.pdf
https://en.wikipedia.org/wiki/Danny_Dorling
Noncontiguous Area Cartogram

 Demers cartogram
 a variation of Dorling cartogram,
but it uses rectangles instead of
circles, and attempts to retain
visual cues at the expense of
minimum distance. [Wiki]
 Ex: NY Times 2012: Building a path
victory.
 d3 Examples:
https://bl.ocks.org/cmgiven/9d6bc
46cf586738458c13dd2b5dadd84

https://www.nytimes.com/elections/2012/ratings/electoral-map.html
Geovisualization: Part 2
GEO-COORDINATES, GEOPROJECTIONS, GEOJSON
Geo Coordinate System

 To represents actual locations on Earth we need

two pieces of information:
 the coordinates of the object and
 a system of reference for how the coordinates
relate to a physical location on Earth.
 Reference Coordinate System:
 the reference system used in GPS
 Based on the fact that the Earth is round and an
international agreements Ú convention for recording
locations on the surface of the Earth.

https://www.latlong.net/
Latitude, Longitude

https://www.britannica.com/science/latitude
Geo Coordinate System

 Coordinates(long,lat): Longitude, Latitude

 The "latitude" of a point is the angle between the
equatorial plane and the straight line that passes
through that point and through the center of the Equator (0)
Earth. (+/- = North/South)

https://www.latlong.net/
Latitude
Lines of Latitude

https://www.britannica.com/science/latitude
Geo Coordinate System

 (long,lat): Longitude, Latitude

 Based on the general agreement that the Earth is
round and a series of international agreements Ú
conventions for recording locations on the surface of
the Earth.
Equator (0)
 The "latitude" of a point is the angle between the
equatorial plane and the straight line that passes
through that point and through the center of the Earth.
(+/- = North/South)
 The "longitude" of a point on Earth's surface is the angle
east or west of a reference meridian to another
meridian that passes through that point. (+/ - =
East/West
 The origin/zero point of this system is located in the Gulf
of Guinea about 625 km (390 mi) south Prime Meridian (0)
of Tema, Ghana

https://www.latlong.net/
Longitude
Latitude and Longitude

 The combination of meridians of

longitude and parallels of latitude
establishes a framework or grid by
means of which exact positions
can be determined in reference
to the prime meridian and the
Equator:
 a point described as 40° N, 30° W,
for example, is located 40° of arc
north of the Equator and 30° of arc
west of the Greenwich meridian.

UCF: 28.6024° N, 81.2001° W https://www.britannica.com/science/latitude

Graticule

 The grid formed by lines of latitude

and longitude.
Map Projections

 Problem: See slices made by parallel

Parallels Meridians

https://mgimond.github.io/Spatial/coordinate-systems.html
Map Projections

 The process of Flattering Earth is Map Projection.

 Projections transform spherical polygonal geometry to planar polygonal geometry.

 Orange Peel Problem: Can not flatten orange without tearing, squashing or
stretching.
 Flattening the Earth for a map projection, introduces distortion
 shape, distance, direction, or land area
https://en.wikipedia.org/wiki/List_of_map_projections
Map Projections

 Mathematically a map projection is a systematic transformation of

the latitudes and longitudes of locations from the surface of
a sphere or an ellipsoid into locations on a plane.
Longitude and Latitude as X,Y Coordinates
Map Projection: Distortion measure

 The classic way of showing the

distortion inherent in a projection is to
use Tissot's indicatrix (or Tissot’s
ellipse).
 Nicolas Tissot (19th century French
Cartographer) noted that the scale factors
at a point on a map projection, specified
by the numbers h and k, define an ellipse
at that point.
Mercator

 Most popular: Mercator

Created by Flemish
cartographer Gerardus
Mercator in 1569 – a
time when Antarctica
hadn’t even been
discovered.
Mercator Projections

 Distortions: Wiki

• Greenland is roughly the same size as Africa. In reality, Africa is

almost 14 times larger, and Greenland can fit inside China no less
than four times.
• The map also suggests that Scandinavian countries are larger
than India, whereas, India is actually three times the size.
 And yet, Google Maps, Bing, Yahoo, OpenStreetMaps
use a version of Mercator (webMercator) to display the
world.
Mercator Projections

 Distortions: Wiki

• Greenland is roughly the same size as Africa. In reality, Africa is

almost 14 times larger, and Greenland can fit inside China no less
than four times.
• The map also suggests that Scandinavian countries are larger
than India, whereas, India is actually three times the size.
 And yet, Google Maps, Bing, Yahoo, OpenStreetMaps
use a version of Mercator (webMercator) to display the
world.
Mercator Projections

 By construction, the Mercator

projection is perfectly accurate
along the equator and
nowhere else.
 Therefore, the Mercator
projection is adequate for
mapping countries close to the
equator.
Gall-Peters Map

 Preserves all areas: Mapped areas

all have the correct sizes relative to
each other. It achieves this goal by
distorting most shapes.
 Due to James Gall (British
Clergyman, 1855) and Arno Peters
(Germal Filmmaker and Journalist,
1973

Wiki
Gall-Peters Map

 Preserves all areas: Map areas all have

the correct sizes relative to each other.
 Due to James Gall (British Clergyman,
1855) and Arno Peters (German
Filmmaker and Journalist, 1973)

Controversy: Peters argued that by

enlarging Europe and North
America, Mercator maps were
giving white nations a sense of
supremacy over non-white nations.

Wiki
Gall-Peters Map

 Preserves all areas: Map areas all have the correct sizes relative to
each other.
 Due to James Gall (British Clergyman, 1855) and Arno Peters
(Germal Filmmaker and Journalist, 1973

Controversry: Peters argued that by

enlarging Europe and North America,
Mercator maps were giving white nations a
sense of supremacy over non-white nations.
Promoted by UNESCO.
Widely used by British schools.

Boston Public Schools began phasing in

these maps in March 2017, becoming the
first public school district in the United
States to adopt Gall–Peters maps as their
standard. Wiki
Gall-Peters Map

 Distortions:
 Area may be right but shapes
are not.
Winkel-Tripel Map

 Proposed by German
cartographer Oswald Winkel in
1921.
 Attempts to minimize three major
types of distortion – area,
direction, and distance. (Triple or
Tripel in Germany)
 National Geographic Society
adopted the Winkel tripel map in
1998. Many US schools have
followed suit.
Winket-Tripel Map

Distortion
 Does not preserve angle.
 The map doesn’t preserve angles,
so can not replace Mercator for
navigation purposes.
Albers Map

 Equal area projection.

 Distortions are minimal over
latitude ranges of US.
 used by the United States
Geological Survey and
the United States Census Bureau.
 Most of the maps in the National
Atlas of the United States use the
Albers projection.
Albers Maps

 Distortions:
 In general: scale and shape
are not preserved
Principles of Map Projections

 General Principle of mapping

 Earth is mapped on to developable surface:
 A surface that can be unfolded or unrolled into a plane or sheet without
stretching, tearing or shrinking is called a developable surface.
 Cylinder, Cone and Plane are all developable surfaces.
 Followed by unrolling the developable surface.
Projections

 Conic: Conic projections project the sphere onto a cone, and then unroll the
cone onto the plane.
 Cylindrical: Cylindrical projections project the sphere onto a containing
cylinder, and then unroll the cylinder onto the plane. Pseudocylindrical
projections are a generalization of cylindrical projections.
 Azimuthal or Planar Projection: rays radiating from a point intercept the globe
onto a plane at various angles. Depending on the location of the ray originating
point we get different projection:
 Gnomonic: The ray originating point is at the center of the globe.
 Stereographic: The ray originating point is at the pole.
 Orthographic: The ray originating point is infinitely far away. So the orthographic
projection maps each point on the earth to the closest point on the plane.
 Composite: Composite consist of several projections that are composed into a
single display.
Cylindrical Map Projections

 Earth is projected onto a cylinder wrapped around the globe. The

cylinder is then cut lengthwise and unwrapped to form a flat map:

Ex: Mercator, Transverse

Mercator, Oblique
secant
Mercator, Gall–Peters
are derived from Cylindrical
Map projections. tangent

http://geokov.com/education/map-projection.aspx
Cylindrical map projections

 ex: Mercator
 Used for wall maps even though it
inflates the Arctic.
 Used by navigators and even
Google Maps use the Mercator
projections
 it’s all because of the unique
properties of cylinders and north
always facing up.
Cylindrical Projection
Cylindrical Map Projections

Ex: Mercator, Transverse

Mercator, Oblique
Mercator, Gall–Peters
are derived from Cylindrical
Map projections.

http://geokov.com/education/map-projection.aspx
Conic Map Projections

 Earth is projected onto a cone wrapped around the globe. The

cone is then cut lengthwise and unwrapped to form a flat map:

Ex: Albers, Lambert

conformal conic projection

http://geokov.com/education/map-projection.aspx
 Conic Map projection

 Distortion is minimized along the

tangent or secant lines and
increases as the distance from
these lines increases.
 well-suited for mapping long
east-west regions because
distortion is constant along
common parallels.
 When distance or area
measurements are needed for
the contiguous 48 states, use
one of the conical projections
such as Equidistant Conic
(distance preserving) or Albers
Equal Area Conic (area
preserving).
Planar Projections

 Earth is projected directly onto a plane. Also called Azimuthal or Zenithal

 Perspective: Gnomonic, Stereographic
 Orthographic
Tangent
plane

See Also:
https://gisgeography.com/azimuthal-projection-
https://mgimond.github.io/Spatial/coordinate-systems.html
orthographic-stereographic-gnomonic/
Planar Projections

Orthographic
 The resulting map from this
projection looks like to seeing
Earth from deep space.
 All the projection lines are
orthogonal to the projection
plane.
 Distortions:
 There is great distortion
Orthographic projection
towards the borders of the
map.
https://gisgeography.com/azimuthal-projection-orthographic-
stereographic-gnomonic/
Planar Projections

Perspective
 They can be visualized as projection of points on the sphere to the
plane by shining rays of light from a light source (or point of
perspective).
 Light source can be emitted from different positions giving different
azimuthal map projections.
 ex: Gnomonic:
Planar Projections

Perspective: Gnomonic Projection

 Light source may be thought as if
located at the sphere center.
 Distortions:
 The Gnomonic projection
isn’t equal area, equidistant as
distortion of these two properties
increase away from the center
point.
 You should avoid using the
Gnomonic projection for
measuring distances.
 However, it’s particularly useful for Gnomonic Projection © USGS
navigation as straight line drawn
on the map is on a great circle

https://gisgeography.com/azimuthal-projection-orthographic-stereographic-gnomonic/
Planar Projections

Perspective: Stereographic
 The light source may be through of
as if placed at the opposite end
where the tangent plane touches
the reference globe.
 This map projection is also
commonly used for navigation
maps because of it preserves
shapes (conformal).
 it’s been used to map large
continents or oceans including the Stereographic projection
Arctic and Antarctic.

http://geokov.com/education/map-projection.aspx
GeoJSON

An open standard format designed for representing simple

geographical features, along with their non-spatial attributes.
 Differs from other GIS standards in that it was written and is
maintained not by a formal standards organization, but by an
Internet working group of developers
 GeoJSON format working group formed in March 2007 and the
format specification was finalized in June 2008.
 In April 2015 the Internet Engineering Task Force founded
the Geographic JSON working group which released GeoJSON
as RFC 7946 in August 2016.

Wiki
GeoJSON

 Designed to represent Simple Geographical

Features
(https://en.wikipedia.org/wiki/Simple_Features)
 Reference:
 http://geojson.org/
 https://en.wikipedia.org/wiki/GeoJSON
 https://datatracker.ietf.org/doc/html/rfc7946
 Nice Tutorial:
 https://macwright.com/2015/03/23/geojson-second-
bite.html
GeoJSON

Contents:
 Geographical Features:
 points (addresses and locations),
 line strings (streets, highways and boundaries),
 polygons (countries, provinces, tracts of land), and
 multi-part collections of these types.
 Non-Geographical Features:
 identification, …
 non-standard: Mobile coverage, navigation app service coverage etc..
GeoJSON: Features
Features are combination of geometry and properties.

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"name": "null island“
}
}
GeoJSON: Position

 2D Coordinates: [longitude, latitude]

or
 3D Coordinates: [longitude, latitude, elevation]

Latitude and Longitude are the units that represent

the coordinates at geographic coordinate system.

Wiki
GeoJSON: Geometry

 Point:  Polygon:
{ {
"type": "Point", "type": "Polygon",
"coordinates": [30, 10] "coordinates": [
} [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
 LineString: ]
{ }
"type": "LineString",
"coordinates": [ {
[30, 10], [10, 30], [40, 40] "type": "Polygon",
] "coordinates": [
} [[35, 10], [45, 45], [15, 40], [10, 20], [35, 10]],
[[20, 30], [35, 35], [30, 20], [20, 30]]
]
}
GeoJSON : Geometry

 MultiPoint:  MultiPolygon:
{ {
"type": "MultiPoint", "type": "MultiPolygon",
"coordinates": [ "coordinates": [
[10, 40], [40, 30], [20, 20], [30, 10] [
] [[30, 20], [45, 40], [10, 40], [30, 20]]
} ],
 MultiLineString: [
{ [[15, 5], [40, 10], [10, 20], [5, 10], [15, 5]]
"type": "MultiLineString", ]
"coordinates": [ ]
[[10, 10], [20, 20], [10, 40]], }
[[40, 40], [30, 30], [40, 20], [30, 10]]
]
}
GeoJSON: Features
Features are combination of geometry and properties.

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"name": "null island“
}
}
GeoJSON: Features
Features are combination of geometry and properties.

{
"type": "Feature",
"geometry": {
"type": "GeometryCollection",
"geometries": [{
"type": "Point",
"coordinates": [0, 0]
}, {
"type": "LineString",
"coordinates": [[0, 0], [1, 0]]
}]
},…
GeoJSON: Features
Features are combination of geometry and properties.

{
"type": "Feature",
"geometry": {
"type": "GeometryCollection",
"geometries": [{
"type": "Point",
"coordinates": [0, 0]
}, {
"type": "LineString",
"coordinates": [[0, 0], [1, 0]]
}]
},…
GeoJSON example
FeatureCollection Array of Features, is the most common thing you’ll
see at the top level of GeoJSON files in the field.
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "value0"
}
}, …
GeoJSON example

{ "type": "FeatureCollection", {"type": "LineString",

"features": [ "coordinates": [[102.0, 0.0], [103.0,
1.0], [104.0, 0.0], [105.0, 1.0]]}
{ "type": "Feature",
{"type": "Polygon",
"geometry": {
"coordinates": [[ [100.0, 0.0], [101.0,
"type": "Point",
0.0], [101.0, 1.0], [100.0, 1.0], [100.0,
"coordinates": [102.0, 0.5] 0.0] ] ]}
}, { "type": "MultiPoint",
"properties": { "coordinates": [[10, 40], [40, 30], [20,
"prop0": "value0" 20], [30, 10]]}

}
}, …
]} Features are combination of geometry and properties. Position: [longitude, latitude[, elevation]]
Sample DataSet

 https://catalog.data.gov/dataset?res_format=GeoJSON
 https://ec.europa.eu/eurostat/web/gisco/geodata/reference-
data/administrative-units-statistical-units/countries
Plotly Express Projections

 Cylindrical: 'equirectangular', 'mercator', 'natural earth’,

 Conic: 'conic equal area', 'conic conformal', 'conic
equidistant’, ‘albers’
 Azimuthal: 'azimuthal equal area', 'azimuthal equidistant’
 Orthographic: 'orthographic’
 Composite: 'albers usa'

See: https://plotly.com/python/map-configuration/#map-projections
Network/Graph, and
Hierarchy Visualization
Graph Layout
Layouts

 Graph Layout
 Node-link layout
 Chord layout for Network flow
 Force Simulation Layout
 Hierarchy Layout
 a number of hierarchy layouts for dealing with hierarchical (or tree)
data
 ex: tree, cluster, treemap, pack and partition layouts

You may like to use d3blocks for creating such diagrams:

https://d3blocks.github.io/d3blocks/pages/html/index.html
Graphs/Network

 Networks have two major

components – nodes and links.
 The nodes represent entities
 people in a friendship group
 telegraph poles in a distributed grid
 articles on a Wikipedia page

 links are relationships.

 Graphs have two major
components- vertices and edges
 Node is analogous to vertex,
 link is analogous to edge.
Network Diagram

 Showing connections and relationship

 a.k.a Network graph, Node-link graph,
Node-link diagram
 additional variables can be visualized,
through color, size of the node and/or
link.
 Network Diagrams can be used to
interpret the structure of a network
 connectedness,
 how densely nodes are connected or
by how the diagram layout is arranged.
 any clustering of the nodes,
 Visual variables :
 Position, connection, area, color-hue
Graph/Network Layout

 Graph/Network Visualization
Problem
 Lay them out on your view window
 assign position to vertices/nodes.
 Show the vertices as a circle
 links as lines.

 MDS may be used for layout.

 Traditionally layout is done using a
force simulation.
 Forces that act on the simulation
are specified.
Force Simulation

 The simulation determines the position of node.

 Assigns a start position to each node.
 Applies a force directed motion that moves the node position
 Newton’s law of motion.
 A number of user defined forces determine the Force at any instant of time.
 Stops the simulation after equilibrium is reached or after a maximum number
of iterations
 Equilibrium: Computes the “energy” of the graph at any particular moment in
time, referred to as alpha.
 Alpha starts high and decreases over time,
 when alpha goes past a certain number, the graph stops moving.
 The simulation is run in a series of discrete steps called ticks. In each tick the
simulation updates its variables, like the position and velocity of its nodes, or
its alpha value.
Force Simulation: Algorithm

Newton’s Law of Motion: The acceleration of a body is directly proportional to the acting
force F and inversely proportional to its mass m, i.e.
 𝑎= or 𝑚𝑎 = 𝐹
 Force depends on time: 𝐹 = 𝐹(𝑡)
( )
 𝑎= ,𝑣 = .
 Integrating once we get
 𝑣 𝑡 = 𝑣 + ∫ 𝑎 𝜏 𝑑𝜏
 𝑣 is velocity time t=0
 we also get

 𝑥 𝑡 = 𝑥 + ∫ 𝑣 𝜏 𝑑𝜏
 𝑥 is the initial coordinate of the body

https://www.math24.net/newtons-second-law-motion/
Force Simulation: Algorithm

Newton’s Law of Motion: The acceleration of a  For a constant force/constant acceleration

body is directly proportional to the acting
force F and inversely proportional to its mass m, i.e.
 𝑥 = 𝑥 + 𝑣𝑡 + 𝑎 𝑡
 𝑎= or 𝑚𝑎 = 𝐹
 𝑣 = 𝑣 + 𝑎𝑡
 Force depends on time: 𝐹 = 𝐹(𝑡)
 Velocity Verlet Algorithm:
( )
 𝑎= = ,𝑣 =
 𝑥 𝑡 + Δ𝑡 = 𝑥 𝑡 + 𝑣 𝑡 Δ𝑡 + 𝑎 𝑡 Δt
 Integrating once we get
 𝑣 𝑡 + Δ𝑡 = 𝑣 𝑡 + Δ𝑡
 𝑣 𝑡 = 𝑣 + ∫ 𝑎 𝜏 𝑑𝜏
 Algorithm:
 𝑣 is velocity time t=0
1. Calculate 𝑥 𝑡 + Δ𝑡 = 𝑥 𝑡 + 𝑣 𝑡 Δt + a t Δt
 we also get
2. Calculate 𝑎 𝑡 + Δ𝑡 from the forces at 𝑥 𝑡 + Δ𝑡
 𝑥 𝑡 = 𝑥 + ∫ 𝑣 𝜏 𝑑𝜏
3. Calculate v 𝑡 + Δ𝑡 = 𝑣 𝑡 + Δ𝑡
 𝑥 is the initial coordinate of
the body

https://www.math24.net/newtons-second-law-motion/
User Defined Forces

 A centering force – push all nodes towards the center of the graph
 A repelling force – push all nodes away from each other, similar to how
charged particles repel each other
 A collision force – make nodes bounce off each other upon contact
like two snooker balls.
 A link force – pull nodes that are linked towards each other as if there
was a spring connecting them
 A constraining force – keep nodes bound inside a particular area, such
as a box
 A positioning force – pull nodes towards certain points. You could use
this to split nodes into several categories
 A gravity force – pull all nodes towards the bottom of the screen with a
force proportional to their size

https://tomroth.com.au/fdg-custom/
Force
Simulation
Layout
Demo
Radial Network Layout
Chord Diagram

 Used to visualize
 Weighted relationships between entities (nodes).
 Particularly relationship that can be shown in matrix
 links (or flows) between nodes, where each link has a numeric value.
 For example:
 they can show migration flows between countries.
 Nodes are arranged radially along a circle
 The relationships between nodes connected to each other through
the use of ribbons (arcs).
 Values are assigned to each connection, which is represented
proportionally by the size of each arc.
 Color can be used to group the data into different categories, which
aids in making comparisons and distinguishing groups.
 Chord or Ribbon

 Chord diagrams get their name from

terminology used in geometry.
 A chord of a circle is a geometric line
segment whose endpoints both lie on the
circle.
 In chord diagram, width is associated with
the geometry chord.
Chord Layout

 Can be adapted for several specific situations that slightly modify

the output.
 Flow: Two ways to represent it:
 One assymetric arc per pair
 Two arcs per pair
 Bipartite: nodes are grouped in a few categories. Connections
go between categories but not within categories.

See: https://www.data-to-viz.com/graph/chord.html
Example: Global Flow of People

Source: https://www.data-to-
viz.com/story/AdjacencyMatrix.html

Also see
https://guyabel.com/
Bipartite Example

 Visualizing Titanic dataset:

 how many passengers from the
different classes and from the
crew survived or died when the
ship sunk:

https://github.com/mattflor/chorddiag
Chord Diagram: General Guideline

 The group order around the circle is important.

 Try to minimize the number of arc crossing.
 Avoid over-cluttering that makes the figure unreadable.
 It is advised to dismiss weak connections.
 Chord diagrams are not straightforward to understand at all.
 Give plenty of explanation to your audience when you present it.
 Break down the graphic, presenting its components progressively.
 See https://www.visualcinnamon.com/2014/12/using-data-storytelling-with-
chord/
Sankey Diagram
ANOTHER FLOW VISUALIZATION DIAGRAM
Sankey Diagram

 Sankey Diagrams display flows and

their quantities in proportion to one
another.
 Sankey Diagrams are typically used to
visually show the transfer of energy,
money or materials, but they can be
used to show the flow of any isolated
system process.
 Name Sankey is after Iris captain
Sankey, who created such a diagram
to who steam engine efficiency using
arrows having widths proportional to
heat loss

https://datavizcatalogue.com/methods/sankey_diagram.html
Sankey Diagram

Charles Minard’s Map representing Napoleon’s Russian Campaign of 1812.

It was created in 1869, predating Sankey's first Sankey diagram of 1898.
Sankey Diagram

 Sankey diagrams are used to show weighted networks

 Entities (nodes) are represented by rectangles.
 Links are represented with arrow or arcs that have a width
proportional to the importance of the flow.
 The diagram shows the total amount where it comes from
and where it ends up, with possible intermediate steps.

https://www.data-to-viz.com/graph/sankey.html
Example: Migration

 Migration between different

regions of the world.
 Example: Sankey Diagram

 Energy flow:
Source to
Sink
Hierarchy Visualization
Hierarchy

 Represents the hierarchical nature

of a structure in a graphical form.
 The classic version resembles an
upside down tree, with the "root"
at the top and the "leaves" at the
bottom.
 Good for assessing Hierarchies and
Part-to-whole relationship

Wiki
Tree Layout

 Need a layout algorithm to create

a Tree like arrangement.
 Takes a hierarchy as input
 Assigns the following properties on
root and its descendants:
 node.x - the x-coordinate of the
node
 node.y - the y-coordinate of the
node
Cluster Layout

 A variation of tree layout

 The main difference being all leaf
nodes are placed at the same
depth.
Tree Map

 Treemaps are an alternative way of visualizing the hierarchical

structure of a Tree Diagram while also displaying quantities for each
category via area size.
 Each category is assigned a rectangle area with their subcategory
rectangles nested inside of it.
Treemap: Plotly Support

Trace = {
type: "treemap",
labels: [
"Eve", "Cain", "Seth", "Enos",
"Noam", "Abel", "Awan", "Enoch",
"Azura“
],
parents: [
"", "Eve", "Eve", "Seth", "Seth", "Eve",
"Eve", "Awan", "Eve"
]
}

https://plotly.com/javascript/treemaps/
Circle packing

 Like treemap, circle packing is

used for assessing Hierarchies and
Part-to-whole relationship.
 Each branch of the tree is
represented as a circle, and its
sub-branches are represented as
circles inside it.
 Color of the circle may represent
different categories.
 Size of the circle represent percent
of the whole

https://bl.ocks.org/nitaku/8de69327a7587770f7efd70f6054d5f6
Circle packing

 Pros  Cons
 More pleasing appearance  It's not as space-efficient as a
compared to tree map Treemap, as there's a lot of empty
space within the circles.
 Circle Packing reveals hierarchal
structure better than a Treemap.  Area estimation from circle map is
not as good as rectangular area
estimation.
Sunburst Chart

 A sunburst is a design or figure

commonly used in architectural
ornaments and design patterns.
[Wiki]
 consists of rays or "beams"
radiating out from a central disk in
the manner of sunbeams.
 Like a multi-level Pie chart
 Plotly Support:
 type: "sunburst"

https://plotly.com/javascript/sunburst-charts/