Sunlight Style Guide Data Viz

User Manual:

Open the PDF directly: View PDF .
Page Count: 13

Download
Open PDF In Browser	View PDF

Data Visualization Style Guidelines
FORWARD

This guide is meant to be a starting point for

This guide includes:
»» basic graph structure
»» bar graphs
»» line graphs

creating data visualizations for this organization.
“Data Series” like the 1% of the 1% may have their
own twist on these foundations. Visualizations that
pertain to a particular project, like the 5 year review

»» pie charts

of Political Party Time, may also have variations on

»» scatter plots

these standards. Feel free to use these as a starting

»» maps

point, and do what makes sense for your particular

»» graph or chart colors

data. Please remember to respect the data as you go

»» choropleth colors for maps

forth into the wonderful, but often confusing, world

»» network visualization colors

of turning numbers into visuals.

Basic Structure
650px max for a regular blog post (900px max for a feature post)

EXAMPLE

12px

100px

Title of the chart

Download the sunlight logo @
http://sunlightfoundation.com/press/logos

For explanatory text that’s not very long.
22px

22px

Background color:
Background Light
(#F5F3F2)

22px

1px white (#FFFFFF)

30 units
5px

Y Axis Title

22px

20 units

22px

1px white (#FFFFFF)

Height is variable. Make them as long as you need
them to be since these are mainly web graphics.

10 units
1px white (#FFFFFF)

0
1px 4pt dash 4pt
gap Line Grey 80%
(#CDCDC9)

ITC Franklin Gothic Demi
12px #635F5D

Label 1

5px

Label 2

Label 3

Label 4

22px

X Axis Title
22px
22px

Source: www.fruitsperbushel.com

Georgia bold and italic 8px
Left aligned text, vertically centered
Text light (#8E8883)

Background color: Background Dark (#EFECEA)

Text Styles
Header Title with emphasis

ITC Franklin Gothic Std | Book Condensed with Demi Condensed emphasis | 20px | Left Aligned | #635F5D (Text Main)

Header title explanatory text

Georgia | italic | 12px | left aligned | #8E8883 (Text Light)

X axis & Y axis labels

X Axis & Y Axis Title

ITC Franklin Gothic Std | Demi | 12px | centered on line | #635F5D (Text Main)

ITC Franklin Gothic Std | Book | 12px | centered | #635F5D (Text Main)

Key labels

ITC Franklin Gothic Std | Book | 10px | left aligned | #635F5D (Text Main)

Callout text

Georgia | italic| 10px | left aligned | #635F5D (Text Main)

Point Label

Source: www.fruitsperbushel.com

ITC Franklin Gothic Std | Book | 10px | right aligned to point | #635F5D (Text Main)

Georgia | bold title with italic text | 8px | left aligned | #8E8883 (Text Light)

Background Colors
Base Colors
Background

Background Light Accent

Background Dark Accent

CMYK: 5, 5, 5, 0

CMYK: 2, 2, 2, 0

CMYK: 9, 8, 8, 0

RGB: 239, 236, 234

RGB: 245, 243, 242

RGB: 229, 226, 224

Hex: #EFECEA

Hex: #F5F3F2

Hex: #E5E2E0

Text Main

Text Light
CMYK: 59, 54, 54, 25

CMYK: 46, 41, 44, 5

RGB: 99, 95, 93

RGB: 142, 136, 131

Hex: #635F5D

Hex: #8E8883

Line Grey Accent

Line White
CMYK: 0, 0, 0, 0

CMYK: 25, 19, 23, 0

RGB: 255, 255, 255

RGB: 192, 192, 187

Hex: #FFFFFF

Hex: #C0C0BB

Data Colors
Main Colors
a thing

a different thing

another different thing

another different thing

neutral thing

No Data

CMYK: 12, 24, 100, 0

CMYK: 7, 57, 97, 1

CMYK: 86, 35, 46, 10

CMYK: 48, 61, 28, 4

CMYK: 42, 38, 49, 4

CMYK: 9, 8, 8, 0

RGB: 227, 186, 34

RGB: 230, 132, 42

RGB: 19, 123, 128

RGB: 142, 109, 138

RGB: 151, 143, 128

RGB: 229, 226, 224

Hex: #E3BA22

Hex: #E6842A

Hex: #137B80

Hex: #8E6C8A

Hex: #978F80

Hex: #E5E2E0

a subset of the thing

a subset of the different thing

a subset of the other different thing

a subset of the other different thing

a subset of the neutral thing

CMYK: 6, 9, 78, 0

CMYK: 2, 31, 76, 0

CMYK: 70, 17, 28, 0

CMYK: 31, 42, 18, 0

CMYK: 25, 22, 32, 0

RGB: 242, 218, 87

RGB: 246, 182, 86

RGB: 66, 165, 179

RGB: 179, 150, 173

RGB: 193, 186, 169

Hex: #F2DA57

Hex: #F6B656

Hex: #42A5B3

Hex: #B396AD

Hex: #C1BAA9

a subset of the thing

a subset of the different thing

a subset of the other different thing

a subset of the other different thing

a subset of the neutral thing

RGB: 189, 143, 34

RGB: 186, 95, 6

RGB: 0, 93, 110

RGB: 104, 70, 100

RGB: 124, 113, 94

Hex: #BD8F22

Hex: #BA5F06

Hex: #005D6E

Hex: #684664

Hex: #7C715E

Specialty Colors
Republican

Democrat

Independent

Con

Pro

Money

CMYK: 27, 84, 96, 22

CMYK: 89, 52, 27, 6

CMYK: 58, 34, 73, 13

CMYK: 18, 95, 98, 8

CMYK: 84, 24, 60, 5

CMYK: 67, 30, 100, 13

RGB: 154, 62, 37

RGB: 21, 107, 144

RGB: 112, 130, 89

RGB: 189, 45, 40

RGB: 15, 140, 121

RGB: 92, 129, 0

Hex: #9A3E25

Hex: #E6842A

Hex: #708259

Hex: #BD2D28

Hex: #0F8C79

Hex: #5C8100

a subset of Republican

a subset of Democrat

a subset of independent

a subset of Con

a subset of Pro

a subset of Money

CMYK: 25, 60, 69, 8

CMYK: 64, 38, 20, 1

CMYK: 44, 27, 57, 2

CMYK: 6, 79, 80, 1

CMYK: 58, 5, 45, 0

CMYK: 43, 12, 100, 0

RGB: 179, 112, 85

RGB: 104, 139, 171

RGB: 149, 161, 126

RGB: 226, 90, 66

RGB: 107, 187, 161

RGB: 160, 183, 0

Hex: #B37055

Hex: #688BAB

Hex: #95A17E

Hex: #E25A42

Hex: #6BBBA1

Hex: #A0B700

Bar Graph (categorical)

EXAMPLE

Title of the chart
For explanatory text that’s not very long.

Possible label:
Fill: White (#FFF)
Line: Line Grey
(#C0C0BB)
Day with the most
Granny Smith
Apple production

30 units

Y Axis Title

20 units

Possible line:
1px 4pt dash 4pt gap
Line Grey

Day with the least
overall orange
production

10 units

Possible label:
Fill: White (#FFF)
Line: Line Grey
(#C0C0BB)
amount of unique
fruits needed to fill
a bushel

When to use a Bar or Column Chart
»» Use mostly for one variable.
»» Compares numerical values for different
observations. Shows relative amounts.

Honey Crisp
Apples

»» Grouped or stacked bars or columns can break
that one numerical variable out into different
sub-groups.

Granny Smith
Apples

Your data should look like:

Clementine
Oranges

0

Navel Oranges

Monday

Starts at 0

Source: www.fruitsperbushel.com

Tuesday

Wednesday
X Axis Title

Thursday

Friday
Possible Key:
Fill: Background dark
Accent (#E5E2E0)
Line: Line Grey
(#C0C0BB)

Honey
Crisp

Granny
Smith

Clementine

Navel

Monday

3

12

3

10

Tuesday

3

9

2

7

Wednesday

3

18

4

12

Thursday

3

15

3

10

Friday

3

3

5

22

Line Graph (political)

EXAMPLE

When to use a Line Graph

Title of the chart

»» Shows the trend in one variable usually over time.

For explanatory text that’s not very long.

»» Multiple lines can show multiple variables (if they
are on the same scale).
$3,030

$3,000

Republican

ITC Franklin Gothic book 10px
Text Light color

Democrat

Y Axis Title

$2,100

$2,000

2px of color

$1,000

$1,090
$930
$710
$590

0
2000
Starts at 0

Source: www.fruitsperbushel.com

2010
X Axis Title

2020

»» Multiple lines can also show the same variable for
multiple observations.
Your data should look like:
Time

Republican

Democrat

1990

1

2

1991

2

5

1992

4

9

1996

6

13

1994

7

15

1995

8

17

Pie Chart (pro/con)

EXAMPLE

When to use a Pie Chart
»» Use them very sparingly. Often a bar or column
chart is better. It is much more difficult to visually
judge the size of circles (or circle segments) vs.
rectangles.

Title of the pie chart
For explanatory text that’s not very long.
ITC Franklin Gothic Demi/Book
12px

Pro (94%)
Con (5%)
Other (1%)

1px line Line Grey

1px stroke
#FFFFFF white

Source: www.fruitsperbushel.com

»» You want to show the relative relationship
between 2-3 things.
»» They add up to 100% (which may necessitate the
inclusion of a category such as “none”, “other”, etc.)
Your data should look like:
Pro

Con

Other

94

5

1

Scatter Plot (single variable)

EXAMPLE

When to use a Scatter Plot
»» Shows the relationship between two continuous
variables for your set of observations.

Title of the chart
For explanatory text that’s not very long.

»» Each point in the plot represents an object.
»» You can change color or symbol to show groups.

6,000

Y Axis Title

5,000

FirstName
LastName

FirstName
1px Line Grey with LastName
1px white line inside

possible
trend line: 1px 4pt
dash 4pt gap Line
Grey
Firstname LastName

FirstName LastName

FirstName
LastName

4,000

0

possible label: 1px stroke Line Grey.
Use only horizontal lines and 45
degree lines or just horizontal lines

5px

ONLY for scatter plots. The
y axis CAN be alterted and
broken.

Source: www.fruitsperbushel.com

Label 1

Label 2
X Axis Title

Label 3

possible label: ITC
Franklin Gothic book
10px Text Main

Label 4

»» Sometimes it is nice to show a trend line
(regression).
Your data should look like:
variable 1

variable 2

7.560309668

48.87193277

8.569477057

57.70873996

5.178854559

35.50990599

5.044602676

31.94896911

7.629095533

49.76954493

6.631379

46.66529366

7.035723733

45.68632108

8.152163624

57.46279438

Scatter Plot (multi variable)

EXAMPLE

When to use a Scatter Plot
»» Shows the relationship between two continuous
variables for your set of observations

Title of the chart
For explanatory text that’s not very long.

»» Each point in the plot represents an object.

6,000

Apples

FirstName
LastName

FirstName
LastName

Oranges
Pear

»» You can change color or symbol to show groups.
»» Sometimes it is nice to show a trend line
(regression).

Y Axis Title

Papaya

5,000

Your data should look like:
FirstName LastName

4,000
FirstName
LastName

0

Label 1

Label 2
X Axis Title

Source: www.fruitsperbushel.com

Label 3

Possible Key:
Fill: Background dark
Accent (#E5E2E0)
Line: Line Grey
(#C0C0BB)
Change both color
and shape if possible
(helps with sight
issues)

variable 1

variable 2

7.560309668

48.87193277

8.569477057

57.70873996

5.178854559

35.50990599

5.044602676

31.94896911

7.629095533

49.76954493

6.631379

46.66529366

7.035723733

45.68632108

8.152163624

57.46279438

Map (sequential, single hue, money)

EXAMPLE

When to use a Map
»» Be sure to only use a map if the primary
component of your data is geographical.
Sometimes a ranked list or bar chart is better if
you are just trying to compare a single value for
each state.
»» Color scale comparisons are harder for humans
than size comparisons. Keep this in mind as you
choose between a map or another layout.

Choropleth Colors (for maps)
Political Colors (stick to choropleths of 5 or fewer colors for maximum readability)

More Republican

#712422

#9A3E25

#B37055

#D9A78D

More Democrat

#05426C

#E6842A

More Republican

#9A3E25

#688BAB

#8CAEC6

50/50

#D9A78D

#C8C6C6

#8CAEC6

Non-political Colors (stick to choropleths of 5 or fewer colors for maximum readability)

Less Republican

No data

Anti

#EDCEBC

#E5E2E0

#BD2D28

Less Democrat

No data

More Money

#BAD2E2

#E5E2E0

#0C4E00

More Democrat

No data

More Thing

#E6842A

#E5E2E0

#936B00

50/50

#C37A73

#5C8100

#C8C6C6

#A0B700

Pro

#75A999

#D2CF00

#0F8C79

#E5E2E0

Less Money

No Data

#E6E4A6

Less Thing

#BD8F22

#E3BA22

#F2DA57

No Data

#F1E8AE

#E5E2E0

No Data

#E5E2E0

Network Graph Colors
30 colors. TRY not to use them all.

#F2DA57

#F6B656

#E25A42

#DCBDCF

#B396AD

#B0CBDB

#33B6D0

#7ABFCC

#C8D7A1

#A0B700

242, 218, 87

244, 182, 86

226, 90, 66

220, 189, 207

179, 150, 173

176, 203, 219

51, 182, 208

122, 191, 204

200, 215, 161

160, 183, 0

#E3BA22

#E58429

#BD2D28

#D15A86

#8E6C8A

#6B99A1

#42A5B3

#0F8C79

#6BBBA1

#5C8100

227, 186, 34

229, 132, 41

189, 45, 40

209, 90, 134

142, 108, 138

107, 153, 161

66, 165, 179

15, 140, 121

107, 187, 161

92, 129, 0

#B08B12

#BA5F06

#8C3B00

#6D191B

#842854

#5F7186

#193556

#137B80

#144847

#254E00

176, 139, 18

186, 95, 6

140, 59, 0

109, 25, 27

132, 40, 84

95, 113, 134

25, 53, 86

19, 123, 128

20, 72, 71

37, 78, 0



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.4
Linearized                      : Yes
Tagged PDF                      : Yes
XMP Toolkit                     : Adobe XMP Core 5.0-c060 61.134777, 2010/02/12-17:32:00
Create Date                     : 2013:10:31 17:56:29-04:00
Metadata Date                   : 2013:10:31 17:56:34-04:00
Modify Date                     : 2013:10:31 17:56:34-04:00
Creator Tool                    : Adobe InDesign CS5 (7.0.4)
Page Image Page Number          : 1, 2
Page Image Format               : JPEG, JPEG
Page Image Width                : 256, 256
Page Image Height               : 256, 256
Page Image                      : (Binary data 5994 bytes, use -b option to extract), (Binary data 6379 bytes, use -b option to extract)
Instance ID                     : uuid:6fff0977-0f8e-8c4b-962e-e4492b7753f9
Original Document ID            : xmp.did:01801174072068118083C9E621787E37
Document ID                     : xmp.did:0080117407206811822A82D386B4F47F
Rendition Class                 : proof:pdf
History Action                  : created, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved, saved
History Instance ID             : xmp.iid:01801174072068118083C9E621787E37, xmp.iid:02801174072068118083C9E621787E37, xmp.iid:03801174072068118083C9E621787E37, xmp.iid:04801174072068118083C9E621787E37, xmp.iid:05801174072068118083C9E621787E37, xmp.iid:008011740720681195FE9AD4E0CF43CE, xmp.iid:4EB19A398321681195FE9AD4E0CF43CE, xmp.iid:51B19A398321681195FE9AD4E0CF43CE, xmp.iid:57B19A398321681195FE9AD4E0CF43CE, xmp.iid:76833729B521681195FE9AD4E0CF43CE, xmp.iid:7C833729B521681195FE9AD4E0CF43CE, xmp.iid:06801174072068118083A64D2B26CD6C, xmp.iid:07801174072068118083A64D2B26CD6C, xmp.iid:B6E02969082068118083A64D2B26CD6C, xmp.iid:DCA060A6362068118083A64D2B26CD6C, xmp.iid:0080117407206811822AC33F88AAC298, xmp.iid:3B288E551B206811822AC33F88AAC298, xmp.iid:EC888BB137206811822AC33F88AAC298, xmp.iid:D437B55D4F2068118A6D940A2AC47D29, xmp.iid:D537B55D4F2068118A6D940A2AC47D29, xmp.iid:358E15DA552068118A6D940A2AC47D29, xmp.iid:3E8E15DA552068118A6D940A2AC47D29, xmp.iid:3A2180EA6D23681188C6EB6337FB3FD6, xmp.iid:3B2180EA6D23681188C6EB6337FB3FD6, xmp.iid:3EB109FD6D23681188C6EB6337FB3FD6, xmp.iid:47B109FD6D23681188C6EB6337FB3FD6, xmp.iid:BE8ACAECDA23681188C6EB6337FB3FD6, xmp.iid:95C74437DC23681188C6EB6337FB3FD6, xmp.iid:9DC74437DC23681188C6EB6337FB3FD6, xmp.iid:586D681EE823681188C6EB6337FB3FD6, xmp.iid:ABB9CB19EE23681188C6EB6337FB3FD6, xmp.iid:425B1C56EE23681188C6EB6337FB3FD6, xmp.iid:F87F117407206811822A82D386B4F47F, xmp.iid:0080117407206811822A82D386B4F47F, xmp.iid:0D7B9FBE0F206811822A82D386B4F47F, xmp.iid:107B9FBE0F206811822A82D386B4F47F, xmp.iid:8733502F45206811822A82D386B4F47F, xmp.iid:7DF6A64054206811822A82D386B4F47F, xmp.iid:91ED899B6D206811822A82D386B4F47F, xmp.iid:35E922657D206811822A82D386B4F47F, xmp.iid:1F2F53AEA0206811871FE86293727F4C, xmp.iid:7D859204AF206811871FE86293727F4C, xmp.iid:A38B582EAF206811871FE86293727F4C, xmp.iid:40CC5ADEB4206811871FE86293727F4C, xmp.iid:8E2DB9BDC0206811871FE86293727F4C
History When                    : 2013:07:29 17:00:51-04:00, 2013:07:31 16:42:50-04:00, 2013:07:31 16:42:50-04:00, 2013:07:31 17:36:43-04:00, 2013:08:01 14:03:24-04:00, 2013:08:01 14:59:33-04:00, 2013:08:01 14:59:33-04:00, 2013:08:01 17:55:36-04:00, 2013:08:02 12:26:31-04:00, 2013:08:02 13:23:15-04:00, 2013:08:02 17:44:08-04:00, 2013:08:05 16:39:49-04:00, 2013:08:05 16:39:49-04:00, 2013:08:05 16:46:40-04:00, 2013:08:07 17:10:09-04:00, 2013:10:09 15:22:22-04:00, 2013:10:09 15:22:22-04:00, 2013:10:09 18:45:18-04:00, 2013:10:11 10:47:41-04:00, 2013:10:11 10:47:41-04:00, 2013:10:11 11:34:07-04:00, 2013:10:11 13:12:34-04:00, 2013:10:11 18:07:50-04:00, 2013:10:11 18:08:21-04:00, 2013:10:11 18:08:21-04:00, 2013:10:15 16:27:10-04:00, 2013:10:16 13:37:09-04:00, 2013:10:16 13:46:24-04:00, 2013:10:16 13:55:07-04:00, 2013:10:16 15:36:59-04:00, 2013:10:16 15:54:22-04:00, 2013:10:16 15:56:03-04:00, 2013:10:16 18:11:36-04:00, 2013:10:16 18:11:36-04:00, 2013:10:16 18:12:25-04:00, 2013:10:17 16:09:08-04:00, 2013:10:17 17:53:56-04:00, 2013:10:17 18:04:06-04:00, 2013:10:18 12:30:19-04:00, 2013:10:18 14:23:16-04:00, 2013:10:31 14:06:56-04:00, 2013:10:31 15:49:30-04:00, 2013:10:31 15:50:40-04:00, 2013:10:31 16:31:22-04:00, 2013:10:31 17:56:18-04:00
History Software Agent          : Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign CS6 (Macintosh), Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0, Adobe InDesign 7.0
History Changed                 : /, /metadata, /, /, /;/metadata, /metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /, /metadata, /, /, /metadata, /, /, /;/metadata, /metadata, /;/metadata, /;/metadata, /;/metadata, /metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata, /;/metadata
Derived From Instance ID        : xmp.iid:F87F117407206811822A82D386B4F47F
Derived From Document ID        : xmp.did:3EB109FD6D23681188C6EB6337FB3FD6
Derived From Original Document ID: xmp.did:01801174072068118083C9E621787E37
Derived From Rendition Class    : default
Doc Change Count                : 3926
Key Stamp Mp                    : AAAAAA==
Format                          : application/pdf
Producer                        : Adobe PDF Library 9.9
Trapped                         : False
Page Count                      : 13
Creator                         : Adobe InDesign CS5 (7.0.4)

EXIF Metadata provided by EXIF.tools