Beispiel:SVG-Landkarten-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Statistik und Karte - 1</title>
<style>
.land {
stroke: hsl(212, 44%, 28%);
stroke-width: 0.5;
}
.land:hover, .land:focus {
stroke: #00000;
stroke-width: 3;
}
.class1 {
fill: oklch(0.97 0.09 97.04);
}
.class2 {
fill: oklch(0.93 0.14 89.69);
}
.class3 {
fill: oklch(0.87 0.18 82.41);
}
.class4 {
fill: oklch(0.79 0.23 75.32);
}
.class5 {
fill: oklch(0.69 0.27 68.71);
}
.class6 {
fill: oklch(0.55 0.38 57.14);
}
.class7 {
fill: oklch(0.45 0.47 41.29);
}
.class8 {
fill: oklch(0.36 0.53 29.12);
}
.class9 {
fill: oklch(0.22 0.50 13.02);
}
rect{
stroke: hsl(212, 44%, 28%);
stroke-width: 0.5;
}
.dataset {
fill: midnightblue;
font-size: 16px;
.land-name {
text-anchor: end;
font-weight:bold;
}
#value {fill: white;}
}
.land-name {
text-anchor: end;
font-weight:bold;
}
.wikitable {
background-color: #ffffff;
border: thin solid #aaa;
border-collapse: collapse;
th{
background-color: #f1f3f4;
border: thin solid #d5d5d5;
padding: 0.2em 1em;
}
td {line-height: 1.5;border: thin solid #aaa;white-space: nowrap;padding: 0.2em;}
td:not(:first-child) {text-align: right;}
}
svg {
max-height: 80vh;
}
body {
display: grid;
grid-template-columns: min-content 1fr 1fr;
gap: 1em;
max-width: 80em;
}
h1 {grid-column: 1 / -1;}
</style>
</head>
<body>
<h1>Datentabellen - ergänzt durch Karte</h1>
<table class="wikitable" id="tabledata">
<thead>
<tr>
<th scope="col" rowspan="2">Bundesland</th>
<th scope="colgroup" colspan="3">Arbeitslosenrate</th>
</tr>
<tr>
<th scope="col">2016</th>
<th scope="col">2020</th>
<th scope="col">2024</th>
</tr>
</thead>
<tr>
<td>Baden-Württemberg</td>
<td>3.8%</td>
<td>3.7%</td>
<td>4.2%</td>
</tr>
<tr>
<td>Bayern</td>
<td>3.6%</td>
<td>3.0%</td>
<td>3.4%</td>
</tr>
<tr>
<td>Berlin</td>
<td>10.2%</td>
<td>9.1%</td>
<td>8.7%</td>
</tr>
<tr>
<td>Brandenburg</td>
<td>8.2%</td>
<td>6.0%</td>
<td>5.6%</td>
</tr>
<tr>
<td>Bremen</td>
<td>10.8%</td>
<td>11.2%</td>
<td>10.6%</td>
</tr>
<tr>
<td>Hamburg</td>
<td>7.3%</td>
<td>6.4%</td>
<td>6.9%</td>
</tr>
<tr>
<td>Hessen</td>
<td>5.4%</td>
<td>4.6%</td>
<td>5.1%</td>
</tr>
<tr>
<td>Mecklenburg-Vorpommern</td>
<td>10.2%</td>
<td>7.4%</td>
<td>6.8%</td>
</tr>
<tr>
<td>Niedersachsen</td>
<td>6.0%</td>
<td>5.8%</td>
<td>6.2%</td>
</tr>
<tr>
<td>Nordrhein-Westfalen</td>
<td>7.9%</td>
<td>6.9%</td>
<td>7.3%</td>
</tr>
<tr>
<td>Rheinland-Pfalz</td>
<td>5.2%</td>
<td>4.6%</td>
<td>5.0%</td>
</tr>
<tr>
<td>Saarland</td>
<td>7.4%</td>
<td>7.3%</td>
<td>6.9%</td>
</tr>
<tr>
<td>Sachsen</td>
<td>7.8%</td>
<td>6.0%</td>
<td>6.5%</td>
</tr>
<tr>
<td>Sachsen-Anhalt</td>
<td>9.9%</td>
<td>7.3%</td>
<td>7.0%</td>
</tr>
<tr>
<td>Schleswig-Holstein</td>
<td>6.4%</td>
<td>5.3%</td>
<td>5.6%</td>
</tr>
<tr>
<td>Thüringen</td>
<td>7.0%</td>
<td>6.0%</td>
<td>6.6%</td>
</tr>
</table>
<object id="svgObject"
data="/images/1/1a/Deutschland-Karte.svg"
type="image/svg+xml">
<param name="src" value="/images/1/1a/Deutschland-Karte.svg">
<!-- Fallback -->
<img src="Deutschland-Karte.png" alt="Choropletenkarte der Arbeitslosenquote der Bundesländer">
</object>
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/Datenvisualisierung/interaktive_Landkarten#Choroplethenkarte">Datenvisualisierung - interaktive Landkarten</a>.</p>
<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get the Object by ID
var mySVG = document.getElementById('svgObject'),
svgDoc;
// Get the SVG document inside the Object tag - Wait until it's loaded!
mySVG.addEventListener('load',function() {
svgDoc = mySVG.contentDocument;
console.log('SVG contentDocument ist geladen!');
const table = document.getElementById('tabledata');
const rows = table.querySelectorAll('tr');
// Initialize the result array for ranking
const result = [];
rows.forEach((row, index) => {
const cells = row.querySelectorAll('td, th');
// Skip header rows
if (cells.length === 4 && index > 0) {
const bundesland = cells[0].textContent.trim();
const rate2016 = parseFloat(cells[1].textContent.trim().replace('%', ''));
// Add entry to result array
result.push({ bundesland, rate2016 });
}
});
// Sort entries by 2016 rates (highest to lowest)
result.sort((a, b) => b.rate2016 - a.rate2016);
//load stylesheet - only one rule!
let sheet = svgDoc.styleSheets[0];
sheet.insertRule('@media all { .level-1{fill: oklch(0.97 0.09 97.04);} .level-2{fill: oklch(0.93 0.14 89.69);} .level-3{fill: oklch(0.87 0.18 82.41);} .level-4{fill: oklch(0.79 0.23 75.32);} .level-5{fill: oklch(0.69 0.27 68.71);} .level-6{fill: oklch(0.55 0.38 57.14);} .level-7{fill: oklch(0.45 0.47 41.29);} .level-8{fill:oklch(0.36 0.53 29.12);} .level-9{fill:oklch(0.22 0.50 13.02);} }', 1);
// Assign levels and classes
result.forEach(entry => {
const { bundesland, rate2016 } = entry;
const svgItem = svgDoc.querySelector('#'+bundesland);
let levelClass;
if (rate2016 < 4) levelClass = 'level-1';
else if (rate2016 < 5.5) levelClass = 'level-3';
else if (rate2016 < 7) levelClass = 'level-4';
else if (rate2016 < 8.5) levelClass = 'level-5';
else if (rate2016 < 10) levelClass = 'level-7';
else levelClass = 'level-9';
if (svgItem) {
svgItem.classList.add(levelClass);
}
});
console.log(result);
}, false);
});
</script>
</body></html>
