Introduction to Map Design

Chapter 4
This won’t be a one-stop guide to all things map design, but will cover a few basic
concepts to get you started. ;-)
Designing for Digital
• This is still a vast and changing set of practices, concepts, and design principles
• One of the first things people probably think of when considering web maps is
Google Maps.
• The basemap is the map upon which you would overlay your data, and is an
important part of making a good-looking map. Go ahead and see what you can
create.
• The basemap is the map upon which you would overlay your data, and is an
important part of making a good-looking map.
• D3 is another tool that’s a relative newcomer. It can be used to structure the way
your data is visualized, and it offers some really diverse opportunities
• Animated maps are entering the conversation and are adding a lot to the
discussion around designing maps and data for the web.
Designing for Digital

Link of Base map Animation map

• https://vimeo.com/79772252 • http://hint.fm/wind/
• https://github.com/CartoDB/bas
emap-styles
• https://drive.google.com/drive/f
olders/1-
EPWY4L_PaTLiDwshY_LjpgTtH0k
g7r6?fbclid=IwAR1hMXQPba8D9
TIwrWDLdCPkbVaA96818SlX7sRI
q51HxElL-lPWxJfzVbw
Intro to basemaps
• Basemaps are image tiles that are used to render the graphical
representation of your map background.
• Basemaps include the natural and cultural features of the world; such as
water bodies, topography, park areas, terrains, roads, streets, and
sometimes buildings.
• In some cases, you may need to change your basemap to better visualize
the map background as it appears underneath other map layers.
• For example, are the map layer colors too similar to distinguish from the
basemap features? Do you need to make your markers stand out against
the basemap background? Did you change the map projection, obscuring
the visualization between layers?
Colors, Data, and Labels
• It’s a pretty ugly map, and also
highlights the first three topics we will
tackle: colors, data, and labels.
• In this example of a bad map, it’s clear
that much could be made better by
just changing the colors, filtering the
data, and changing the labels.
• By taking a look at each of these -
discussing which colors, which subset
of data, and what kinds of labels - we
will start to get an understanding of
good map design and be well on our
way to designing beautiful maps!
Why to think about colors?
• When we pull up the data, what
we see is a distribution of dots
(representing locations of
earthquakes) that is hard to
interpret.
• We know that there are many
data points - many earthquakes -
but it’s hard to identify patterns
of distribution and intensity.
• If you reduce the size of your markers,
and tinker around with the marker
stroke, you can make the distribution
a little bit more clear.
• However, it’s still not a exciting view of
the data, and doesn’t communicate as
much information as the data
contains.
• This is where color could help us out.
• Changing marker colors based on an
attribute in the data, like earthquake
force, would give us a richer
visualization.
• This kind of map, where the design is
projected to communicate a story
about a certain theme in the data, like
earthquake force, is called a
thematic map.
Color Composite Operations
• In addition to editing the colors of your markers, you can also edit
how the colors of overlapping or intersecting markers interact with
one another.
• กลุ่มของ Shadow
• multiply รวมกัน หรือผสมสีกนั เป็ นการปรับค่า Luminance (ค่าความสว่าง) แบบ Gradient ส่วนที่
เป็ นสีเข้มก็จะดามาก และไล่ลงมา จนถึงสีขาวจะเป็ นโปร่งใส
• darken เลือกเฉพาะส่วนที่มืด (กว่า) กระทบกับ Pixel ที่มืดที่สดุ ทัง้ เลเยอร์ตวั เองและ ทุกเลเยอร์ท่ีมีผลรวมกัน
และทุก Channel
• lighten เลือกเฉพาะส่วนที่สว่าง (กว่า) Lighten จะเปรียบเทียบระหว่าง layerของตัวเองกับ layer ข้างล่าง
อันไหนที่มีค่าสีสว่างกว่าก็จะแสดงอันนัน้ ออกมา
Multiply
• Multiply literally multiplies the color of the top
layer by the color of each layer beneath, which
usually means overlapping areas become darker.
• A layer’s color is made of a mix of red, green and
blue color channels. Each channel is assigned a
percentage decimal value from 0 to 1.
• If all channels had a 0 value the color would be
completely BLACK; if they all had a value of 1 the
color would be completely WHITE.
• Multiply takes these channel numbers for one layer
and multiplies them with the channel numbers of
another.
• Multiply เป็ นหนึ่งในmodeที่เข้าใจง่าย มันจะผสมสอง layerเข้า
ด้วยกัน เหมือนกับการใช้ปากกาไฮไลท์ระบายสีในชีวิตจริง มันจะทาให้
ภาพสีเข้มขึน้ เท่านัน้ ไม่มีทางอ่อนลงโดยใช้ค่าสีจาก layer บน ส่วนไหนที่
เป็ นสีเข้มก็จะเข้มขึน้ มาก ส่วนตรงไหนที่เป็ นสีขาวก็จะไม่มีผล ( มองทะลุเลย
ไม่ผสม )
Darken
• As it applies the color from the source layer to
the destination layers, it compares each to
find the darkest-colored pixels and keeps
those.
• In the example below, we chose
the darken composite operation in the top
circle layer.
• Notice how only the hillshade shadows and
black line show through from the destination
layers, because all other elements have
lighter-colored pixels than the circle.
• All pixel colors that are lighter than the top
circle take on the circle’s color. Use this when
you want a darken effect that shows original
color in the darkest areas of overlap, or when
you want less detail than is shown in multiply.
• Darken จะเปรียบเทียบระหว่าง layerของตัวเองกับ layer
ข้างล่าง อันไหนทีม่ ีค่าสีมืดกว่าก็จะแสดงอันนั้นออกมา
Lighten
• Lighten works the same way as
darken, but inversely.
• The lightest-colored pixels from
each layer are kept, and if pixels
are darker than the source layer
they source layer color replaces
them.
• This can be useful when you want
to change the color of your
overlapping area’s shadows.
• Lighten จะเปรียบเทียบระหว่าง layerของตัวเอง
กับ layer ข้างล่าง อันไหนที่มีคา่ สีสว่างกว่าก็จะ
แสดงอันนัน้ ออกมา
Color-Burn
• It increases the contrast
between source and destination
layers, with pixels in your
overlapping area tinted towards
the source color.
• Use this when you want a
darkening effect with more
contrast than multiply or darken.
• หลักคือทาการเพิ่ม Saturation (ความอิ่มตัว
ของสี) ซึง่ ทาให้เกิด Contrast ที่สงู พร้อม
กับ Noise เช่นกัน
Darken Color-Burn
คุณสมบัติของสี
Hue  เนือ้ สี หรือ Hue คือความแตกต่างของสี
บริสุทธิแ์ ต่ละสี ซึง่ เราจะ เรียกเป็ นชือ่ สี เช่น
สีแดง สีนา้ ตาล สีม่วง เป็ นต้น โดยแบ่ง
เนือ้ สีออกเป็ น 2 ชนิด ด้วยกันคือ
• สีของแสง (Coloured Light)
• สีของสาร (Coloured Pigment)
 การผสมสารสี
