-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
280 lines (254 loc) · 13 KB
/
Copy pathindex.html
File metadata and controls
280 lines (254 loc) · 13 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Peter Broad</title>
<meta property="og:title" content="Peter Broad: information designer" />
<meta property="og:description" content="Creating charts, dashboards and visual systems that help people understand complex information" />
<meta property="og:image" content="https://broadpeter.github.io/portfolio-images/image-project-2.jpg" />
<meta property="og:url" content="https://broadpeter.github.io" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://api.fontshare.com" />
<link rel="icon" type="image/svg+xml" href="portfolio-images/favicon.svg" />
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap" />
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap" />
<link rel="stylesheet" href="portfolio.css" />
<link rel="stylesheet" href="portfolio-dark.css" />
</head>
<body>
<div class="dark-toggle" aria-label="Toggle dark mode" style="display: none">
<span>Dark</span>
<button id="dark-toggle-btn" role="switch" aria-checked="false" aria-label="Dark mode"></button>
</div>
<main id="page-main" class="page-main">
<h1 id="page-title" class="page-title">Peter Broad</h1>
<div class="intro-columns" aria-label="Page introduction">
<p id="page-intro" class="intro page-intro"> Creating charts, dashboards and visual systems that help people understand complex information
</p>
<div class="intro-body-group">
<p id="page-body-text" class="body-text page-body-text">
With a background in policy research, I’m interested in designing and building data graphics that are clear, engaging and true to the subject they represent.
</p>
<p id="page-body-text-2" class="body-text page-body-text">
I like to build visual systems that help teams communicate consistently across products, and pay attention to the details that make information easier to understand and use.
</p>
</div>
</div>
<hr id="divider-1" class="divider divider-1" />
<section id="images-section" class="content-section images-section" aria-labelledby="images-subheading">
<h2 id="images-subheading" class="section-subheading">Work</h2>
<div id="image-caption-pair-1" class="image-caption-pair content-item">
<div class="image-frame">
<img
id="test-image-1"
class="placeholder test-image"
src="portfolio-images/frame-14b.png"
alt="Preview of the Real Time Indicators Dashboard project"
/>
</div>
<div class="image-meta">
<p id="caption-1" class="caption image-caption">
<span class="caption-text">Real Time Indicators Dashboard</span>
</p>
<p id="image-description-1" class="blog-description">A public dashboard making a complex range of rapidly changing economic and social indicators easy to interpret. The design replaced the need for a weekly bulletin freeing up analyst resources.</p>
<a href="https://www.ons.gov.uk/economy/economicoutputandproductivity/output/articles/economicactivityandsocialchangerealtimeindicatorsukdashboard/2026-03-05" target="_blank" rel="noopener noreferrer" class="image-link">
<span>Visit site </span>
<span class="caption-arrow" aria-hidden="true">
<svg class="arrow-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8H13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
<path d="M9 4L13 8L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
</div>
</div>
<div id="image-caption-pair-2" class="image-caption-pair content-item">
<div class="image-frame">
<img
id="test-image-2"
class="placeholder test-image"
src="portfolio-images/image-project-2.jpg"
alt="Preview of the ONS Chart Styles project"
/>
</div>
<div class="image-meta">
<p id="caption-2" class="caption image-caption">
<span class="caption-text">ONS Chart Styles</span>
</p>
<p id="image-description-2" class="blog-description">A reusable visual language for ONS statistical charts, developed collaboratively, defining consistent and clear chart styles and design patterns across products. Being rolled out to replace inconsistent outputs across the organisation.</p>
</div>
</div>
<div id="image-caption-pair-3" class="image-caption-pair content-item">
<div class="image-frame">
<img
id="test-image-3"
class="placeholder test-image"
src="portfolio-images/image-project-3.jpg"
alt="Preview of the Weekly Deaths Dashboard project"
/>
</div>
<div class="image-meta">
<p id="caption-3" class="caption image-caption">
<span class="caption-text">
Weekly Deaths Dashboard
</span>
</p>
<p id="image-description-3" class="blog-description">A visual overview of weekly mortality data, built with the analytical team, providing key trends and statistical context without overwhelming users. Highlighted as best practice by the UK Statistics Authority.</p>
<a href="https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/articles/deathsregisteredweeklyinenglandandwales/2025-03-26" target="_blank" rel="noopener noreferrer" class="image-link">
<span>Visit site </span>
<span class="caption-arrow" aria-hidden="true">
<svg class="arrow-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8H13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
<path d="M9 4L13 8L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
</div>
</div>
<div id="image-caption-pair-4" class="image-caption-pair content-item">
<div class="image-frame">
<img
id="test-image-4"
class="placeholder test-image"
src="portfolio-images/image-project-4c.jpg"
alt="Preview of the ONS data visualisation guidance project"
/>
</div>
<div class="image-meta">
<p id="caption-4" class="caption image-caption">
<span class="caption-text">
Data Visualisation Guidance
</span>
</p>
<p id="image-description-4" class="blog-description">The data visualisation section of the ONS Service Manual provides clear guidance for improving statistical graphics, addressing practical issues overlooked by existing resources. It is used as a reference point by teams across ONS and other organisations.</p>
<a href="https://service-manual.ons.gov.uk/data-visualisation/" target="_blank" rel="noopener noreferrer" class="image-link">
<span>Visit site </span>
<span class="caption-arrow" aria-hidden="true">
<svg class="arrow-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8H13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
<path d="M9 4L13 8L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
</div>
</div>
<div id="image-caption-pair-5" class="image-caption-pair content-item">
<div class="image-frame">
<img
id="test-image-5"
class="placeholder test-image"
src="portfolio-images/frame-6.png"
alt="Preview of the Editorial infographics at Citizens Advice project"
/>
</div>
<div class="image-meta">
<p id="caption-5" class="caption image-caption">
<span class="caption-text">
Editorial infographics at Citizens Advice
</span>
</p>
<p id="image-description-5" class="blog-description">A variety of charts, diagrams and explanatory graphics to support policy reports, presentations and social media. Established a new visual communication capability within the policy team.</p>
</div>
</div>
</section>
<hr id="divider-2" class="divider divider-2" />
<section id="blog-section" class="content-section blog-section" aria-labelledby="blog-subheading">
<h2 id="blog-subheading" class="section-subheading">Thoughts</h2>
<div id="blog-pair-1" class="blog-pair content-item">
<p id="blog-heading-1" class="blog-heading">
<span class="blog-heading-text">Data visualisation's digital production problem</span>
</p>
<p id="blog-description-1" class="blog-description">Make charts analogue again? Why we struggle to match pre-digital data design, and why AI may help</p>
<a href="https://graphpaper.substack.com/p/data-visualisations-digital-production" target="_blank" rel="noopener noreferrer" class="image-link">
<span>Read on Substack</span>
<span class="caption-arrow" aria-hidden="true">
<svg class="arrow-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8H13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
<path d="M9 4L13 8L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
</div>
<div id="blog-pair-2" class="blog-pair content-item" hidden>
<p id="blog-heading-2" class="blog-heading">
<span class="blog-heading-text">Blog heading 2</span>
<span class="caption-arrow blog-heading-arrow" aria-hidden="true">
<svg class="arrow-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8H13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
<path d="M9 4L13 8L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</p>
<p id="blog-description-2" class="blog-description">Blog description 2</p>
</div>
<div id="blog-pair-3" class="blog-pair content-item" hidden>
<p id="blog-heading-3" class="blog-heading">
<span class="blog-heading-text">Blog heading 3</span>
<span class="caption-arrow blog-heading-arrow" aria-hidden="true">
<svg class="arrow-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8H13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
<path d="M9 4L13 8L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</p>
<p id="blog-description-3" class="blog-description">Blog description 3</p>
</div>
</section>
<hr id="divider-3" class="divider divider-3" />
<section id="contact-section" class="content-section contact-section" aria-label="Contact information">
<div id="contact-columns">
<div id="footer-item-1" class="footer-item">
<p id="contact-description" class="blog-description">
Based in London, I'm a Senior Data Visualisation Specialist for the Office for National Statistics
</p>
</div>
<div id="footer-item-2" class="footer-item">
<p id="contact-description-2" class="blog-description">
I use tools like Figma, Svelte and d3, and AI-assisted workflows
</p>
</div>
<div id="footer-item-3" class="footer-item">
<p id="contact-description-3" class="blog-description">
I'm interested in visual culture, information design and <a href="https://broadpeter.github.io/photos.html" target="_blank" rel="noopener noreferrer">taking photos</a>
</p>
</div>
</div>
<div id="footer-base">
<p class="blog-description">Designed and built by PB · 2026 · <a href="mailto:peter.broad@gmail.com">Email me</a></p>
</div>
</section>
</main>
<script>
const btn = document.getElementById('dark-toggle-btn');
const root = document.documentElement;
const pageTitle = document.getElementById('page-title');
const stored = localStorage.getItem('theme');
if (stored === 'dark') { root.setAttribute('data-theme', 'dark'); btn.setAttribute('aria-checked', 'true'); }
btn.addEventListener('click', () => {
const isDark = root.getAttribute('data-theme') === 'dark';
if (isDark) {
root.removeAttribute('data-theme');
btn.setAttribute('aria-checked', 'false');
localStorage.setItem('theme', 'light');
} else {
root.setAttribute('data-theme', 'dark');
btn.setAttribute('aria-checked', 'true');
localStorage.setItem('theme', 'dark');
}
});
if (pageTitle) {
const fadeDistance = 220;
const updateTitleOpacity = () => {
const scrollY = window.scrollY || window.pageYOffset;
const opacity = Math.max(0, 1 - scrollY / fadeDistance);
pageTitle.style.opacity = opacity.toFixed(3);
pageTitle.style.pointerEvents = opacity < 0.05 ? 'none' : 'auto';
};
window.addEventListener('scroll', updateTitleOpacity, { passive: true });
updateTitleOpacity();
}
</script>
</body>
</html>