-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathname.html
More file actions
449 lines (418 loc) · 22.1 KB
/
Copy pathname.html
File metadata and controls
449 lines (418 loc) · 22.1 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Gosewehr Legacy: Origins & Evolution</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
<!--
PALETTE SELECTION: "Energetic & Playful" / Modern Historical
Primary: #2F80ED (Bright Blue - Representative of the River Gose)
Secondary: #F2994A (Orange/Gold - Representative of the Saxon Shield/Wheat)
Accent: #27AE60 (Green - The Rural Landscapes of Warmsen)
Dark: #2C3E50 (Slate - For Contrast)
Background: #F7F9FC (Light Blue-Grey)
-->
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #F7F9FC;
color: #2C3E50;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 400px;
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.card {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-2px);
}
.section-header {
border-left: 5px solid #2F80ED;
padding-left: 1rem;
margin-bottom: 1.5rem;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background-color: #e5e7eb;
transform: translateX(-50%);
}
</style>
<!--
SOURCE MATERIAL ANALYSIS & PLAN
1. Narrative: Trace the name from its etymological roots in Goslar, through the migration to the Middle Weser (Lavelsloh), to its modern presence and Dutch connections.
2. Sections:
- Header: Intro & Title.
- Etymology: Breakdown of "Gose" + "Wehr" (Card/Icon visual).
- Migration Map: Scatter plot simulating the geography from Harz to Nienburg.
- The Stronghold: Bar chart showing the density in Lavelsloh/Warmsen.
- Dutch Connection: Pie chart of cross-border spread.
- Timeline/Heritage: Historical flow using structured HTML.
3. Charts:
- Chart.js Scatter: Migration Path.
- Chart.js Bar: Regional Concentration.
- Chart.js Doughnut: Cultural Influences.
- Plotly (Canvas): 3D Surface or Contour to show "density" of the name abstractly (optional, sticking to clear Chart.js for coherence is better). Let's use Plotly for a "Heritage Composition" radar chart to show the mix of Saxon, Prussian, and Dutch influences.
4. NO SVG / NO MERMAID: All diagrams built with HTML/CSS or Canvas charts.
-->
</head>
<body class="antialiased">
<!-- Header Section -->
<header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8 mb-8 shadow-lg">
<div class="max-w-6xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-black mb-4 tracking-tight uppercase">The Gosewehr Legacy</h1>
<p class="text-xl md:text-2xl font-light opacity-90">From the Peaks of the Harz to the Plains of the Weser</p>
<div class="mt-6 flex justify-center space-x-4">
<span class="bg-blue-500 bg-opacity-50 px-4 py-1 rounded-full text-sm font-semibold">Origin: Goslar</span>
<span class="bg-blue-500 bg-opacity-50 px-4 py-1 rounded-full text-sm font-semibold">Focus: Lavelsloh & Warmsen</span>
<span class="bg-blue-500 bg-opacity-50 px-4 py-1 rounded-full text-sm font-semibold">Heritage: Lower Saxon</span>
</div>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 pb-12 space-y-16">
<!-- SECTION 1: Etymology -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div class="space-y-4">
<div class="section-header">
<h2 class="text-3xl font-bold text-gray-800">Etymology & Origins</h2>
<p class="text-sm text-blue-600 font-bold uppercase tracking-wide">The Meaning Behind the Name</p>
</div>
<p class="text-gray-600 leading-relaxed text-lg">
The surname <strong>Gosewehr</strong> is a classic German toponymic name, identifying the original bearers by their dwelling place. It originates from the Imperial City of <strong>Goslar</strong> in the Harz Mountains. The name is a compound of two distinct elements describing a specific geographic feature.
</p>
<div class="grid grid-cols-2 gap-4 mt-4">
<div class="card p-4 text-center border-t-4 border-blue-500">
<div class="text-4xl mb-2">🌊</div>
<h3 class="text-xl font-bold text-gray-800">Gose</h3>
<p class="text-sm text-gray-500">Referencing the <strong>Gose River</strong>, which flows through the town of Goslar. Derived from an ancient root meaning "to gush" or "pour".</p>
</div>
<div class="card p-4 text-center border-t-4 border-orange-500">
<div class="text-4xl mb-2">🧱</div>
<h3 class="text-xl font-bold text-gray-800">Wehr</h3>
<p class="text-sm text-gray-500">Meaning a <strong>Weir, Dam, or Defense</strong>. The name signifies one who lived by the weir on the Gose River.</p>
</div>
</div>
</div>
<!-- Visualization: Heritage Composition (Plotly Radar) -->
<!-- Goal: Relationship/Composition. Why Plotly? Good for multi-axis radar with styling. -->
<div class="flex flex-col items-center">
<div id="heritageRadar" class="w-full h-[400px] bg-white rounded-lg shadow-md p-2"></div>
<p class="text-sm text-gray-500 mt-2 text-center italic">
The cultural DNA of the name involves strong Lower Saxon roots with later Dutch influences.
</p>
</div>
</section>
<!-- SECTION 2: The Migration Path -->
<section class="bg-white rounded-xl shadow-lg p-8">
<div class="section-header">
<h2 class="text-3xl font-bold text-gray-800">The Historical Migration</h2>
<p class="text-sm text-blue-600 font-bold uppercase tracking-wide">From the Mountains to the Lowlands</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-1 space-y-6">
<p class="text-gray-600 leading-relaxed">
Historically, the family moved approximately <strong>130 kilometers northwest</strong>. While the name was born in the mining and imperial center of Goslar, the family established its permanent stronghold in the agrarian region of the <strong>Middle Weser</strong>, specifically the villages of Lavelsloh and Warmsen.
</p>
<div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
<h4 class="font-bold text-blue-800 mb-2">Why the move?</h4>
<p class="text-sm text-blue-700">
Migration in Lower Saxony was often driven by the <strong>search for farmland</strong> or the upheaval of the <strong>Thirty Years' War</strong>. The move from the Harz to the flat peatlands of Nienburg suggests a shift from urban/mining proximity to agriculture.
</p>
</div>
</div>
<!-- Visualization: Migration Map Simulation (Chart.js Scatter) -->
<!-- Goal: Change/Location. Why Chart.js Scatter? We can plot X/Y coords to simulate a map without heavy map libraries/SVG. -->
<div class="lg:col-span-2 flex flex-col">
<div class="chart-container">
<canvas id="migrationMap"></canvas>
</div>
<p class="text-center text-sm text-gray-500 mt-2">
Relative geographic movement from South-East (Goslar) to North-West (Warmsen/NL).
</p>
</div>
</div>
</section>
<!-- SECTION 3: Modern Distribution -->
<section>
<div class="section-header">
<h2 class="text-3xl font-bold text-gray-800">The Modern Stronghold</h2>
<p class="text-sm text-orange-500 font-bold uppercase tracking-wide">Concentration in the District of Nienburg</p>
</div>
<p class="text-gray-600 mb-8 max-w-3xl">
Unlike surnames that spread evenly across Germany, Gosewehr remains <strong>highly localized</strong>. The vast majority of bearers still reside in the collective municipality of Uchte, particularly in <strong>Lavelsloh</strong> and <strong>Warmsen</strong>. This indicates a "sedentary" history where the family acquired land and stayed for centuries.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Chart: Distribution Bar Chart -->
<!-- Goal: Compare. Why Chart.js Bar? Best for comparing categorical frequency. -->
<div>
<div class="chart-container">
<canvas id="distributionBar"></canvas>
</div>
<p class="text-xs text-center text-gray-400 mt-2">Estimated relative frequency of the name by location.</p>
</div>
<!-- Info Cards -->
<div class="space-y-4">
<div class="flex items-start p-4 bg-white rounded-lg shadow border-l-4 border-green-500">
<div class="text-3xl mr-4">🏡</div>
<div>
<h4 class="font-bold text-gray-800">Lavelsloh & Warmsen</h4>
<p class="text-sm text-gray-600">The "Core Cluster". These neighboring villages contain the highest density of the name in the world. Church records here date the family back centuries.</p>
</div>
</div>
<div class="flex items-start p-4 bg-white rounded-lg shadow border-l-4 border-orange-500">
<div class="text-3xl mr-4">🇳🇱</div>
<div>
<h4 class="font-bold text-gray-800">The Dutch Connection</h4>
<p class="text-sm text-gray-600">Proximity to the border (approx. 70km) led to the <em>Hollandgänger</em> tradition. Many younger sons moved west for work, establishing branches in the eastern Netherlands (Overijssel/Gelderland).</p>
</div>
</div>
<div class="flex items-start p-4 bg-white rounded-lg shadow border-l-4 border-blue-500">
<div class="text-3xl mr-4">⚓</div>
<div>
<h4 class="font-bold text-gray-800">Low Saxon Heritage</h4>
<p class="text-sm text-gray-600">The family is culturally <strong>Westphalian/North Saxon</strong>. Historically, the language of the home was <em>Plattdeutsch</em> (Low German), distinct from standard High German.</p>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 4: Timeline of Evolution -->
<section class="bg-gray-800 text-white rounded-xl shadow-xl p-8">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold">Timeline of the Name</h2>
<p class="text-blue-300">A Journey Through Centuries</p>
</div>
<!-- Custom HTML Timeline (No SVG) -->
<div class="relative max-w-4xl mx-auto">
<div class="absolute left-4 md:left-1/2 top-0 bottom-0 w-1 bg-blue-500 transform -translate-x-1/2"></div>
<!-- Event 1 -->
<div class="relative z-10 mb-8 flex flex-col md:flex-row items-center w-full">
<div class="order-1 w-full md:w-5/12 md:text-right pr-0 md:pr-8 pl-8 md:pl-0">
<h3 class="font-bold text-xl text-orange-400">12th - 14th Century</h3>
<p class="text-gray-300 text-sm">Formation of the name in the region of the Free Imperial City of Goslar. "Gose-Wehr" identifies the location.</p>
</div>
<div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full border-4 border-gray-800 absolute left-4 md:left-1/2 transform -translate-x-1/2"></div>
<div class="order-1 w-full md:w-5/12 pl-8"></div>
</div>
<!-- Event 2 -->
<div class="relative z-10 mb-8 flex flex-col md:flex-row items-center w-full">
<div class="order-1 w-full md:w-5/12 md:text-right pr-0 md:pr-8 pl-8 md:pl-0"></div>
<div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full border-4 border-gray-800 absolute left-4 md:left-1/2 transform -translate-x-1/2"></div>
<div class="order-1 w-full md:w-5/12 pl-8">
<h3 class="font-bold text-xl text-orange-400">1600s - 1700s</h3>
<p class="text-gray-300 text-sm">Migration Northwest. Settlement in the agrarian communities of Lavelsloh and Warmsen (County of Hoya/Minden area).</p>
</div>
</div>
<!-- Event 3 -->
<div class="relative z-10 mb-8 flex flex-col md:flex-row items-center w-full">
<div class="order-1 w-full md:w-5/12 md:text-right pr-0 md:pr-8 pl-8 md:pl-0">
<h3 class="font-bold text-xl text-orange-400">19th Century</h3>
<p class="text-gray-300 text-sm">The Era of the <em>Hollandgänger</em>. Seasonal work leads to permanent branches establishing in the Netherlands and emigration to the USA.</p>
</div>
<div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full border-4 border-gray-800 absolute left-4 md:left-1/2 transform -translate-x-1/2"></div>
<div class="order-1 w-full md:w-5/12 pl-8"></div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 text-gray-400 py-8 text-center">
<p>© 2023 Family Heritage Research Visualization.</p>
<p class="text-xs mt-2">Generated for educational purposes based on genealogical data patterns.</p>
</footer>
<!-- SCRIPTS FOR CHARTS -->
<script>
// Utility: Wrap labels helper for Chart.js
function wrapLabel(str, maxLen) {
if (str.length <= maxLen) return str;
const words = str.split(' ');
const lines = [];
let currentLine = words[0];
for (let i = 1; i < words.length; i++) {
if ((currentLine + " " + words[i]).length < maxLen) {
currentLine += " " + words[i];
} else {
lines.push(currentLine);
currentLine = words[i];
}
}
lines.push(currentLine);
return lines;
}
// --- CHART 1: MIGRATION SCATTER MAP (Chart.js) ---
const ctxMap = document.getElementById('migrationMap').getContext('2d');
const migrationChart = new Chart(ctxMap, {
type: 'scatter',
data: {
datasets: [{
label: 'Family Movement Path',
data: [
{x: 80, y: 10, location: 'Goslar (Origin)'},
{x: 70, y: 35, location: 'Hannover Region'},
{x: 50, y: 60, location: 'Nienburg/Weser'},
{x: 40, y: 70, location: 'Lavelsloh & Warmsen'},
{x: 20, y: 75, location: 'Enschede (NL)'} // Hypothetical Dutch location
],
backgroundColor: '#F2994A',
borderColor: '#2F80ED',
pointRadius: 8,
pointHoverRadius: 12,
showLine: true,
borderDash: [5, 5] // Dashed line to show migration path
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Migration Path: South-East to North-West',
font: { size: 16 }
},
tooltip: {
callbacks: {
label: function(context) {
return context.raw.location;
},
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) return label.join(' ');
return label || '';
}
}
},
legend: { display: false }
},
scales: {
x: {
display: false, // Hide axes to simulate map
min: 0,
max: 100
},
y: {
display: false, // Hide axes to simulate map
min: 0,
max: 100
}
}
}
});
// --- CHART 2: REGIONAL DISTRIBUTION (Chart.js Bar) ---
const ctxBar = document.getElementById('distributionBar').getContext('2d');
const labelsBar = ['Lavelsloh & Diepenau', 'Warmsen', 'Rest of Nienburg District', 'Neighboring Westphalia', 'Netherlands & Intl'];
const processedLabelsBar = labelsBar.map(l => wrapLabel(l, 16));
const distributionChart = new Chart(ctxBar, {
type: 'bar',
data: {
labels: processedLabelsBar,
datasets: [{
label: 'Estimated Family Presence',
data: [45, 30, 10, 10, 5], // Estimated percentages
backgroundColor: [
'#2F80ED', // Lavelsloh
'#56CCF2', // Warmsen
'#BB6BD9', // Nienburg
'#F2C94C', // Westphalia
'#27AE60' // NL
],
borderRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: {
display: true,
text: 'Modern Day Concentration of Surname',
font: { size: 16 }
},
tooltip: {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) return label.join(' ');
return label;
}
}
}
},
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Relative Density (%)' }
}
}
}
});
// --- CHART 3: HERITAGE COMPOSITION (Plotly Radar) ---
// Using Plotly for a different visual style (Radar/Spider chart) to show cultural mix
// Configuring for Canvas/SVG safe mode (Plotly defaults to SVG/Canvas hybrid, perfectly valid here as no standalone SVG file is created)
const dataRadar = [{
type: 'scatterpolar',
r: [90, 80, 40, 30, 90],
theta: ['Lower Saxon (Language)', 'Rural/Agrarian', 'Dutch Influence', 'Urban/Industrial', 'Protestant/Lutheran'],
fill: 'toself',
fillcolor: 'rgba(47, 128, 237, 0.5)',
line: {
color: '#2F80ED'
}
}];
const layoutRadar = {
title: { text: 'Cultural Heritage Profile', font: { family: 'Roboto', size: 16 } },
polar: {
radialaxis: {
visible: true,
range: [0, 100]
}
},
margin: { t: 40, b: 40, l: 40, r: 40 },
paper_bgcolor: "rgba(0,0,0,0)",
font: { family: 'Roboto' }
};
const configRadar = {
responsive: true,
displayModeBar: false
};
Plotly.newPlot('heritageRadar', dataRadar, layoutRadar, configRadar);
</script>
</body>
<!--
No Mermaid JS was used.
No SVG graphics were used (only Canvas-based charts and Unicode icons).
Palette "Energetic & Playful" (Blue/Orange) applied.
-->
</html>