การที่เราเห็นวัตถุมีสีใด ก็เนื่องจากแสงสีนนั้ สะท้อนจากวัตถุมาเข้าตา ส่วนการเห็นแสงสีทะลุผ่านวัตถุนนั้ ไม่คอ่ ยได้
พบเห็นนัก แสงสีใดจะสะท้อนออกจากวัตถุก็เนื่องจากสารสีท่ีผิววัตถุนนั้ ๆ ถ้าต้องการเห็นสีตามธรรมชาติของวัตถุ จะต้องดูวตั ถุ
นัน้ ด้วยแสงขาวตามธรรมชาติจากดวงอาทิตย์
สารสีปฐมภูมิ เป็ นสารสีท่ีไม่อาจสร้างขึน้ จากการผสมของสารสีอ่ืน ๆ ได้มีดว้ ยกัน 3 สี คือ สีเหลือง สีแดง และ สีนา้ เงิน
การดูดกลืนและการสะท้อนของสารสีปฐมภูมิ เมื่อผ่านแสงขาวจากดวงอาทิตย์ มีดงั นี ้
สารสีเหลือง จะไม่ดดู กลืน ( สะท้อน ) แถบสีเหลือง นอกนัน้ ดูดกลืนหมด
สารสีแดง จะไม่ดดู กลืน ( สะท้อน ) แถบสีแดงม่วง นอกนัน้ ดูดกลืนหมด
สารสีนา้ เงิน จะไม่ดดู กลืน ( สะท้อน ) แถบแสงสีนา้ เงินเขียว นอกนัน้ ดูดกลืนหมด
ถ้านาสารสีปฐมภูมิทงั้ 3 สี มาผสมกันด้วยปริมาณที่เท่า ๆ กัน จะได้สีผสมที่มีสมบัติดดู กลืนแสงสีทกุ แถบสีใน
สเปกตรัมแสงขาวที่มาตกกระทบ สารสีผสมนีค้ ือ สารสีดา
การผสมแสงสี
ในการมองเห็นแสงที่สะท้อนหรือทะลุผ่านออกมาจากวัตถุต่าง ๆ มักไม่ออกมาเพียงสีเดียว ดังนัน้
การมองเห็นสีของวัตถุจึงเป็ นการมองเห็นสีท่ีมีการผสมแสงสีกนั
แสงสีปฐมภูมิ เป็ นแสงสีท่ีเมื่อนามาผสมกันบนฉากขาวด้วยสัดส่วนที่เท่าๆ กัน จะได้เป็ นแสงขาว ซึ่งมีดว้ ยกัน 3 สี คือ
แสงสีแดง red แสงสีเขียว green และ แสงสีนา้ เงิน blue
Tone

