-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
executable file
·2614 lines (2305 loc) · 162 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="robots" content="noindex"> -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@urbaninstitute">
<meta name="twitter:creator" content="@urbaninstitute">
<meta name="twitter:title" content="Urban Institute Data Visualization style guide">
<meta name="twitter:description" content="This site contains guidelines that are in line with data visualization best practices and proven design principles.">
<meta name="twitter:image" content="https://urbaninstitute.github.io/graphics-styleguide/img/UrbanInstitute_0472.jpg">
<meta property="og:title" content="Urban Institute Data Visualization style guide" />
<meta property="og:description" content="This site contains guidelines that are in line with data visualization best practices and proven design principles." />
<meta property="og:image" content="https://urbaninstitute.github.io/graphics-styleguide/img/UrbanInstitute_0472.jpg" />
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="400">
<meta property="og:url" content="https://urbaninstitute.github.io/graphics-styleguide/">
<title>Urban Institute Data Visualization style guide</title>
<link rel="icon" target="_blank" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap Core CSS -->
<link target="_blank" href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link target="_blank" href="css/graphics.css" rel="stylesheet">
<!-- Urban Theme CSS -->
<link rel="stylesheet/less" type="text/css" href="css/variables.less" />
<!-- <link target="_blank" href="css/theme.css" rel="stylesheet">-->
<link target="_blank" href="css/color-column.css" rel="stylesheet">
<script src="less.min.js" type="text/javascript"></script>
<!-- Custom Fonts -->
<link target="_blank" href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link target="_blank" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link target="_blank" href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
h4 {padding: 50px 0px 5px 0px}
</style>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" target="_blank" href="http://www.urban.org" target="_blank">
<div class="logo"></div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a target="_blank" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#chart-parts">Chart Parts</a>
</li>
<li>
<a class="page-scroll" href="#color">Color</a>
</li>
<li>
<a class="page-scroll" href="#best-practices">Best Practices</a>
</li>
<li>
<a class="page-scroll" href="#accessibility">Accessibility</a>
</li>
<li>
<a class="page-scroll" href="#chartexamples">Examples</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Urban Institute Data Visualization Style Guide</h1>
<p class="intro-text">
This data visualization style guide helps the Urban Institute ensure a uniform look and feel across charts, graphs, and tables that appear in Urban publications and on the Urban website. This guide is intended for Urban employees and, as such, may include references and links to internal language and tools.
<br><br>
We have made this guide public in the hope of creating a resource for other nonprofit and research organizations and to benefit the wider data visualization community. We will update and expand this guide on an ad hoc basis depending on the changing needs of Urban staff members and evolving technologies, tools, and publication types. If you’re looking for the previous version of the Urban style guide, <a href="http://urbaninstitute.github.io/graphics-styleguide/2023/" target="_blank">click here</a>.
</p>
<a target="_blank" href="#toc" class="btn btn-circle page-scroll">
<i class="fa fa-angle-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Typography Section -->
<section id="toc" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<p>LAST UPDATED ON OCTOBER 21, 2024</p>
<p>This site contains guidelines that are consistent with current data visualization best practices and design principles. It also reduces the burden of design and color decisions on individual researchers and analysts. These guidelines are primarily intended for charts, graphs, and tables that appear on the Urban website and in Urban (PDF) publications. There are minor sizing and typographic differences between visuals formatted for the web and those appearing in PDF documents and PowerPoint presentations, which we note throughout this guide.</p>
<p>The Urban Institute Excel Macro add-in and the Urban styles package for R (<a href="https://urbaninstitute.github.io/urbnthemes/" target="_blank">urbnthemes</a>) are two open source tools Urban staff can use to more easily create and format their data visualizations for different publication types. Both tools automate much of the information in this guide, including applying formatting conventions for charts created in Urban style.</p>
<h1>Table of Contents</h1>
<ol class="centerlist">
<li><a href="#typography">Chart Typography and Sizing</a></li>
<li><a href="#excel">Using the Excel Macro</a></li>
<li><a href="#insert-figs">Inserting Figures into Urban Word Templates</a></li>
<li><a href="#third-party-tools">R Shiny, Tableau, and PowerBI Guidance</a></li>
<li><a href="#chart-parts">Chart Parts</a></li>
<li><a href="#color">Using Color in Urban Graphs and Charts</a></li>
<li><a href="#right-chart">What Is the Right Chart for Your Data?</a></li>
<li><a href="#best-practices">Best Practices for Creating Effective Charts</a></li>
<li><a href="#absolutes">Data Visualization Absolutes</a></li>
<li><a href="#accessibility">Accessibility</a></li>
<li><a href="#raceethgender">Considerations for Data related to Race, Ethnicity, and Gender</a></li>
<li><a href="#chartexamples">Chart Examples</a></li>
<li><a href="#maps">Maps</a></li>
<li><a href="#tables">Tables</a></li>
</ol>
</div>
</div>
</section>
<section id="typography" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Chart Typography and Sizing</h1>
<p>Good chart typography creates a hierarchy among elements and guides the reader through the visual. Urban uses a defined set of font sizes and styles to create this hierarchy.</p>
<p>Urban uses the <em>Lato</em> font for all our products, including the website, PDF publications, and presentations. A suitable replacement is the default Arial font. If Lato is not installed on your computer, contact the Tech and Data department.</p>
<p>The font sizes in Urban charts depend on whether the chart is produced for the web or within a PDF. The Excel macro and R theme apply the correct font sizes to both web and PDF figures.</p>
<p>Descriptive text — title, subtitle, sources, notes, and logo — are handled differently for web and print (PDF) products. For web products, all text is included in a single image (e.g., PNG) file. For print (PDF) products, descriptive text is placed directly in the Microsoft Word file and not the chart image. Data labels, axis labels, and other text used directly in the chart should be included in the chart image. </p>
<table class="type-table" border="0" cellspacing="10px" cellpadding="10px" align="left">
<tbody>
<tr style="text-transform:Uppercase; font-weight:bold; border-bottom:1px solid #000;">
<td valign="bottom"> </td>
<td valign="bottom">
<p>Font</p>
</td>
<td valign="bottom">
<p>Color</p>
</td>
<td valign="bottom">
<p>Case</p>
</td>
<td valign="bottom">
<p>PDF figures</p>
</td>
<td valign="bottom">
<p>Web figures</p>
</td>
</tr>
<tr>
<td valign="top">
<p style="font-family:Lato; font-size:11px; color:#1696d2; text-transform:uppercase">Figure number</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>#1696d2 or RGB(22, 150, 210)</p>
</td>
<td valign="top">
<p>ALL CAPS</p>
</td>
<td valign="top">
<p>8pt</p>
</td>
<td valign="top">
<p>11px</p>
</td>
</tr>
<tr>
<td valign="top">
<p style="font-size:20px;"><b>Title</b></p>
</td>
<td valign="top">
<p>Lato Black</p>
</td>
<td valign="top">
<p>#000000 or RGB(0,0,0)</p>
</td>
<td valign="top">
<p>Title (all major words capitalized)</p>
</td>
<td valign="top">
<p>12pt [inserted in the Word document, not the actual chart]</p>
</td>
<td valign="top">
<p>20px</p>
</td>
</tr>
<tr>
<td valign="top">
<p style="font-size:16px;">Subtitle</p>
</td>
<td valign="top">
<p>Lato Italic</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence (only the first word capitalized)</p>
</td>
<td valign="top">
<p>10pt [inserted in the Word document, not the actual chart]</p>
</td>
<td valign="top">
<p>16px</p>
</td>
</tr>
<tr>
<td valign="top">
<p>Axis titles</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence</p>
</td>
<td valign="top">
<p>8.5pt</p>
</td>
<td valign="top">
<p>12px</p>
</td>
</tr>
<tr>
<td valign="top">
<p>Axis labels</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence</p>
</td>
<td valign="top">
<p>8.5pt</p>
</td>
<td valign="top">
<p>12px</p>
</td>
</tr>
<tr>
<td valign="top">
<p>Data labels</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence</p>
</td>
<td valign="top">
<p>8.5pt</p>
</td>
<td valign="top">
<p>12px</p>
</td>
</tr>
<tr>
<td valign="top">
<p>Legend text</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence</p>
</td>
<td valign="top">
<p>9.5pt</p>
</td>
<td valign="top">
<p>14px</p>
</td>
</tr>
<tr>
<td valign="top">
<p>Source</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence</p>
</td>
<td valign="top">
<p>8pt</p>
</td>
<td valign="top">
<p>11px</p>
</td>
</tr>
<tr>
<td valign="top">
<p>Notes</p>
</td>
<td valign="top">
<p>Lato Regular</p>
</td>
<td valign="top">
<p>Black (#000000 or RGB(0,0,0))</p>
</td>
<td valign="top">
<p>Sentence</p>
</td>
<td valign="top">
<p>8pt</p>
</td>
<td valign="top">
<p>11px</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="container within-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<p>Most of Urban’s charts will be full width (760px for web and 6.25” for PDFs). The main content width on the Urban website is 760px, which translates to approximately 125.83 characters in Excel. In PDF products, simple figures can be 3.13” wide, which is half the width of full-size figures. </p>
</div>
</div>
</section>
<!-- Using the Excel Macro Section -->
<section id="excel" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Using the Excel Macro</h1>
<p>Urban has created an add-in for Microsoft Excel that automatically applies Urban colors, chart formatting, font styling, and font sizes to Excel figures. This set of instructions will show you how to install and use the add-in. </p>
<p>Download the Urban Institute Excel macro <a href="UrbanGraphingStyle_2024.xlam" target="_blank">here</a>. Download the WorkRise macro <a href="WorkRiseGraphingStyle_2024.xlam" target="_blank">here</a> and the Tax Policy Center macro <a href="TPCGraphingStyle_2024.xlam" target="_blank">here</a>.</p>
</div>
<div class="col-lg-8 col-lg-offset-2">
<h5>Installing the add-in on PC computers</h5>
<ol class="excel_instructions">
<li>Download the Excel add-in from the <b>Brand Identity Guidelines</b> intranet page: Your Urban > Templates > Excel > “Excel add-in for creating Urban style charts.”</li>
<li>Save the file to your computer. You can put the file anywhere, but placing it directly in the Excel AddIn folder is preferred. On Urban PC computers, the add-in folder is most likely located on the D drive at: <code>D:\Users\USERNAME\AppData\Roaming\Microsoft\AddIns\</code>. (USERNAME is your username on the computer. On other computers, the folder may be in the C: drive in the same subdirectory.)
<ol type="a">
<li>If you can’t locate the <em>AppData</em> subdirectory, you can use Excel’s built-in Themes menu to help you locate it. Under the <em>Page Layout</em> tab, select the <em>Themes</em> button. At the bottom of that menu, select “Save Current Theme.” Excel will bring you to the Document Themes folder, which is in <code>D:\Users\USERNAME\AppData\Roaming\Microsoft\folder</code>. You can copy the folder location from the top of that window, paste it into your Windows Explorer folder, and navigate to the AddIn folder from there.</li>
<li>To navigate to this AddIn folder location, you may need to unhide the AppData subdirectory. To do so, open a Windows Explorer window, click <em>Tools</em>, then <em>View</em>. You can now select “Show hidden files, folders, and drives” under the “Hidden files and folders” option.</li>
</ol>
</li>
<li>Regardless of whether you saved the file to your AddIn folder or to another location on your computer, you can now install the add-in. To do so, select the <em>File</em> tab in the ribbon.</li>
<li>At the bottom of the <em>File</em> window, select <em>Options</em>.</li>
<li>In the <em>Options</em> window, select the <em>Add-Ins</em> option near the bottom of the left pane, and then select the <em>Go...</em> button at the bottom of the larger window.</li>
<li>At this point, a menu will load. If you saved the add-in file to the “AppData” folder location, the add-in should already be listed. You can simply check the box and select OK. If you saved it anywhere else, select <em>Browse…</em> and navigate to the location where you saved the <code>UrbanGraphingStyle.xlam</code> file. (Excel may ask if you’d like to place the add-in into your Roaming folder; it is fine to select OK here.) Select OK.
<ol type="a">
<li class="security-note">SECURITY NOTE: If the ribbon tab does not appear after installing the add-in (this typically happens in a later session), it may be due to a security update from Microsoft. A detailed description of how to solve this issue can be found <a href="http://peltiertech.com/Utility30/Documentation30/RibbonDisappears.html" target="_blank">here</a>.</li>
</ol>
</li>
</ol>
<h5>Installing the add-in on Mac computers</h5>
<ol class="excel_instructions">
<li>Save the add-in to a location on your computer.</li>
<li>Under the <em>Tools</em> menu in the top toolbar, select the <em>Excel Add-Ins...</em> option.</li>
<li>Select <em>Browse…</em> and navigate to the <code>UrbanGraphingStyle.xlam</code> file. Select <em>Open</em>. The box next to the UrbanGraphStyle add-in should now be checked. In this smaller menu, select OK. You will now see the <em>Urban Graph Styles tab</em> in your Excel ribbon. The tab will appear every time you open Excel.</li>
</ol>
<h5>Using the add-in</h5>
<ol class="excel_instructions">
<li>Select the data you want to use to create your chart.</li>
<li>Click the chart option from the <em>Urban Graph Styles</em> menu that matches the style of your chart.</li>
<li>A pop-up box will appear asking if you want to format your graph for <em>Web</em> or <em>Print</em> (the <em>Cancel</em> option will close the dialog box). An Urban-formatted version of your chart will appear.</li>
<li>Edit the x-axis title and y-axis title or delete them if the units are already specified in the chart title or subtitle.</li>
<li>Edit any corresponding data cells to fix wording and capitalization as needed. Your edits should automatically appear in the chart.</li>
<li>To export your chart:
<ol type="a">
<li>On PC computers, use the <em>Export</em> menu in the add-in. You can choose a folder location and file type as you would for any other software tool.</li>
<li>On Mac computers, the <em>Export</em> menu does not exist. Instead, copy the chart (<em>Command-C</em>), open the <em>Preview</em> tool, and open a new file (<em>Command-N</em>). Save the chart (<em>Command-S</em>) and use the drop-down menu to change the file format to <em>PNG</em>. In the resulting menu, change the <em>Resolution</em> to 600 (pixels/inch). Name the file and click <em>Save</em>.</li>
</ol>
</li>
</ol>
</div>
</div>
</section>
<!-- Using the R Urban Theme Section -->
<section id="urban-theme" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Using the R Urban Theme</h1>
<p><a href="https://urbaninstitute.github.io/urbnthemes/" target="_blank">urbnthemes</a> is a set of tools for creating Urban Institute–themed plots and maps in R (the theme has been tested against ggplot2 version 3.0.0; it will not function properly with older versions of ggplot2). The package extends ggplot2 with print and map themes as well as tools that make plotting easier. A comprehensive set of examples is available at the <a href="https://urbaninstitute.github.io/r-at-urban/graphics-guide.html" target="_blank">Institute R Users Group website</a>.</p>
<p><code>library(urbnthemes)</code> makes ggplot2 output align more closely with this style guide, but it does not produce publication-ready graphics. Visual styles must still be edited using your project’s normal editing workflow. Exporting charts as PDFs rather than image files (e.g., PNG, JPEG) will allow them to be edited more easily.</p>
<p>Run the following code to install or update urbnthemes:
<br>
<code>install.packages("remotes")<br>
remotes::install_github("UrbanInstitute/urbnthemes")
</code>
</p>
<p>Run the following code at the top of each script:
<br>
<code>library(tidyverse)<br>
library(urbnthemes)<br>
set_urbn_defaults(style = "print")
</code>
<br><br>
A comprehensive review, installation instructions, and more details and tutorials about using R at Urban and the <code>urbnthemes</code> package can be found in the <a href="https://urbaninstitute.github.io/r-at-urban/graphics-guide.html" target="_blank">Urban Institute R Graphics Guide</a>.</p>
</div>
</div>
</section>
<!-- Inserting Figures into Urban Word Templates Section -->
<section id="insert-figs" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Inserting Figures into Urban Word Templates</h1>
<p>Urban Microsoft Word templates have built-in formatting to ensure correct placement of figures. To insert a figure—either as an Excel graph or as an image exported from another tool like R—follows these steps:</p>
<ol>
<li>Start with the most recent Word template for your product, which can be downloaded from Urban Explorer on the <a href="https://explorer.urban.org/page/2229" target="_blank">Brand Identity Guidelines</a> intranet page.</li>
<li>For each figure, copy and paste the figure template text from the figure number through the notes line (see image below). This will automatically apply the built-in styles to the text around the figure. </li>
<li>Write out the figure number, title, and subtitle (delete the subtitle if needed) directly in the Word file (not in the Excel graph or image).</li>
<li>Highlight the red “Figure Placer” paragraph and then paste your figure, choosing either “Use Destination Theme and Embed Workbook,” “Use Destination Theme and Link Data,” or “Paste Special … Microsoft Office Graphic Object.”</li>
<li>Write out the Source and Notes beneath the figure.</li>
</ol>
<img src="img/figure-word-template-insert.png" style="margin-top: 5rem; width: 90%;">
</div>
</div>
</section>
<!-- R Shiny, Tableau, and PowerBI Guidance Section -->
<section id="third-party-tools" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>R Shiny, Tableau, and PowerBI Guidance</h1>
<p>Urban staff use a variety of data analytics and visualization tools in their work. When it comes to R, interested users should consult the public-facing R tutorials available on the <a href="https://urbaninstitute.github.io/r-at-urban/index.html" target="_blank">Urban Github site</a> and consult the <a href="https://urbaninstitute.github.io/r-at-urban/" target="_blank">R User Group</a> for additional resources. We recommend that Urban staff consult with the Data Visualization team for additional support related to obtaining Tableau and PowerBI licenses and creating graphs or dashboards with these tools.</p>
<p>Public-facing, high-visibility data visualization tools and dashboards published at Urban are built with custom tools and undergo a full design and build process to ensure that products hit the highest accessibility, UI, and mobile-friendly design standards—all with Urban’s wider audience in mind.</p>
<p>COMM and the Tech and Data Science teams are developing guidance on R Shiny, Tableau, PowerBI, and other off-the-shelf dashboarding tools for use at Urban. Our intake processes are connected for this kind of tooling request.</p>
<p>Currently, only the R Shiny tool is approved for specific use cases. Our consensus is that R Shiny dashboards can be appropriate for highly niche audiences (e.g., other researchers or select funders), with review and input from COMM’s Design and Data Visualization teams. </p>
<p>These products are not embedded on Urban’s website. Rather, our guidance is to screenshot and link to them, as seen in this Data at Urban <a href="https://urban-institute.medium.com/local-level-data-and-tools-can-inform-efforts-to-strengthen-community-food-systems-against-climate-414235cd6d1f" target="_blank">post</a> and this <em>Urban Wire</em> <a href="https://www.urban.org/urban-wire/growing-climate-hazards-pose-risks-food-system-resiliency-nationwide-communities-color" target="_blank">post</a>. These guidelines are evolving and subject to change.</p>
</div>
</div>
</section>
<!-- chart parts Section -->
<section id="chart-parts" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Chart Parts</h1>
<p>Key elements of Urban charts are as follows:</p>
<ul>
<li>The chart should be referenced in the text.</li>
<li>Titles use headline/title case, and subtitles use sentence case; all titles are left aligned.</li>
<li>All text within the figure uses sentence-style capitalization.</li>
</ul>
<br>
<p><strong>In all Urban products, researchers should reference charts and tables in the text to provide context for the data.</strong> Figures and tables should be placed immediately after the paragraph that references them. If the chart consists of a limited number of values, consider a couple sentences of text to explain the data in lieu of an image.</p>
<p>Urban charts require a title, source line, and axis or other labels identifying the elements and units of the chart. This can be achieved by using some combination of a subtitle, axis titles, axis labels, data labels, and legend (not all elements will be necessary for every figure). Urban charts posted on the web also include an Urban tagline/logo in the lower-right corner of the figure so that when others copy and paste our charts, Urban is identified as the source.</p>
<p>For Excel charts produced for the web, add the title, subtitle, source, and notes directly in the Excel chart. Because Excel’s chart title and subtitle fields are limiting in terms of formatting, we use a regular text box for all the text at the top of the graphic, as well as for the source and notes text at the bottom.</p>
<p>In charts produced for PDF publications, add the title, subtitle, sources, and notes as text directly in the Microsoft Word file. Axis titles, labels, and the legend are added in Excel or in the R chart space directly. </p>
</div>
<div class="col-lg-12">
<h4>On the web</h4>
<img src="img/chart-typography-and-layout-2024-web.png" width="100%" />
<br /> <br/>
<h4>In print (for PDFs)</h4>
<img src="img/chart-typography-and-layout-2024-print.png" width="100%" />
</div>
<div class="col-lg-10 col-lg-offset-1">
<p>The chart parts are described in detail below.</p>
<ul>
<li><strong>Titles</strong>: Use headline case for titles and sentence case for subtitles. Keep them short and simple. Try to explain the chart in a few words and draw conclusions where possible. Use a subtitle to add qualifiers or further clarification. The unit of measurement should be mentioned only once, either in the subtitle or the y-axis label. For example, instead of a purely descriptive title, such as “Labor Force Participation Rate, Men and Women, 1950–2024,” a more active title would be “The Labor Force Participation Rate Has Declined for Men and Increased for Women.” Subtitles can be used to denote specifics about the data, such as time periods, frequency, units, or geography.</li>
<br>
<li><strong>Axis titles and labels</strong>: Use sentence-style capitalization for all text within the figure, including axis titles, data labels, and legends. In sentence-style capitalization, the first letter of the sentence and any proper names (including program names) are capitalized, and all other text is set in lowercase. For example, “Percentage of total funding,” “2021 operating expenses,” “Denver Regional Transportation District,” and “$50,000 and above.” You can use abbreviations in the axis titles and labels as long as the abbreviations are defined in the notes.</li>
<br>
<li><strong>Source</strong>: The source line should contain the source of the data for the figure and include full publication information, including the authors, title, and publication date, all in Urban’s notes citation style. All figures in Urban publications should have a source line. If the source of the data is Urban analysis, the source line can read “Authors’ analysis.”</li>
<br>
<li><strong>Notes</strong>: The notes line can include technical information about methodology, statistical explanations, and notes that apply to certain values. The notes should also define all acronyms and abbreviations used within the figure, using this format: “FPL = federal poverty level.” Notes that apply to certain cells in tables should use superscript letters as note references. Asterisks should only be used to indicate significance levels (e.g., p < 0.001, * = significant at 0.001 level).</li>
<br>
<li><strong>Legend</strong>: Stretch legends across the top of the chart between the title/subtitle and y-axis label. Order the series in the legend in a logical way, mirroring the order of the data in the chart. When possible, directly label the data in the chart and omit the legend.</li>
<br>
<li><strong>Data labels</strong>: Chart elements can be labeled to provide readers with the specific data values or additional context. Data labels should match the units of the chart and be placed as close as possible to the actual data point (e.g., top or inside a bar on a bar chart or a point on a line chart). Explanatory labels should be concise and explain important, surprising, or interesting aspects of the graph.</li>
<br>
<li><strong>Tagline</strong>: The Urban tagline is built from standard text using Lato Bold, 9pt, black, small caps, with 0.5pt of expanded character spacing. The word “Urban” is colored blue (RGB[22,150,210] or #1696d2) and “Institute” is black (RGB[0,0,0] or #000000). The Excel add-in automatically includes the tagline for web graphs. For PDF products, the tagline is added as text in the Microsoft Word file at the bottom right of the figure, with no spacing between the figure and the tagline. The tagline is omitted in government-funded products.</li>
</ul>
</div>
</div>
</section>
<!-- Color Section -->
<section id="color" class="container content-section text-center">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Color</h1>
<p>Urban's main colors are <span class="text-swatch blue-5 dark">cyan,</span> <span class="text-swatch gray-5 ">gray,</span> and <span class="text-swatch black dark">black.</span></span> <span class="text-swatch yellow-5 dark">Yellow</span> and <span class="text-swatch magenta-5 dark">magenta</span> are used as secondary colors throughout the new Urban brand. In general, yellow and magenta should be used sparingly; these colors are best for highlighting purposes, such as when drawing attention to a certain category or indicating a trend line. Tertiary colors for graphics include <span class="text-swatch space-gray-4 dark">space gray,</span> <span class="text-swatch green-5 dark">green,</span> and <span class="text-swatch red-5 dark">red,</span> and should be used infrequently. </p>
<p>When selecting colors for charts and graphs, first consider the type of data you are presenting. Usually, data for visualizations can be grouped into one of four main groups: categorical, sequential, diverging, or binary (see next sections for examples in the Urban color palette).</p>
<ul>
<li><b>Categorical palettes </b>are best to distinguish discrete chunks of data that do not have an inherent ordering (e.g., race, state of residence).</li>
<li><b>Sequential palettes </b>are appropriate when data follow a certain order, such as when data range from low to high (e.g., poverty rates, unemployment rates). The typical approach is to use light(er) colors for low(er) values and dark(er) colors for high(er) values. </li>
<li><b>Diverging palettes </b>are used to distinguish values that vary from a central value, such as the average, median, or zero. Diverging palettes will use a neutral color for the central value, such as white or gray, and then employ a sequential color palette in either direction. For example, a sequential palette for changes in per capita gross domestic product might be centered at zero with a white color, then range to dark yellow for negative values and to dark blue for positive values. The center of the diverging palette should always be labeled to avoid confusing the reader. </li>
<li><b>Binary palettes </b>are a subset of categorical palettes and are used to distinguish between two distinct groups, such as Republicans and Democrats. When comparing data on binary gender groups, do not use blue to represent men and pink to represent women. Instead, choose a color combination such as yellow and cyan or another combination of our main graphic colors. </li>
</ul>
<p>For more information about the subtleties of color and choosing colors for your data visualizations, refer to Datawrapper's blog post "<a href="https://blog.datawrapper.de/colors-for-data-vis-style-guides/" target="_blank">A detailed guide to colors in data vis style guides</a>” and <em>Nightingale</em> magazine's <a href="https://nightingaledvs.com/how-to-choose-colors-for-your-data-visualizations/" target="_blank">blog</a> <a href="https://nightingaledvs.com/tag/color/" target="_blank">posts</a> on the subject.</p>
<h4>Color combinations</h4>
<p>Urban’s core color palette consists of eight main colors, ordered below in a hierarchy from core colors to less commonly used colors. All Urban tool sets, including the Excel add-in and <a href="Urban Institute.xml" target="_blank">color palette</a>, and the <a href="https://urbaninstitute.github.io/urbnthemes/" target="_blank">urbnthemes</a> R package, follow this hierarchy. </p>
<h4>Shades of main colors</h4>
<p>Specific shades of each main categorical color are found below for use in graphs that require sequential and diverging palettes. It should be noted that tints and shades of colors in the Excel add-in and <a href="Urban Institute.xml" target="_blank">color palette</a> do not exactly match these colors.</p>
<p>The palettes below offers multiple options for combining colors in Urban charts, though only the combinations shown in the first set of each section are included in the Excel add-in and R theme. When in doubt, individuals are encouraged to consult the Urban Design and/or Data Visualization teams for assistance in choosing color combinations.</p>
<h4>Main graphic colors</h4>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor blue-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-5 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor black dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-5">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-4 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-5 dark">
<div class="color-code"></div>
</div>
</div>
</div>
<h4>Text and contrast</h4>
<p>Urban Institute data visualizations should strive to meet <a href="https://www.w3.org/WAI/WCAG2AA-Conformance" target="_blank">Web Content Accessibility Guidelines (WCAG)</a> to make web content most accessible to people with disabilities. (Read more about those international standards <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">here</a> and in the Urban Institute report <a href="https://www.urban.org/research/publication/do-no-harm-guide-centering-accessibility-data-visualization" target="_blank"><em>Do No Harm Guide: Centering Accessibility in Data Visualization</em></a>). Urban follows WCAG 2.0 Level AA guidance to ensure that background color and text pairings maximize contrast.</p>
<p>The color palettes below contain the correct white or black text to pass the WCAG AA ratings for contrast at smaller text sizes (18px or less).</p>
<h4>Shades of main colors</h4>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor blue-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-3">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-4">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-5">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-6 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor blue-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#CFE8F3","#A2D4EC","#73BFE2","#46ABDB","#1696D2","#12719E","#0A4C6A","#062635"];</p>
</div>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor gray-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-3">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-4">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-5 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-6">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor gray-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#F5F5F5","#ECECEC","#E3E3E3","#DCDBDB","#D2D2D2","#9D9D9D","#696969","#353535"];</p>
</div>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor yellow-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-3">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-4">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-5 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-6">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor yellow-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#FFF2CF","#FCE39E","#FDD870","#FCCB41","#FDBF11","#E88E2D","#CA5800","#843215"];</p>
</div>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor magenta-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-3">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-4">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-5">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-6 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor magenta-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#F5CBDF","#EB99C2","#E46AA7","#E54096","#EC008B","#AF1F6B","#761548","#351123"];</p>
</div>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor green-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-3">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-4">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-5">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-6">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor green-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#DCEDD9","#BCDEB4","#98CF90","#78C26D","#55B748","#408941","#2C5C2D","#1A2E19"];</p>
</div>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor space-gray-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-3 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-4 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-6 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor space-gray-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#D5D5D4","#ADABAC","#848081","#5C5859","#332D2F","#262223","#1A1717","#0E0C0D"];</p>
</div>
<div class="multi-group-container">
<div class="color eight">
<div class="swatch groupcolor red-1 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-2 ">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-3">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-4 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-6 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-7 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color eight">
<div class="swatch groupcolor red-8 dark">
<div class="color-code"></div>
</div>
</div>
<p class="color-code-hex">var colors=["#F8D5D4","#F1AAA9","#E9807D","#E25552","#DB2B27","#A4201D","#6E1614","#370B0A"];</p>
</div>
<h4>One group</h4>
For one color group, grey should not be used as it loses focus while magenta draws attention
<div class="multi-group-container">
<div class="color one">
<div class="swatch groupcolor blue-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color one">
<div class="swatch groupcolor black dark ">
<div class="color-code"></div>
</div>
</div>
</div>
<h4>Two groups</h4>
<h5>Categorical</h5>
<div class="multi-group-container">
<div class="color two">
<div class="swatch groupcolor blue-5 dark">
<div class="color-code"></div>
</div>
</div>
<div class="color two">
<div class="swatch groupcolor black dark">
<div class="color-code"></div>
</div>
</div>
</div>
<div class="multi-group-container">
<div class="color two">
<div class="swatch groupcolor blue-5 dark">
<div class="color-code"></div>
</div>