-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
302 lines (251 loc) · 13.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<head
href="https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<title>Visual History</title>
</head>
<!-- ai file: qns_plotly.png -->
<style media="screen,print">
#g-qns_plotly_png-box,
#g-qns_plotly_png-box .g-artboard {
margin: 0 auto;
}
#g-qns_plotly_png-box p {
margin: 0;
}
#g-qns_plotly_png-box .g-aiAbs {
position: absolute;
}
#g-qns_plotly_png-box .g-aiImg {
position: absolute;
top: 0;
display: block;
width: 100% !important;
}
#g-qns_plotly_png-box .g-aiSymbol {
position: absolute;
box-sizing: border-box;
}
#g-qns_plotly_png-box .g-aiPointText p {
white-space: nowrap;
}
#g-qns_plotly_png-Artboard_1 {
position: relative;
overflow: hidden;
}
</style>
<body>
<!-- <section class="section"> -->
<!-- <div class="content is-medium"> -->
<!-- <div class="column is-one-third">
<img src="./img/Philippa.gif" alt="Philippa of Hainault, spouse of Edward III">
<p class="source">Philippa of Hainault, spouse of Edward III</p>
</div> -->
<!-- <div class="column">
<img src="./img/Philippa.gif" alt="Philippa of Hainault, spouse of Edward III" class="align-center large">
<p class="source">Philippa of Hainault, spouse of Edward III</p>
</div> -->
<br>
<!-- <div class="columns is-multiline is-mobile"> -->
<!-- <div class="columns is-mobile is-centered"> -->
<!-- <div class="columns"> -->
<div class="container">
<!-- <div class="column-container"> -->
<div class="column is-one-third">
<img src="./img/Philippa.gif" alt="Philippa of Hainault, spouse of Edward III" class="align-center large" />
<p class="source">Philippa of Hainault</p>
<!-- </img> -->
</div>
</div>
<!-- <div class="column is-one-half"> -->
<div class="column is-two-thirds">
<h2 class="subtitle">Game of Queens: <br>Royal Consorts in British History</h2>
<p class="byline">By Marie-France Han •<span class="date">August 2023</span> •<a class="link"
href="https://github.com/mfhan/project1"> Get the data</a></p>
</div>
<div class="column is-two-thirds">
<!-- <p class="column"> -->
<p>
<!-- <i>"It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife..."</i>
<br>
To borrow from opening sentence of Jane Austen's <i>Pride and Prejudice</i> reflected a historical truth, nowhere was it more for was indeed -->
For a good chunk of the United Kingdom's history, the choice of a royal spouse and the country they hailed
from
were matters of critical national importance for a British monarch.
</p><br>
<divleft>
<img src="./img/MargaretAnjou.jpg" alt="Margaret of Anjou" height="300" width="300" class="align-left">
<p class="source">Margaret of Anjou, Henry VI's consort</p>
</img>
</divleft>
<p>For this island nation, picking the right spouse was key to building or maintaining vital political
alliances
with Continental powers. Conversely, marrying the wrong person, without a proper dowry or royal
connections,
could weaken the legitimacy of the royal lineage and encourage dissent. </p>
<p>Where did these (mostly) women come from? And do their places of origin reveal historic trends? </p>
<br>
<p>Let's find out, using <a href="https://github.com/mfhan/project1/">data analysis</a> and visualization.
</p>
<p>(Note: this timeline starts with the House of Normandy (1066) and ends with the
current House of Windsor, a time span of more than 860 years. Records from the Houses of Wessex and
Denmark
(886-1066) are too complex and unreliable,
with dates lost to time and uncrowned consorts of uncertain status.
Our analysis starts with the Norman Conquest and ends with Queen Camilla.)</p>
<!-- </div> --> <br>
<div class='chart-holder' align="center">
<div class="column is-one-third" text-align="center">
<!-- <div class='image-text'> -->
<!-- <div class='subtitle' align="center">Consorts, With Country of Origin</div> -->
<iframe title="British Consorts' Country of Birth, 1066-2023" aria-label="Bar Chart"
id="datawrapper-chart-r9d7X" src="https://datawrapper.dwcdn.net/r9d7X/1/" scrolling="no" frameborder="0"
style="width: 0; min-width: 100% !important; border: none;" height="1225" data-external="1"></iframe>
<script type="text/javascript">!function () { "use strict"; window.addEventListener("message", (function (a) { if (void 0 !== a.data["datawrapper-height"]) { var e = document.querySelectorAll("iframe"); for (var t in a.data["datawrapper-height"]) for (var r = 0; r < e.length; r++)if (e[r].contentWindow === a.source) { var i = a.data["datawrapper-height"][t] + "px"; e[r].style.height = i } } })) }();
</script>
</div>
</div>
<!-- <div class="column is-two-thirds"> -->
<div class="column">
<p>
From the get-go, we notice countries bunched together, succeeding themselves. There's a long series of
French-born consorts (blue bars) during the first third of the series, a gaggle of English-born spouses
(pink)
in the middle, and a spate of Germans (orange) in the final quarter.
</p>
<p>Several trends are visible: <br>
-- There are no fewer than <strong>10 French women</strong> (blue bars) among the first 15
consorts, and 13 among the first 20. <br>
-- But after that number, there is a <strong>shift toward English queens</strong> (pink bars).<br>
-- And further down the list, a series of <strong>six German consorts</strong> including Albert of Saxe Coburg
and Gotha.
<!--
<p>How about a cumulative view? </p>
</br> -->
<!-- <div class='chart-holder' align="center">
<p class='graph-title' text-align="center">Country Totals Along the Years</p>
<div id="g-qns_plotly_png-box" class="ai2html">
<div id="g-qns_plotly_png-Artboard_1" class="g-artboard" style="max-width: 845px;max-height: 389px"
data-aspect-ratio="2.172" data-min-width="0">
<div style="padding: 0 0 46.0354% 0;"></div>
<img id="g-qns_plotly_png-Artboard_1-img" class="g-qns_plotly_png-Artboard_1-img g-aiImg" alt=""
src="qns_plotly_png-Artboard_1.jpg" />
</div>
</div>
</div> -->
<p class="column">
<!-- <p> The stacked bar chart clearly illustrates the political and military imperatives behind the choice of
women
from the same country, over and over. </p> -->
<h3 class="subtitle">Looking for a French Spouse</h3>
<p>For most of the middle ages, from 1066 to around 1470, securing a French spouse was the best way
for English sovereigns to maintain familial connections with France, with which it was
competing
for a staggering number of territories.</p>
<p>Most famously, <strong>Eleanor of Aquitaine</strong> in 1154 brought with her a duchy that was larger
than the
kingom of France at the time.</p>
<p>In 1170, <strong>Margaret of France</strong> was picked because her dowry was the much disputed
territory of
Vexin north of Paris.</p>
<divright>
<img src="./img/Henrietta.jpg" alt="Henrietta of France, wife of Charles I" width="300" />
<p class="source" text-align="right">Henrietta of France, wife of Charles I</p>
</divright>
<p><strong>Catherine of Valois'</strong> marriage to <strong>Henry V</strong> in 1420 was part of a plan
to
eventually place her husband on the throne of France, and thereby end the Hundred Years' War. </p>
<p>When Yorkist <strong>King Edward IV</strong> secretly wed widowed commoner <strong>Elizabeth
Woodville</strong> in 1464, his relationship with his allies never recovered and more dynastic
bloodshed ensued.</p>
<p>Two centuries later, <strong>Catherine of Braganza</strong> was picked for <strong>Charles II</strong>
in 1660
after her father became the head of Portugal's colonial empire -- and she offered an opportunity for an
alliance
between the two kingdoms.</p>
<!-- <div class="align-right medium"> -->
<!-- <img class="column is-one-third" float="right ">
<img src="./img/Henrietta.jpg" alt="Henrietta of France, wife of Charles I" width="300"
class="align-right medium" />
</img> -->
<p>Once the United Kingdom adopted a constitutional regime that severely curtailed the monarch's powers,
the
international importance of a consort diminished.</p>
<p>Of course, royal spouses still had to meet strigents requirements; when young <strong>Queen Victoria</strong>
married Albert, a minor German prince, opposition parties
refused to
grant him a British peerage.</p>
<p><strong>Queen Alexandra's</strong> family had been relatively obscure until 1852, when her father
became king
of Denmark. She was then deemed an appropriate wife for the future <strong>Edward VII</strong>, son of
Queen
Victoria.</p>
<p><strong>Edward VIII</strong> found out when he resolved to marry American divorcee Wallis Simpson --
but the
monarch's choice of a consort ceased to be a matter of vital <strong>international</strong> importance.
</p>
<!-- <p class="column">
</p> -->
<br>
<h3 class="subtitle">Staying Power</h3>
<p class="column">We've taken a look at the composition and sequence of British royal marriages, but could
there
be a more qualitative yeardstick? How about total time spent as royal consort? We've got that!</p>
<div class='chart-holder' align="center">
<div class="column is-two-thirds" text-align="center">
<iframe title="Country of Birth of British Consorts, 1066-2023" aria-label="Bar Chart"
id="datawrapper-chart-azeIE" src="https://datawrapper.dwcdn.net/azeIE/1/" scrolling="no" frameborder="0"
style="width: 0; min-width: 100% !important; border: none;" height="1179" data-external="1"></iframe>
<script
type="text/javascript">!function () { "use strict"; window.addEventListener("message", (function (a) { if (void 0 !== a.data["datawrapper-height"]) { var e = document.querySelectorAll("iframe"); for (var t in a.data["datawrapper-height"]) for (var r = 0; r < e.length; r++)if (e[r].contentWindow === a.source) { var i = a.data["datawrapper-height"][t] + "px"; e[r].style.height = i } } })) }();</script>
</div>
</div>
<p class="column">
Being a royal spouse can be a lifelong mission (as evidenced by the light blue column on the penultimate
spot -- that's <strong>Prince Philip</strong>, who stayed at his post for 69 years) or evaporate in an
instant: many women, even queens, died in labor, and as shown by the extremely short pink bars in the middle
of the
chart, from Ann Boleyn to Catherine Parr,
made the mistake of marrying King <strong>Henry VIII</strong> to sometimes tragic results.
</p>
<div class='chart-holder' align="center">
<div class="column is-three-fourths" text-align="center">
<iframe title="Total Tenure in years, by Country" text-align="center" aria-label="Column Chart"
id="datawrapper-chart-IzZ4L" src="https://datawrapper.dwcdn.net/IzZ4L/2/" scrolling="no" frameborder="0"
style="width: 0; min-width: 100% !important; border: none;" height="400" data-external="1"></iframe>
<script type="text/javascript">!function () { "use strict"; window.addEventListener("message", (function (a) { if (void 0 !== a.data["datawrapper-height"]) { var e = document.querySelectorAll("iframe"); for (var t in a.data["datawrapper-height"]) for (var r = 0; r < e.length; r++)if (e[r].contentWindow === a.source) { var i = a.data["datawrapper-height"][t] + "px"; e[r].style.height = i } } })) }();
</script>
<!-- <img class="align-center" min-width="450" min-height="300" width="600" height="350" max-width="900"
max-height="600" alt="Bar chart Comparing Total Tenure by Country" src='./viz/totaltime.png'>
<div class='caption'>source: wikipedia</div> -->
</div>
</div>
<p>
Given France's front-runner status in the number of British consorts it produced, its dominant position
in cumulative tenure time shouldn't be a shock. Still, it is striking that England, with no fewer than
10
consorts, doesn't even reach the 100 year mark and is actually beaten by Germany. </p>
<p>This low total tenure time posted by English consorts clearly illustrates that, for most of history,
royal
marriages were above all a diplomatic tool aimed at securing the country's international standing in an
always insecure world.
</p>
<p><a href="https://github.com/mfhan/project1/" target="_blank">Link to GitHub repo and notebooks</a>
</p>
</div>
</div>
</div>
<script type='text/javascript' src="script.js"></script>
</body>
</html>