Slides from IEEE VisWeek 2012 presented by Shehzad Afzal. Automatic Typographic Maps use text to visualize geospatial data.

1. Spatial Text Visualization Using
Automatic Typographic Maps
Shehzad Afzal*, Ross Maciejewski†, Yun Jang‡, Niklas Elmqvist*, David S. Ebert*
Purdue University*, Arizona State University†, Sejong University in Seoul ‡

2. Motivation
AxisMaps.com
2

3. Motivation
• Typographic Map: Map made
entirely of the geographical labels
(i.e., “Type”)
• Aesthetically pleasing
• Exists only for handful of cities
• Printed map sold from $30-$150’
San Francisco
AxisMaps.com
3

4. Motivation
How are these maps designed?
• Manual text placement using Adobe Illustrator over an
„OpenStreetMap‟ image
• Text options are modified based on underlying spatial
features
• Process takes several weeks to complete one map
• Focus of their current approach is ‘purely aesthetic’
• Our work “Automates the Typographic Map
Generation Process”
• Potential of visualizing data using spatialized text
4 Image Courtesy: AxisMaps.com

5. Related Work
• Maharik et al. (2011) introduced ‘calligrams’
(digital micrography images)
• „TagMaps‟ by Yahoo: Word clouds on top of
graphical features
• ‘Wordle’ by Viegas et al (2009), ‘ManiWordle’ by
Koh et al (2010) & ‘SparkClouds’ by Lee et al
(2010)
5

6. System Overview
Typographic
Open Street Map Visual Properties/ Map
(OSM) File Style Sheet
SVG
Renderer
OSM Parser
Region
Generation
Data Cleaning/
Optimizations
Filtering Path/Road
SVG File
SVG File
Generation
Build Graphical
Objects & Layers
SVG Code
Generation
6

7. System Overview
Thema-
Typographic
Open Street Map Visual Properties/ Spatial Statistical Map
(OSM) File Style Sheet Dataset
SVG
Renderer
OSM Parser
Region
Generation
Data Cleaning/
Optimizations
Filtering Path/Road
SVG File
SVG File
Generation
Build Graphical
Objects & Layers SVG Code
7
Generation

8. Data Model
• Layers: Particular class of geographical objects
• e.g., Highways, Primary roads, park etc.
• Visual Attributes such as font size, color, weight etc.
• Graphical Objects belong to exactly one layer
• 1D paths(roads) or 2D paths(polygons)
• Ordering Layers:
• Layers are drawn in ascending order of priority
8

9. Data Model
• Ordering Layers:
• 1D Paths have higher priority than 2D Paths
• Ordering Graphical Objects within Layers:
• Horizontal Paths have higher priority than vertical paths
9

10. Optimizations
• Divided lanes having the same label are merged together to
form a single lane
• Font size for polygonal areas adjusted according to the area
10

11. Limitations
• Definitions of polygonal areas are not always consistent in
OSM. e.g., Rivers & lakes boundaries
• Segments of same road have different names or category and
they often overlap
• OSM data is not completely defined for some geographic
regions
11

12. Paths as Text
• Rendering Path using Text:
• Fit Text to path and repeat it for the duration of path‟s length
• Rotate characters to align with path normal
• Path thickness is controlled by font size
12

13. Paths as Text
• Visual Clutter - Path Overlap:
Clutter from Label Overlap Character Mask Character Halo
13

14. Regions as Text
Bounding Box filled with Oriented Text Clipped Text using Region Path
14

15. Regions as Text
Adjacent Regions: Vary the orientation of the lines in adjacent
regions resulting in visual continuity between regions
15

16. Comparison with AxisMap Output
AxisMaps Map of San Francisco, CA Automatic Typographic Map of San Francisco, CA
16

17. Comparison with AxisMap Output
AxisMaps Map of San Francisco, CA Automatic Typographic Map of San Francisco, CA
17

18. Comparison with AxisMap Output
AxisMaps Map of San Francisco, CA Automatic Typographic Map of San Francisco, CA
18

19. Comparison with AxisMap Output
AxisMaps Map of San Francisco, CA Automatic Typographic Map of San Francisco, CA
19

20. Typographic Map - Seattle
Visweek Venue
Automatic Typographic Map – Seattle near VisWeek 2012 Venue
20

21. Typographic Map - Chicago
Automatic Typographic Map – Chicago, IL
21

22. Thema-Typographic Maps
Thematic Maps:
Geographic Maps where Geospatial variable is visually
encoded on the map
Thema-Typographic Maps: Modify Font attributes on per
character level to convey the value of a statistical variable at
each character‟s spatial location
Font Attributes: Typically Size, but color, intensity etc.
22

23. Thema-Typographic Maps Showing Crime Rate
KDE Map for West Lafayette, IN Thema-Typographic Map
showing Crime Activity Statistical variable visualized is
Crime Rate
23

24. Thema-Typographic Maps in SVG
• Scaling individual characters: Internally we need to calculate
where characters end on a path in 2D Space.
This helps in following ways:
• Correct Lookup of Mapping Variable in Spatial Dataset
• # of characters required to fill the path can be calculated
• Stroke width of the background mask is now defined as an average of
the minimum and maximum font size
Other Applications: Traffic Intensity, Demographics, political
data can be overlaid on a typographic map
24

25. Conclusions and Future Work
• Automatic Generation of Typographic Maps for any Geographic
Region within seconds
• ‘Thema-Typographic Maps’: Combines Typographic Maps
technique with spatial datasets
Future Work:
• Spatial data features as a means of visualizing data
• Support Navigation, drilling down and changing map layout
25

26. Acknowledgements
• AxisMaps for their helpful feedback/discussions and
permission to use their Typographic Map image in our paper
• This work was supported in part by the U.S. Department of
Homeland Security‟s VACCINE Center under Award no.
103659 / 2009-ST-061-CI0001 and the Defense Threat
Reduction Agency under Award no. HDTRA 1-10-1-0083
26

27. Thank you
Spatial Text
Visualization Using
Automatic
Typographic Maps
[Web Service Client]
http://web.ics.purdue.edu/~safzal/typomaps.html
Shehzad Afzal
safzal@purdue.edu