วรรณะของสี คือสีท่ีให้ความรูส้ กึ ร้อน-เย็น ในวงจรสีจะมีสีรอ้ น 7 สี และสีเย็น 7 สี ซึง่ แบ่งที่ สีมว่ งกับสีเหลือง ซึง่
เป็ นได้ทงั้ สองวรรณะ แบ่งออกเป็ น 2 วรรณะ
1.วรรณะสีร้อน (WARM TONE) ประกอบด้วยสีเหลือง สีสม้ เหลือง สีสม้ สีสม้ แดง สีม่วงแดง และสีมว่ ง สี
ใน วรรณะร้อนนีจ้ ะไม่ใช่สีสดๆ ดังทีเ่ ห็นในวงจรสีเสมอไป เพราะสีในธรรมชาติยอ่ มมีสีแตกต่างไปกว่าสีในวงจรสี
ธรรมชาติอีกมาก ถ้าหากว่าสีใด ค่อนข้างไปทางสีแดงหรือสีสม้ เช่น สีนา้ ตาลหรือสีเทาอมทอง ก็ถอื ว่าเป็ นสี
วรรณะร้อน
2.วรรณะสีเย็น (COOL TONE) ประกอบด้วย สีเหลือง สีเขียวเหลือง สีเขียว สีเขียวนา้ เงิน สีนา้ เงิน สีมว่ งนา้
เงิน และสีมว่ ง ส่วนสีอ่ืนๆ ถ้าหนักไปทางสีนา้ เงินและสีเขียวก็เป็ นสีวรรณะเย็น ดังเช่น สีเทา สีดา สีเขียวแก่ เป็ นต้น
จะสังเกตได้วา่ สีเหลืองและสีม่วงอยูท่ งั้ วรรณะร้อนและวรรณะเย็น ถ้าอยูใ่ นกลุม่ สีวรรณะร้อนก็ให้ความรูสกึ ร้อน
และถ้า อยูใ่ นกลุม่ สีวรรณะเย็นก็ให้ ความรูส้ กึ เย็นไปด้วย
สีเหลืองและสีม่วงจึงเป็ นสีได้ทงั้ วรรณะร้อนและวรรณะเย็น
ความหมายของสี
ความหมายของสี
ระบบสี
โดยทั่วไปสีในธรรมชาติและสีทสี่ ร้างขึน้ จะมีรูปแบบการมองเห็นของสีทแี่ ตกต่างกัน
ซึง่ รู ปแบบการมองเห็นสี ทีใ่ ช้ในงานด้านกราฟิ กทั่วไปนั้นมีอยู่ด้วยกัน 3 ระบบ คือ
1. ระบบสีแบบ RGB ตามหลักการแสดงสีของเครื่องคอมพิวเตอร์
2. ระบบสีแบบ CMYK ตามหลักการแสดงสีของเครื่องพิมพ์
3. ระบบสีแบบ HSV ตามหลักการมองเห็นสีของสายตามนุษย์
ระบบสี แบบ RGB
- ระบบสี RGB เป็นระบบสีของแสง ซึ่งเกิดจากการหักเห
ของแสง ผ่านแท่งแก้วปริซึม จะเกิดแถบสีที่เรียกว่า สีรุ้ง
( Spectrum ) ซึ่งแยกสีตามทีส่ ายตามองเห็นได้ 7 สี คือ
แดง แสด เหลือง เขียว น้าเงิน คราม ม่วง ซึ่งเป็นพลังงาน
อยู่ในรูปของรังสี ที่มีช่วงคลื่นที่ สายตาสามารถมองเห็นได้
- แสงสี 3 สี คือ สีแดง ( Red ) สีน้ำเงิน ( Blue) และสี
เขียว ( Green ) ทังสามสีถือเป็นแม่สี ของแสง เมื่อน้ามา
ฉายรวมกันจะท้าให้เกิดสีใหม่ อีก 3 สี คือ สีแดงมาเจนต้า
สีฟ้าไซแอน และสีเหลือง และถ้าฉายแสงสีทังหมดรวมกัน
จะได้แสงสีขาว
- จากคุณสมบัตขิ องแสงนีเรา ได้น้ามาใช้ประโยชน์ทั่วไป
ในการฉายภาพยนตร์ การบันทึกภาพวิดโี อ ภาพโทรทัศน์
การสร้างภาพเพื่อการน้าเสนอทางจอคอมพิวเตอร์ และการ
จัดแสงสีในการแสดง
เป็นต้น
ระบบสี แบบ CMYK
เป็นระบบสีที่ใช้กับเครื่องพิมพ์ที่พมิ พ์ออกทางกระดาษ ซึ่ง
ประกอบด้วยสีพืนฐาน คือ สีฟ้า (Cyan), สีม่วงแดง
(Magenta), สีเหลือง (Yellow), และเมื่อน้าสีทัง 3 สีมา
ผสมกันจะเกิดสีเป็น สีด้ำ (Black) แต่จะไม่ด้าสนิท หรือ
เรียกว่า สีเทำเข้ม (Khaki) เนื่องจากหมึกพิมพ์มีความไม่
บริสุทธิ์ โดยเรียกการผสมสีทัง 3 สีข้างต้นว่า
“Subtractive Color” หรือการผสมสี
แบบลบ
• หลักการเกิดสีของระบบนีคือ หมึกสีหนึ่งจะดูดกลืนสีจาก
สีหนึ่งแล้วสะท้อนกลับออก มาเป็นสีต่างๆ เช่น สีฟ้า
ดูดกลืนสีม่วงแล้วสะท้อนออกมาเป็นสีน้าเงิน ซึ่งจะสังเกต
ได้ ว่าสีที่สะท้อนออกมาจะเป็นสีหลักของระบบ RGB การ
เกิดสีนีในระบบนีจึงตรงข้าม กับการเกิดสีในระบบ RGB
RGB&CMYK
• ในการท้างานและออกแบบโดยใช้โปรแกรมกราฟฟิคต่าง
ๆ สามารถเลือกใช้ได้ทัง RGB color mode หรือ
CMYK color mode ก็ได้ แต่ถ้าใช้ RGB color mode
เมื่องานเสร็จสินก่อนส่งให้โรงพิมพ์ให้แปลง file งานเป็น
CMYK color mode และให้ตรวจดูคุณภาพของภาพ
และสีสัน
• ประโยชน์ของการท้างานในระบบ RGB คือ ขนาดของ
file งานใน ระบบ RGB มีขนาดเล็กกว่า file งานใน
ระบบ CMYK ด้วยขนาด file ที่เล็กกว่าจะท้าให้การ
ท้างานคล่องตัวขึน และอาณาบริเวณของสี ในระบบ
RGB กว้างกว่าในระบบ CMYK หากท้างานในระบบ
CMYK จะท้าให้สญ ู เสียค่าของสีหากน้าไปใช้งานอืน่ ๆ
เช่นน้าไปใช้ใน web site นอกจากนี filter หลาย ๆ ชุด
ท้างานได้เฉพาะในระบบ RGB เท่านัน
ระบบ HSV
• Hue: สีแท้ทป่ี รากฎในวงสี 12 สี
• Saturation: ความสดหรือความบริสุทธิ์
ของสีแท้
• Value: นา้ หนักอ่อนแก่ของสี
Color Schemes - การวางโครงสี
• โครงสีเอกรงค์
• โครงสีข้างเคียง
• สีตรงข้าม
• โครงสีคู่ตรงข้าม
monochromatic color scheme
Analogous color scheme
• Analogus โครงสีข้างเคียง สีทอ่ี ยู่ตดิ กัน
หรืออยู่ข้างเคียงในวงจรสี จะมี 2-4 สี จะไม่
มากกว่า 4 สี เพราะจะ หลุดจากความ
ข้างเคียง
Complimentary color scheme
• สีตรงข้าม หรือสีตดั กัน หรือสีคปู่ ฏิปักษ์ เป็ นสีท่ีมี
ค่าความเข้มของสี ตัดกันอย่างรุนแรง ในทาง
ปฏิบตั ิไม่นิยมนามาใช้รว่ มกัน เพราะจะทาให้แต่
ละสีไม่สดใส เท่าที่ควร การนาสีตรงข้ามกันมาใช้
ร่วมกัน อาจกระทาได้ดงั นี ้
1. มีพืน้ ที่ของสีหนึ่งมาก อีกสีหนึ่งน้อย
2. ผสมสีอ่ืนๆ ลงไปสีสีใดสีหนึ่ง หรือทัง้ สองสี
3. ผสมสีตรงข้ามลงไปในสีทงั้ สองสี
A Dyads color scheme
• Dyads โครงสีคตู่ รงข้ามสีท่อี ยู่ตรงข้ามกันในวงจรสี
ทาให้งานมีความสะดุดตา แต่ควรแบ่งพืน้ ที่ของสี
ออกเป็ น 70-30% เพื่อสร้างความเป็ น เอกภาพ
• Triads หรือโครงสี 3 สี คือ
1. เป็ นการใช้สี 3 สี ในช่วงห่างระหว่างสีทงั้ 3 เท่า กัน ถ้า
เราลากเส้นระหว่างสีทงั้ 3 สีเราจะได้สามเหลี่ยมด้านเท่า
2. เป็ นการใช้สี 3 สี ในช่วงห่างระหว่างสีทงั้ 3 ไม่เท่ากัน
คือมีช่วงห่าง 2 ช่วงเท่ากัน แต่กบั อีกอันหนึง่ ช่วงห่างจะ
ยาวกว่า ถ้าลากเส้นระหว่างสีแล้วจะได้สามเหลี่ยมหน้า
จั่ว
Choosing Color Schemes for map

Match Colors To Your Data

• The best way to get you thinking • Types of Data: Nominal, Ordinal,
about color design on maps is to Interval/Ratio
think first about the data you’re
trying to show.
• These color schemes work well
for all sorts of things outside of
mapping.
Which one is super-easy to understand?

sequential color schem categorical color scheme

this works nicely to show which places
are above and below the middle another example here to show you when
using a categorical color scheme would
category make sense.
Rainbows Kill People, So Stop Using Them On
Maps
They’re popular in part because they result in very bold-looking, colorful
maps. More exciting ≠ better when it comes to making any kind of data
graphic (such as a map). It’s much more intuitive to have your color
scheme match closely with the kind of data you’re using. If it’s a “less-to-
more” dataset as in the rainfall example, then you should be using
something that goes from a light to dark range with the same hue.
The map below uses a single hue increasing in saturation
in a sequential manner. It’s more subtle, but it’s also
more honest when it comes to showing what’s really in
this data, and the reader will have no problem
identifying the trend immediately.