25:["$","title",null,{"children":"Reise um die Welt - Österreichs Außenhandel 2025 | FHOÖ Information Visualization | Observable"}] 49:T283b,handelAnimation = { const width = 900; const height = 620; const wrapper = document.createElement("div"); Object.assign(wrapper.style, { position: "relative", left: "50%", width: "100vw", marginLeft: "-50vw", boxSizing: "border-box", display: "flex", justifyContent: "center", alignItems: "center", overflow: "hidden", background: "#eaf4ff", padding: "28px 20px 36px", minHeight: `${height + 64}px` }); const animationContainer = document.createElement("div"); Object.assign(animationContainer.style, { position: "relative", width: "100%", maxWidth: `${width}px`, margin: "0 auto" }); // MP3 aus den Observable File Attachments laden const audioUrl = await FileAttachment( "around-the-world.mp3" ).url(); const audio = document.createElement("audio"); audio.src = audioUrl; audio.loop = true; audio.preload = "auto"; audio.volume = 0.35; // Musik-Button const musicButton = document.createElement("button"); musicButton.type = "button"; musicButton.textContent = "♫ Musik einschalten"; musicButton.setAttribute("aria-pressed", "false"); Object.assign(musicButton.style, { position: "absolute", zIndex: "20", top: "12px", right: "12px", display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: "150px", padding: "9px 15px", border: "1px solid rgba(23, 51, 92, 0.32)", borderRadius: "999px", background: "rgba(255, 255, 255, 0.9)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", boxShadow: "0 3px 12px rgba(23, 51, 92, 0.15)", color: "#17335c", fontFamily: "system-ui, sans-serif", fontSize: "13px", fontWeight: "700", cursor: "pointer", transition: "background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease" }); const setMusicButtonState = playing => { musicButton.textContent = playing ? "♫ Musik ausschalten" : "♫ Musik einschalten"; musicButton.setAttribute( "aria-pressed", String(playing) ); musicButton.style.background = playing ? "rgba(23, 51, 92, 0.94)" : "rgba(255, 255, 255, 0.9)"; musicButton.style.color = playing ? "#ffffff" : "#17335c"; musicButton.style.borderColor = playing ? "rgba(23, 51, 92, 0.94)" : "rgba(23, 51, 92, 0.32)"; }; musicButton.addEventListener("mouseenter", () => { musicButton.style.transform = "translateY(-1px)"; musicButton.style.boxShadow = "0 6px 18px rgba(23, 51, 92, 0.22)"; }); musicButton.addEventListener("mouseleave", () => { musicButton.style.transform = "translateY(0)"; musicButton.style.boxShadow = "0 3px 12px rgba(23, 51, 92, 0.15)"; }); musicButton.addEventListener("click", async () => { if (audio.paused) { try { await audio.play(); setMusicButtonState(true); } catch (error) { console.error( "Die Musik konnte nicht gestartet werden:", error ); musicButton.textContent = "Musik konnte nicht starten"; } } else { audio.pause(); setMusicButtonState(false); } }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .attr("preserveAspectRatio", "xMidYMid meet") .style("display", "block") .style("width", "100%") .style("height", "auto") .style("overflow", "visible"); const defs = svg.append("defs"); defs.append("filter") .attr("id", "vehicle-shadow") .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%") .html(` `); defs.append("marker") .attr("id", "arrow-export") .attr("viewBox", "0 0 10 10") .attr("refX", 8) .attr("refY", 5) .attr("markerWidth", 7) .attr("markerHeight", 7) .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("fill", "#f5b700"); defs.append("marker") .attr("id", "arrow-import") .attr("viewBox", "0 0 10 10") .attr("refX", 8) .attr("refY", 5) .attr("markerWidth", 7) .attr("markerHeight", 7) .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("fill", "#ef6c21"); const centerX = width / 2; const centerY = height / 2 + 45; const radius = 180; svg.append("text") .attr("x", centerX) .attr("y", 62) .attr("text-anchor", "middle") .attr("font-family", "system-ui, sans-serif") .attr("font-size", 28) .attr("font-weight", 700) .attr("fill", "#17335c") .text("Globaler Warenhandel"); svg.append("text") .attr("x", centerX) .attr("y", 94) .attr("text-anchor", "middle") .attr("font-family", "system-ui, sans-serif") .attr("font-size", 16) .attr("fill", "#536b8e") .text("Österreichs Import- und Exportströme"); svg.append("circle") .attr("cx", centerX) .attr("cy", centerY) .attr("r", radius) .attr("fill", "#6da8e5") .attr("stroke", "#284d87") .attr("stroke-width", 5) .attr("filter", "url(#vehicle-shadow)"); [-90, -45, 0, 45, 90].forEach(offset => { svg.append("ellipse") .attr("cx", centerX) .attr("cy", centerY) .attr("rx", radius) .attr("ry", Math.max(8, radius - Math.abs(offset))) .attr("fill", "none") .attr("stroke", "rgba(255,255,255,0.24)") .attr("stroke-width", 1.2); }); [0.35, 0.65].forEach(scale => { svg.append("ellipse") .attr("cx", centerX) .attr("cy", centerY) .attr("rx", radius * scale) .attr("ry", radius) .attr("fill", "none") .attr("stroke", "rgba(255,255,255,0.24)") .attr("stroke-width", 1.2); }); svg.append("ellipse") .attr("cx", centerX) .attr("cy", centerY) .attr("rx", 325) .attr("ry", 215) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 3) .attr("stroke-dasharray", "11 10") .attr("opacity", 0.9); svg.append("path") .attr("d", ` M 140 405 C 80 275, 150 175, 285 160 `) .attr("fill", "none") .attr("stroke", "#f5b700") .attr("stroke-width", 18) .attr("stroke-linecap", "round") .attr("marker-end", "url(#arrow-export)") .attr("opacity", 0.95); svg.append("text") .attr("x", 98) .attr("y", 365) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 26) .attr("font-weight", 800) .attr("fill", "#111111") .attr("transform", "rotate(-60 98 365)") .text("EXPORT"); svg.append("path") .attr("d", ` M 760 225 C 825 325, 780 445, 660 485 `) .attr("fill", "none") .attr("stroke", "#ef6c21") .attr("stroke-width", 18) .attr("stroke-linecap", "round") .attr("marker-end", "url(#arrow-import)") .attr("opacity", 0.95); svg.append("text") .attr("x", 755) .attr("y", 340) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 26) .attr("font-weight", 800) .attr("fill", "#111111") .attr("transform", "rotate(58 755 340)") .text("IMPORT"); const ship = svg.append("g") .attr("filter", "url(#vehicle-shadow)"); ship.append("path") .attr("d", "M -46 8 L 47 8 L 34 24 L -32 24 Z") .attr("fill", "#d39720"); ship.append("rect") .attr("x", -35) .attr("y", -5) .attr("width", 26) .attr("height", 13) .attr("fill", "#ef6c21"); ship.append("rect") .attr("x", -7) .attr("y", -5) .attr("width", 26) .attr("height", 13) .attr("fill", "#f8c61c"); ship.append("rect") .attr("x", 21) .attr("y", -15) .attr("width", 18) .attr("height", 23) .attr("fill", "#ffffff"); ship.append("rect") .attr("x", 25) .attr("y", -11) .attr("width", 5) .attr("height", 6) .attr("fill", "#193967"); ship.append("rect") .attr("x", -20) .attr("y", -20) .attr("width", 28) .attr("height", 15) .attr("fill", "#284d87"); const truck = svg.append("g") .attr("filter", "url(#vehicle-shadow)"); truck.append("rect") .attr("x", -45) .attr("y", -18) .attr("width", 58) .attr("height", 34) .attr("rx", 3) .attr("fill", "#ef6c21"); truck.append("path") .attr("d", "M 13 -10 L 33 -10 L 43 2 L 43 16 L 13 16 Z") .attr("fill", "#f8c61c"); truck.append("rect") .attr("x", 20) .attr("y", -6) .attr("width", 12) .attr("height", 9) .attr("fill", "#dff2ff"); [-25, 0, 30].forEach(x => { truck.append("circle") .attr("cx", x) .attr("cy", 18) .attr("r", 8) .attr("fill", "#193967"); truck.append("circle") .attr("cx", x) .attr("cy", 18) .attr("r", 3) .attr("fill", "#91b8e4"); }); const routeX = t => centerX + 325 * Math.cos(t); const routeY = t => centerY + 215 * Math.sin(t); const routeAngle = t => { const dx = -325 * Math.sin(t); const dy = 215 * Math.cos(t); return Math.atan2(dy, dx) * 180 / Math.PI; }; let startTime; let frame; const animate = now => { if (startTime == null) { startTime = now; } const elapsed = now - startTime; const shipT = (elapsed / 18000) * Math.PI * 2; const truckT = Math.PI + (elapsed / 22000) * Math.PI * 2; ship.attr( "transform", `translate(${routeX(shipT)},${routeY(shipT)}) rotate(${routeAngle(shipT)})` ); truck.attr( "transform", `translate(${routeX(truckT)},${routeY(truckT)}) rotate(${routeAngle(truckT)})` ); frame = requestAnimationFrame(animate); }; frame = requestAnimationFrame(animate); invalidation.then(() => { cancelAnimationFrame(frame); audio.pause(); audio.currentTime = 0; audio.removeAttribute("src"); audio.load(); }); animationContainer.append( svg.node(), musicButton, audio ); wrapper.append(animationContainer); return wrapper; }4a:T4369,exportkarteResponsiv = { /* * ============================================================ * 1. DATEN LADEN * ============================================================ */ const excelData = workbookAusfuhr2025.sheet(0, { range: "A3:C", headers: true }); const world = await d3.json( "https://raw.githubusercontent.com/datasets/geo-countries/main/data/countries.geojson" ); /* * ============================================================ * 2. HILFSFUNKTIONEN * ============================================================ */ const parseWert = value => { if (typeof value === "number") return value; const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) return NaN; return text.includes(",") ? Number( text .replace(/\./g, "") .replace(",", ".") ) : Number(text.replace(/\./g, "")); }; const style = (element, styles) => { Object.assign(element.style, styles); return element; }; const euroFormat = new Intl.NumberFormat("de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }); const kurzFormat = value => { if (value >= 1_000_000_000) { return `${( value / 1_000_000_000 ).toLocaleString("de-AT", { minimumFractionDigits: 1, maximumFractionDigits: 1 })} Mrd. €`; } return `${( value / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 })} Mio. €`; }; /* * ============================================================ * 3. EXCEL-DATEN AUFBEREITEN * ============================================================ */ const handelsdaten = excelData .map(row => ({ iso: String(row.ISOA2 ?? "") .trim() .toUpperCase(), name: String(row.Name ?? "").trim(), wert: parseWert(row.Wert) })) .filter( row => /^[A-Z]{2}$/.test(row.iso) && Number.isFinite(row.wert) ); const wertNachISO = d3.rollup( handelsdaten, rows => d3.sum(rows, row => row.wert), row => row.iso ); const nameNachISO = new Map( handelsdaten.map(row => [ row.iso, row.name ]) ); /* * ============================================================ * 4. GEOJSON MIT HANDELSDATEN VERBINDEN * ============================================================ */ const isoFallback = new Map([ ["france", "FR"], ["frankreich", "FR"], ["norway", "NO"], ["kosovo", "XK"], ["serbia", "XS"], ["somaliland", "SO"], ["northern cyprus", "CY"] ]); const getGeoName = feature => String( feature.properties?.name ?? feature.properties?.ADMIN ?? feature.properties?.NAME ?? feature.properties?.NAME_EN ?? "" ).trim(); const getGeoISO = feature => { const properties = feature.properties ?? {}; const iso = String( properties["ISO3166-1-Alpha-2"] ?? properties.ISO_A2 ?? properties.iso_a2 ?? properties.iso2 ?? "" ) .trim() .toUpperCase(); if (/^[A-Z]{2}$/.test(iso)) { return iso; } return ( isoFallback.get( getGeoName(feature).toLowerCase() ) ?? "" ); }; const mapData = world.features.map(feature => { const iso = getGeoISO(feature); const geoName = getGeoName(feature); return { ...feature, properties: { ...feature.properties, iso, wert: wertNachISO.get(iso), anzeigename: nameNachISO.get(iso) ?? geoName ?? "Unbekanntes Land" } }; }); const anzahlTreffer = mapData.filter( feature => Number.isFinite(feature.properties.wert) ).length; /* * ============================================================ * 5. TOP-10-RANGLISTE * ============================================================ */ const ranking = Array.from( wertNachISO, ([iso, wert]) => ({ iso, wert, name: nameNachISO.get(iso) ?? iso }) ).sort((a, b) => d3.descending(a.wert, b.wert) ); const top10 = ranking .slice(0, 10) .map((land, index) => ({ ...land, rang: index + 1 })); const top10ISO = new Set( top10.map(land => land.iso) ); const top10Features = mapData.filter( feature => top10ISO.has(feature.properties.iso) ); /* * ============================================================ * 6. FARBSKALA * ============================================================ */ const zweitstaerksterWert = ranking[1]?.wert ?? 1; const ausreisserGrenze = 52_500_000_000; const anzahlBlaueIntervalle = 8; const intervallBreite = zweitstaerksterWert / anzahlBlaueIntervalle; const blaueGrenzen = d3 .range(1, anzahlBlaueIntervalle + 1) .map(index => intervallBreite * index); const colorDomain = [ ...blaueGrenzen, ausreisserGrenze ]; const colorRange = [ "#eef6fb", "#d9ebf6", "#bddcef", "#96c7e2", "#69acd2", "#438fc1", "#2873ad", "#155895", "#083f73", "#111111" ]; const legendenFormat = value => { if ( Math.abs(value - ausreisserGrenze) < 1 ) { return "≥ 52,5 Mrd. €"; } if (value >= 1_000_000_000) { return `${( value / 1_000_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 1 })} Mrd. €`; } return `${( value / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 })} Mio. €`; }; const colorConfig = { type: "threshold", domain: colorDomain, range: colorRange, label: "Ausfuhrwert in Euro", tickFormat: legendenFormat, unknown: "#d4d9dd" }; /* * ============================================================ * 7. UI-ELEMENTE * ============================================================ */ const container = style( document.createElement("div"), { width: "100%", maxWidth: "1100px", minWidth: "0", margin: "0 auto", padding: "0", boxSizing: "border-box", overflowX: "hidden", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif" } ); const chartContainer = style( document.createElement("div"), { width: "100%", maxWidth: "100%", minWidth: "0", boxSizing: "border-box", overflowX: "hidden" } ); const controlsContainer = style( document.createElement("div"), { display: "flex", justifyContent: "flex-start", alignItems: "center", marginTop: "4px" } ); const toggleButton = style( document.createElement("button"), { appearance: "none", border: "1px solid #8193a6", borderRadius: "999px", padding: "8px 15px", background: "#ffffff", color: "#24384d", fontFamily: "inherit", fontSize: "14px", fontWeight: "650", lineHeight: "1.2", cursor: "pointer", boxShadow: "0 1px 2px rgba(0,0,0,0.06)", transition: "background 140ms ease, border-color 140ms ease, box-shadow 140ms ease" } ); toggleButton.type = "button"; toggleButton.textContent = "Top 10 anzeigen"; toggleButton.setAttribute( "aria-pressed", "false" ); const rankingContainer = style( document.createElement("div"), { display: "none", width: "100%", marginTop: "20px", paddingTop: "18px", borderTop: "1px solid #d9e0e6", boxSizing: "border-box" } ); const rankingTitle = style( document.createElement("div"), { marginBottom: "12px", color: "#1e3347", fontSize: "17px", fontWeight: "750" } ); rankingTitle.textContent = "Die zehn exportstärksten Partnerländer"; const rankingGrid = style( document.createElement("div"), { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: "10px 14px", width: "100%", minWidth: "0" } ); /* * ============================================================ * 8. TOP-10-CARDS * ============================================================ */ for (const land of top10) { const istDeutschland = land.iso === "DE"; const row = style( document.createElement("div"), { display: "grid", gridTemplateColumns: "28px minmax(0, 1fr)", gap: "9px", alignItems: "center", minWidth: "0", padding: "10px 12px", border: istDeutschland ? "1px solid #355f80" : "1px solid #dde4ea", borderRadius: "8px", background: istDeutschland ? "#dbe7f1" : "#ffffff", boxSizing: "border-box" } ); const rank = style( document.createElement("div"), { display: "flex", alignItems: "center", justifyContent: "center", width: "26px", height: "26px", border: istDeutschland ? "1px solid #355f80" : "1px solid #8193a6", borderRadius: "50%", background: istDeutschland ? "#355f80" : "#ffffff", color: istDeutschland ? "#ffffff" : "#24384d", fontSize: "12px", fontWeight: "750" } ); rank.textContent = String(land.rang); const text = style( document.createElement("div"), { minWidth: "0" } ); const country = style( document.createElement("div"), { overflow: "hidden", color: "#213548", fontSize: "13px", fontWeight: "650", textOverflow: "ellipsis", whiteSpace: "nowrap" } ); country.textContent = `${land.name} (${land.iso})`; const value = style( document.createElement("div"), { marginTop: "2px", color: "#607080", fontSize: "12px" } ); value.textContent = kurzFormat(land.wert); text.append(country, value); row.append(rank, text); rankingGrid.append(row); } rankingContainer.append( rankingTitle, rankingGrid ); controlsContainer.append( toggleButton ); container.append( chartContainer, controlsContainer, rankingContainer ); /* * ============================================================ * 9. KARTE ZEICHNEN * ============================================================ */ let top10Visible = false; const renderChart = () => { const verfuegbareBreite = chartContainer .getBoundingClientRect() .width || container .getBoundingClientRect() .width || 1100; const chartWidth = Math.max( 320, Math.min( 1100, Math.floor(verfuegbareBreite) ) ); const chartHeight = Math.max( 360, Math.min( 620, Math.round(chartWidth * 0.56) ) ); const marks = [ Plot.sphere({ fill: "#cfe2ef", stroke: "#6f8fa5", strokeWidth: 1.2 }), Plot.geo(mapData, { fill: feature => feature.properties.wert, stroke: "none", title: feature => { const { anzeigename, iso, wert } = feature.properties; const land = iso ? `${anzeigename} (${iso})` : anzeigename; return Number.isFinite(wert) ? `${land}\n${euroFormat.format(wert)}` : `${land}\nKeine Daten vorhanden`; } }), /* * Permanente Ländergrenzen. */ Plot.geo(mapData, { fill: "none", stroke: "#6f8798", strokeWidth: 0.65, pointerEvents: "none" }) ]; if (top10Visible) { marks.push( Plot.geo(top10Features, { fill: "none", stroke: "#17212b", strokeWidth: 2.1, pointerEvents: "none" }) ); } const chart = Plot.plot({ width: chartWidth, height: chartHeight, projection: "equal-earth", marginTop: 50, marginRight: 20, marginBottom: 20, marginLeft: 20, title: "Österreichische Exporte 2025", subtitle: top10Visible ? "Die zehn exportstärksten Partnerländer sind hervorgehoben" : `${anzahlTreffer} Exportpartnerländer`, color: { ...colorConfig, legend: false }, marks }); style(chart, { display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: "0 auto", overflow: "hidden" }); /* * Responsive Legende. */ const legendWidth = Math.max( 280, Math.min( 980, chartWidth - 30 ) ); const legend = Plot.legend({ color: colorConfig, width: legendWidth, marginLeft: 15, marginRight: 15 }); style(legend, { display: "block", width: "100%", maxWidth: "100%", boxSizing: "border-box", margin: "0 auto 4px", overflow: "hidden" }); /* * Hover-Effekt nur auf der ersten Länderflächenebene. */ const geoGroups = Array.from( chart.querySelectorAll( 'g[aria-label="geo"]' ) ); const countryGroup = geoGroups[1] ?? null; const countryPaths = countryGroup ? Array.from( countryGroup.querySelectorAll("path") ) : []; for (const path of countryPaths) { path.style.cursor = "pointer"; path.style.transition = [ "filter 140ms ease", "stroke 140ms ease", "stroke-width 140ms ease" ].join(", "); const resetHover = () => { path.style.filter = ""; path.setAttribute( "stroke", "none" ); path.setAttribute( "stroke-width", "0" ); }; path.addEventListener( "pointerenter", () => { path.style.filter = "brightness(1.25) drop-shadow(0 0 3px rgba(0,0,0,0.55))"; path.setAttribute( "stroke", "#111111" ); path.setAttribute( "stroke-width", "1.7" ); } ); path.addEventListener( "pointerleave", resetHover ); path.addEventListener( "pointercancel", resetHover ); } const chartBlock = style( document.createElement("div"), { width: "100%", maxWidth: "100%", minWidth: "0", boxSizing: "border-box", overflowX: "hidden" } ); chartBlock.append( legend, chart ); chartContainer.replaceChildren( chartBlock ); }; /* * ============================================================ * 10. INTERAKTION * ============================================================ */ toggleButton.addEventListener( "mouseenter", () => { toggleButton.style.background = top10Visible ? "#e7eef4" : "#f4f7f9"; toggleButton.style.borderColor = "#5f7489"; } ); toggleButton.addEventListener( "mouseleave", () => { toggleButton.style.background = top10Visible ? "#edf2f6" : "#ffffff"; toggleButton.style.borderColor = "#8193a6"; } ); toggleButton.addEventListener( "click", () => { top10Visible = !top10Visible; toggleButton.setAttribute( "aria-pressed", String(top10Visible) ); toggleButton.textContent = top10Visible ? "Top 10 ausblenden" : "Top 10 anzeigen"; toggleButton.style.background = top10Visible ? "#edf2f6" : "#ffffff"; toggleButton.style.boxShadow = top10Visible ? "inset 0 0 0 1px rgba(36,56,77,0.08)" : "0 1px 2px rgba(0,0,0,0.06)"; rankingContainer.style.display = top10Visible ? "block" : "none"; renderChart(); } ); /* * ============================================================ * 11. RESPONSIVE NEUBERECHNUNG * ============================================================ */ renderChart(); let letzteBreite = 0; const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(entries => { const breite = entries[0]?.contentRect?.width ?? 0; if ( breite > 0 && Math.abs( breite - letzteBreite ) > 2 ) { letzteBreite = breite; renderChart(); } }) : null; resizeObserver?.observe(container); invalidation.then(() => { resizeObserver?.disconnect(); }); return container; }4b:T4542,importkarteResponsiv = { /* * ============================================================ * 1. DATEN LADEN * ============================================================ */ const excelData = workbookEinfuhr2025.sheet(0, { range: "A3:C", headers: true }); const world = await d3.json( "https://raw.githubusercontent.com/datasets/geo-countries/main/data/countries.geojson" ); /* * ============================================================ * 2. HILFSFUNKTIONEN * ============================================================ */ const parseWert = value => { if (typeof value === "number") { return value; } const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) { return NaN; } return text.includes(",") ? Number( text .replace(/\./g, "") .replace(",", ".") ) : Number(text.replace(/\./g, "")); }; const style = (element, styles) => { Object.assign(element.style, styles); return element; }; const euroFormat = new Intl.NumberFormat("de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }); const kurzFormat = value => { if (value >= 1_000_000_000) { return `${( value / 1_000_000_000 ).toLocaleString("de-AT", { minimumFractionDigits: 1, maximumFractionDigits: 1 })} Mrd. €`; } return `${( value / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 })} Mio. €`; }; /* * ============================================================ * 3. EXCEL-DATEN AUFBEREITEN * ============================================================ */ const handelsdaten = excelData .map(row => ({ iso: String(row.ISOA2 ?? "") .trim() .toUpperCase(), name: String(row.Name ?? "").trim(), wert: parseWert(row.Wert) })) .filter( row => /^[A-Z]{2}$/.test(row.iso) && Number.isFinite(row.wert) ); const wertNachISO = d3.rollup( handelsdaten, rows => d3.sum(rows, row => row.wert), row => row.iso ); const nameNachISO = new Map( handelsdaten.map(row => [ row.iso, row.name ]) ); /* * ============================================================ * 4. GEOJSON MIT IMPORTDATEN VERBINDEN * ============================================================ */ const isoFallback = new Map([ ["france", "FR"], ["frankreich", "FR"], ["norway", "NO"], ["kosovo", "XK"], ["serbia", "XS"], ["somaliland", "SO"], ["northern cyprus", "CY"] ]); const getGeoName = feature => String( feature.properties?.name ?? feature.properties?.ADMIN ?? feature.properties?.NAME ?? feature.properties?.NAME_EN ?? "" ).trim(); const getGeoISO = feature => { const properties = feature.properties ?? {}; const iso = String( properties["ISO3166-1-Alpha-2"] ?? properties.ISO_A2 ?? properties.iso_a2 ?? properties.iso2 ?? "" ) .trim() .toUpperCase(); if (/^[A-Z]{2}$/.test(iso)) { return iso; } return ( isoFallback.get( getGeoName(feature).toLowerCase() ) ?? "" ); }; const mapData = world.features.map(feature => { const iso = getGeoISO(feature); const geoName = getGeoName(feature); return { ...feature, properties: { ...feature.properties, iso, wert: wertNachISO.get(iso), anzeigename: nameNachISO.get(iso) ?? geoName ?? "Unbekanntes Land" } }; }); const anzahlTreffer = mapData.filter( feature => Number.isFinite(feature.properties.wert) ).length; /* * ============================================================ * 5. TOP-10-RANGLISTE * ============================================================ */ const ranking = Array.from( wertNachISO, ([iso, wert]) => ({ iso, wert, name: nameNachISO.get(iso) ?? iso }) ).sort((a, b) => d3.descending(a.wert, b.wert) ); const top10 = ranking .slice(0, 10) .map((land, index) => ({ ...land, rang: index + 1 })); const top10ISO = new Set( top10.map(land => land.iso) ); const top10Features = mapData.filter( feature => top10ISO.has(feature.properties.iso) ); /* * ============================================================ * 6. FARBSKALA * ============================================================ * * Die normale Mauve-Skala richtet sich nach dem * zweitstärksten Importland. * * Sehr hohe Importwerte werden schwarz dargestellt. */ const zweitstaerksterWert = ranking[1]?.wert ?? 1; const anzahlIntervalle = 8; const intervallBreite = zweitstaerksterWert / anzahlIntervalle; /* * Der höchste Importwert liegt in deinen Daten * bei ungefähr 63 Mrd. €. Ab 60 Mrd. € wird * deshalb die schwarze Ausreißerklasse verwendet. */ const ausreisserGrenze = 60_000_000_000; const mauveGrenzen = d3 .range(1, anzahlIntervalle + 1) .map(index => intervallBreite * index); const colorDomain = [ ...mauveGrenzen, ausreisserGrenze ]; const colorRange = [ "#faf4f8", "#f0e0eb", "#e3c8da", "#d2abc5", "#bf8db0", "#aa7099", "#925780", "#783f68", "#5f2c52", "#111111" ]; const legendenFormat = value => { if ( Math.abs(value - ausreisserGrenze) < 1 ) { return "≥ 60 Mrd. €"; } if (value >= 1_000_000_000) { return `${( value / 1_000_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 1 })} Mrd. €`; } return `${( value / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 })} Mio. €`; }; const colorConfig = { type: "threshold", domain: colorDomain, range: colorRange, label: "Einfuhrwert in Euro", tickFormat: legendenFormat, unknown: "#d4d9dd" }; /* * ============================================================ * 7. UI-ELEMENTE * ============================================================ */ const container = style( document.createElement("div"), { width: "100%", maxWidth: "1100px", minWidth: "0", margin: "0 auto", padding: "0", boxSizing: "border-box", overflowX: "hidden", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif" } ); const chartContainer = style( document.createElement("div"), { width: "100%", maxWidth: "100%", minWidth: "0", boxSizing: "border-box", overflowX: "hidden" } ); const controlsContainer = style( document.createElement("div"), { display: "flex", justifyContent: "flex-start", alignItems: "center", marginTop: "4px" } ); const toggleButton = style( document.createElement("button"), { appearance: "none", border: "1px solid #92758c", borderRadius: "999px", padding: "8px 15px", background: "#ffffff", color: "#4e3449", fontFamily: "inherit", fontSize: "14px", fontWeight: "650", lineHeight: "1.2", cursor: "pointer", boxShadow: "0 1px 2px rgba(0,0,0,0.06)", transition: "background 140ms ease, border-color 140ms ease, box-shadow 140ms ease" } ); toggleButton.type = "button"; toggleButton.textContent = "Top 10 anzeigen"; toggleButton.setAttribute( "aria-pressed", "false" ); const rankingContainer = style( document.createElement("div"), { display: "none", width: "100%", marginTop: "20px", paddingTop: "18px", borderTop: "1px solid #ddd2da", boxSizing: "border-box" } ); const rankingTitle = style( document.createElement("div"), { marginBottom: "12px", color: "#493346", fontSize: "17px", fontWeight: "750" } ); rankingTitle.textContent = "Die zehn importstärksten Partnerländer"; const rankingGrid = style( document.createElement("div"), { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: "10px 14px", width: "100%", minWidth: "0" } ); /* * ============================================================ * 8. TOP-10-CARDS * ============================================================ */ for (const land of top10) { const istStaerkstesLand = land.rang === 1; const row = style( document.createElement("div"), { display: "grid", gridTemplateColumns: "28px minmax(0, 1fr)", gap: "9px", alignItems: "center", minWidth: "0", padding: "10px 12px", border: istStaerkstesLand ? "1px solid #754b70" : "1px solid #e4dce2", borderRadius: "8px", background: istStaerkstesLand ? "#f1e5ee" : "#ffffff", boxSizing: "border-box" } ); const rank = style( document.createElement("div"), { display: "flex", alignItems: "center", justifyContent: "center", width: "26px", height: "26px", border: istStaerkstesLand ? "1px solid #754b70" : "1px solid #9a8595", borderRadius: "50%", background: istStaerkstesLand ? "#754b70" : "#ffffff", color: istStaerkstesLand ? "#ffffff" : "#4d3b4a", fontSize: "12px", fontWeight: "750" } ); rank.textContent = String(land.rang); const text = style( document.createElement("div"), { minWidth: "0" } ); const country = style( document.createElement("div"), { overflow: "hidden", color: "#342b34", fontSize: "13px", fontWeight: "650", textOverflow: "ellipsis", whiteSpace: "nowrap" } ); country.textContent = `${land.name} (${land.iso})`; const value = style( document.createElement("div"), { marginTop: "2px", color: "#736471", fontSize: "12px" } ); value.textContent = kurzFormat(land.wert); text.append( country, value ); row.append( rank, text ); rankingGrid.append(row); } rankingContainer.append( rankingTitle, rankingGrid ); controlsContainer.append( toggleButton ); container.append( chartContainer, controlsContainer, rankingContainer ); /* * ============================================================ * 9. KARTE ZEICHNEN * ============================================================ */ let top10Visible = false; const renderChart = () => { const verfuegbareBreite = chartContainer .getBoundingClientRect() .width || container .getBoundingClientRect() .width || 1100; const chartWidth = Math.max( 320, Math.min( 1100, Math.floor(verfuegbareBreite) ) ); const chartHeight = Math.max( 360, Math.min( 620, Math.round(chartWidth * 0.56) ) ); const marks = [ /* * Ozean. */ Plot.sphere({ fill: "#d9e7ef", stroke: "#7d8f9c", strokeWidth: 1.2 }), /* * Eingefärbte Länderflächen. */ Plot.geo(mapData, { fill: feature => feature.properties.wert, stroke: "none", title: feature => { const { anzeigename, iso, wert } = feature.properties; const land = iso ? `${anzeigename} (${iso})` : anzeigename; return Number.isFinite(wert) ? `${land}\n${euroFormat.format(wert)}` : `${land}\nKeine Daten vorhanden`; } }), /* * Permanente Ländergrenzen. */ Plot.geo(mapData, { fill: "none", stroke: "#817783", strokeWidth: 0.65, pointerEvents: "none" }) ]; if (top10Visible) { marks.push( Plot.geo(top10Features, { fill: "none", stroke: "#2d1c2a", strokeWidth: 2.1, pointerEvents: "none" }) ); } const chart = Plot.plot({ width: chartWidth, height: chartHeight, projection: "equal-earth", marginTop: 50, marginRight: 20, marginBottom: 20, marginLeft: 20, title: "Österreichische Importe 2025", subtitle: top10Visible ? "Die zehn importstärksten Partnerländer sind hervorgehoben" : `${anzahlTreffer} Importpartnerländer`, color: { ...colorConfig, legend: false }, marks }); style(chart, { display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: "0 auto", overflow: "hidden" }); /* * Responsive Legende. */ const legendWidth = Math.max( 280, Math.min( 980, chartWidth - 30 ) ); const legend = Plot.legend({ color: colorConfig, width: legendWidth, marginLeft: 15, marginRight: 15 }); style(legend, { display: "block", width: "100%", maxWidth: "100%", boxSizing: "border-box", margin: "0 auto 4px", overflow: "hidden" }); /* * Hover-Effekt auf den Länderflächen. */ const geoGroups = Array.from( chart.querySelectorAll( 'g[aria-label="geo"]' ) ); const countryGroup = geoGroups[1] ?? null; const countryPaths = countryGroup ? Array.from( countryGroup.querySelectorAll("path") ) : []; for (const path of countryPaths) { path.style.cursor = "pointer"; path.style.transition = [ "filter 140ms ease", "stroke 140ms ease", "stroke-width 140ms ease" ].join(", "); const resetHover = () => { path.style.filter = ""; path.setAttribute( "stroke", "none" ); path.setAttribute( "stroke-width", "0" ); }; path.addEventListener( "pointerenter", () => { path.style.filter = "brightness(1.2) drop-shadow(0 0 3px rgba(0,0,0,0.55))"; path.setAttribute( "stroke", "#111111" ); path.setAttribute( "stroke-width", "1.7" ); } ); path.addEventListener( "pointerleave", resetHover ); path.addEventListener( "pointercancel", resetHover ); } const chartBlock = style( document.createElement("div"), { width: "100%", maxWidth: "100%", minWidth: "0", boxSizing: "border-box", overflowX: "hidden" } ); chartBlock.append( legend, chart ); chartContainer.replaceChildren( chartBlock ); }; /* * ============================================================ * 10. INTERAKTION * ============================================================ */ toggleButton.addEventListener( "mouseenter", () => { toggleButton.style.background = top10Visible ? "#eee5ec" : "#f8f3f7"; toggleButton.style.borderColor = "#755d70"; } ); toggleButton.addEventListener( "mouseleave", () => { toggleButton.style.background = top10Visible ? "#f2eaf0" : "#ffffff"; toggleButton.style.borderColor = "#92758c"; } ); toggleButton.addEventListener( "click", () => { top10Visible = !top10Visible; toggleButton.setAttribute( "aria-pressed", String(top10Visible) ); toggleButton.textContent = top10Visible ? "Top 10 ausblenden" : "Top 10 anzeigen"; toggleButton.style.background = top10Visible ? "#f2eaf0" : "#ffffff"; toggleButton.style.boxShadow = top10Visible ? "inset 0 0 0 1px rgba(80,45,75,0.08)" : "0 1px 2px rgba(0,0,0,0.06)"; rankingContainer.style.display = top10Visible ? "block" : "none"; renderChart(); } ); /* * ============================================================ * 11. RESPONSIVE NEUBERECHNUNG * ============================================================ */ renderChart(); let letzteBreite = 0; const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(entries => { const breite = entries[0]?.contentRect?.width ?? 0; if ( breite > 0 && Math.abs( breite - letzteBreite ) > 2 ) { letzteBreite = breite; renderChart(); } }) : null; resizeObserver?.observe(container); invalidation.then(() => { resizeObserver?.disconnect(); }); return container; }4c:T596,

Interpretation

Die Visualisierungen zeigen, dass sich der österreichische Außenhandel stark auf wenige große Partnerländer konzentriert. Bei den Exporten nimmt Deutschland mit rund 56,1 Milliarden Euro den ersten Rang ein, gefolgt von Italien, den Vereinigten Staaten, der Schweiz und Polen. Auch Tschechien, Ungarn, Frankreich, das Vereinigte Königreich und China zählen zu den zehn wichtigsten Absatzmärkten. Die österreichischen Exporte konzentrieren sich somit vor allem auf Europa, ergänzt durch einzelne bedeutende außereuropäische Märkte wie die USA und China.

Ein ähnliches Bild zeigt sich bei den Importen, bei denen Deutschland noch stärker dominiert. Mit rund 63,3 Milliarden Euro liegt Deutschland deutlich vor China, Italien und der Schweiz. Weitere wichtige Herkunftsländer sind Tschechien, die Vereinigten Staaten, Polen, die Niederlande, Frankreich und Ungarn. Besonders auffällig ist die hohe Bedeutung Chinas auf der Importseite: Während China bei den Exporten nur auf dem zehnten Platz liegt, ist es bei den Importen der zweitwichtigste Handelspartner Österreichs.

4d:T3fe1,top10HandelProEinwohner = { /* * ------------------------------------------------------------ * 1. HANDELSDATEN EINLESEN * ------------------------------------------------------------ */ const exportExcel = workbookAusfuhr2025.sheet(0, { range: "A3:C", headers: true }); const importExcel = workbookEinfuhr2025.sheet(0, { range: "A3:C", headers: true }); /* * Bevölkerungszahlen der Weltbank. * Verwendet wird der jeweils neueste verfügbare Wert * aus dem Zeitraum 2023–2024. */ const populationResponse = await d3.json( "https://api.worldbank.org/v2/country/all/indicator/SP.POP.TOTL?format=json&date=2023:2024&per_page=1000" ); /* * ------------------------------------------------------------ * 2. HILFSFUNKTIONEN * ------------------------------------------------------------ */ const parseWert = value => { if (typeof value === "number") { return value; } const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) { return NaN; } return text.includes(",") ? Number( text .replace(/\./g, "") .replace(",", ".") ) : Number( text.replace(/\./g, "") ); }; const euro = new Intl.NumberFormat( "de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 } ); const euroProEinwohner = new Intl.NumberFormat( "de-AT", { style: "currency", currency: "EUR", minimumFractionDigits: 2, maximumFractionDigits: 2 } ); const personenFormat = new Intl.NumberFormat( "de-AT", { maximumFractionDigits: 0 } ); const kompakt = value => { if (value >= 1_000_000_000) { return `${( value / 1_000_000_000 ).toLocaleString("de-AT", { minimumFractionDigits: 1, maximumFractionDigits: 1 })} Mrd. €`; } if (value >= 1_000_000) { return `${( value / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 1 })} Mio. €`; } if (value >= 1_000) { return `${( value / 1_000 ).toLocaleString("de-AT", { maximumFractionDigits: 1 })} Tsd. €`; } return euro.format(value); }; const style = ( element, styles ) => { Object.assign( element.style, styles ); return element; }; /* * ------------------------------------------------------------ * 3. BEVÖLKERUNGSDATEN AUFBEREITEN * ------------------------------------------------------------ */ const populationRows = Array.isArray(populationResponse) && Array.isArray(populationResponse[1]) ? populationResponse[1] : []; /* * Die API liefert bis zu zwei Jahre je Land. * Durch die absteigende Jahressortierung wird der * neueste verfügbare Wert verwendet. */ populationRows.sort( (a, b) => d3.descending( Number(a.date), Number(b.date) ) ); const populationNachISO = new Map(); const populationsJahrNachISO = new Map(); for ( const row of populationRows ) { const iso = String( row.countryiso3code ?? "" ) .trim() .toUpperCase(); /* * Die Weltbank liefert ISO-3-Codes. * country.id enthält gewöhnlich den ISO-2-Code. */ const iso2 = String( row.country?.id ?? "" ) .trim() .toUpperCase(); const population = Number(row.value); if ( /^[A-Z]{2}$/.test(iso2) && !populationNachISO.has(iso2) && Number.isFinite(population) && population > 0 ) { populationNachISO.set( iso2, population ); populationsJahrNachISO.set( iso2, Number(row.date) ); } } /* * ------------------------------------------------------------ * 4. HANDELSDATEN AUFBEREITEN * ------------------------------------------------------------ */ const bereiteDatenAuf = ( rows, typ ) => { const roh = rows .map(row => ({ iso: String( row.ISOA2 ?? "" ) .trim() .toUpperCase(), name: String( row.Name ?? "" ).trim(), wert: parseWert( row.Wert ) })) .filter( row => /^[A-Z]{2}$/.test( row.iso ) && Number.isFinite( row.wert ) && row.wert > 0 ); const wertNachISO = d3.rollup( roh, eintraege => d3.sum( eintraege, d => d.wert ), d => d.iso ); const nameNachISO = new Map( roh.map(d => [ d.iso, d.name ]) ); return Array.from( wertNachISO, ([iso, wert]) => { const population = populationNachISO.get( iso ); return { iso, name: nameNachISO.get(iso) ?? iso, wert, population, populationsJahr: populationsJahrNachISO.get( iso ) ?? null, proEinwohner: Number.isFinite( population ) && population > 0 ? wert / population : null, typ }; } ).filter( land => Number.isFinite( land.proEinwohner ) && land.proEinwohner >= 0 ); }; const datensaetze = { export: bereiteDatenAuf( exportExcel, "export" ), import: bereiteDatenAuf( importExcel, "import" ) }; /* * ------------------------------------------------------------ * 5. GRUNDELEMENTE * ------------------------------------------------------------ */ let modus = "export"; const container = style( document.createElement( "div" ), { width: "100%", maxWidth: "1100px", margin: "0 auto", boxSizing: "border-box", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", color: "#213852" } ); const header = document.createElement("div"); const title = style( document.createElement( "h2" ), { margin: "0 0 5px", color: "#243b5a", fontSize: "20px", fontWeight: "750" } ); const subtitle = style( document.createElement( "div" ), { marginBottom: "14px", color: "#607184", fontSize: "14px", lineHeight: "1.45" } ); header.append( title, subtitle ); /* * ------------------------------------------------------------ * 6. EXPORT-/IMPORT-TOGGLE * ------------------------------------------------------------ */ const toggleWrap = style( document.createElement( "div" ), { display: "inline-flex", padding: "4px", marginBottom: "18px", border: "1px solid #c8d2dc", borderRadius: "999px", background: "#f3f6f8" } ); const exportButton = document.createElement( "button" ); const importButton = document.createElement( "button" ); exportButton.type = "button"; importButton.type = "button"; exportButton.textContent = "Exporte"; importButton.textContent = "Importe"; const styleToggleButton = button => { style(button, { appearance: "none", border: "none", borderRadius: "999px", padding: "9px 18px", background: "transparent", color: "#435466", font: "inherit", fontSize: "14px", fontWeight: "700", cursor: "pointer", transition: "background 140ms ease, color 140ms ease, box-shadow 140ms ease" }); }; styleToggleButton( exportButton ); styleToggleButton( importButton ); toggleWrap.append( exportButton, importButton ); /* * ------------------------------------------------------------ * 7. RANGLISTEN-CONTAINER * ------------------------------------------------------------ */ const rankingContainer = style( document.createElement( "div" ), { width: "100%" } ); const note = style( document.createElement( "div" ), { marginTop: "14px", color: "#6a7886", fontSize: "12px", lineHeight: "1.45" } ); container.append( header, toggleWrap, rankingContainer, note ); /* * ------------------------------------------------------------ * 8. TOGGLE-DESIGN * ------------------------------------------------------------ */ const aktualisiereToggle = () => { const aktivStyle = { background: "#ffffff", color: "#20354b", boxShadow: "0 1px 4px rgba(22,42,60,.16)" }; const inaktivStyle = { background: "transparent", color: "#627283", boxShadow: "none" }; style( exportButton, modus === "export" ? aktivStyle : inaktivStyle ); style( importButton, modus === "import" ? aktivStyle : inaktivStyle ); exportButton.setAttribute( "aria-pressed", String( modus === "export" ) ); importButton.setAttribute( "aria-pressed", String( modus === "import" ) ); }; /* * ------------------------------------------------------------ * 9. RANGLISTE ZEICHNEN * ------------------------------------------------------------ */ const renderRanking = () => { const istExport = modus === "export"; const farbe = istExport ? "#355f80" : "#754b70"; const hintergrund = istExport ? "#f1f7fc" : "#faf3f8"; const randfarbe = istExport ? "#7da1bf" : "#b38eaa"; const top10 = [...datensaetze[modus]] .sort( (a, b) => d3.descending( a.proEinwohner, b.proEinwohner ) ) .slice(0, 10) .map( (land, index) => ({ ...land, rang: index + 1 }) ); title.textContent = istExport ? "Top 10 Exportpartner pro Einwohner" : "Top 10 Importpartner pro Einwohner"; subtitle.textContent = istExport ? "Österreichische Exporte in Relation zur Bevölkerung des jeweiligen Partnerlandes." : "Österreichische Importe in Relation zur Bevölkerung des jeweiligen Herkunftslandes."; const rankingTitle = style( document.createElement( "div" ), { marginBottom: "12px", color: "#1e3347", fontSize: "17px", fontWeight: "750" } ); rankingTitle.textContent = istExport ? "Die zehn höchsten Exportwerte pro Einwohner" : "Die zehn höchsten Importwerte pro Einwohner"; const grid = style( document.createElement( "div" ), { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(270px, 1fr))", gap: "11px 14px" } ); for (const land of top10) { const card = style( document.createElement( "div" ), { display: "grid", gridTemplateColumns: "34px minmax(0, 1fr)", alignItems: "center", gap: "11px", minWidth: "0", padding: "12px 13px", border: `1px solid ${randfarbe}`, borderRadius: "9px", background: hintergrund, boxShadow: "0 1px 2px rgba(22,42,60,0.04)" } ); const rank = style( document.createElement( "div" ), { display: "flex", alignItems: "center", justifyContent: "center", width: "29px", height: "29px", border: `1px solid ${farbe}`, borderRadius: "50%", background: farbe, color: "#ffffff", fontSize: "12px", fontWeight: "750" } ); rank.textContent = String(land.rang); const text = style( document.createElement( "div" ), { minWidth: "0" } ); const country = style( document.createElement( "div" ), { overflow: "hidden", color: "#213548", fontSize: "13px", fontWeight: "700", textOverflow: "ellipsis", whiteSpace: "nowrap" } ); country.textContent = `${land.name} (${land.iso})`; const proKopfValue = style( document.createElement( "div" ), { marginTop: "3px", color: farbe, fontSize: "14px", fontWeight: "750" } ); proKopfValue.textContent = `${euroProEinwohner.format( land.proEinwohner )} pro Einwohner`; const details = style( document.createElement( "div" ), { display: "flex", flexWrap: "wrap", gap: "3px 10px", marginTop: "3px", color: "#657585", fontSize: "11px" } ); const handelswert = document.createElement( "span" ); handelswert.textContent = `${ istExport ? "Export" : "Import" }: ${kompakt( land.wert )}`; const population = document.createElement( "span" ); population.textContent = `Bevölkerung: ${personenFormat.format( land.population )}`; details.append( handelswert, population ); text.append( country, proKopfValue, details ); card.append( rank, text ); grid.append(card); } rankingContainer.replaceChildren( rankingTitle, grid ); const verwendeteJahre = Array.from( new Set( top10 .map( land => land.populationsJahr ) .filter( Number.isFinite ) ) ) .sort( d3.descending ) .join("/"); note.textContent = `Berechnung: österreichischer ${ istExport ? "Export" : "Import" }wert 2025 geteilt durch die Bevölkerung des Partnerlandes. ` + `Bevölkerungsdaten: Weltbank${ verwendeteJahre ? ` (${verwendeteJahre})` : "" }. Kleine Staaten und Gebiete können aufgrund ihrer geringen Bevölkerung besonders hohe Pro-Kopf-Werte erreichen.`; aktualisiereToggle(); }; /* * ------------------------------------------------------------ * 10. INTERAKTION * ------------------------------------------------------------ */ exportButton.addEventListener( "click", () => { if (modus === "export") { return; } modus = "export"; renderRanking(); } ); importButton.addEventListener( "click", () => { if (modus === "import") { return; } modus = "import"; renderRanking(); } ); renderRanking(); return container; }4e:T72a,

Interpretation

Die Pro-Kopf-Betrachtung der österreichischen Handelsbeziehungen ergibt ein deutlich anderes Bild als die Analyse der absoluten Handelswerte. Während in den bisherigen Auswertungen vor allem große Volkswirtschaften wie Deutschland, die Vereinigten Staaten oder China dominierten, treten bei der Normierung auf die Bevölkerungsgröße vor allem kleinere europäische Staaten hervor. Sowohl bei den Exporten als auch bei den Importen belegt Liechtenstein mit großem Abstand den ersten Rang. Dies ist auf die Kombination aus einem vergleichsweise hohen Handelsvolumen und einer sehr geringen Bevölkerungszahl zurückzuführen, wodurch außergewöhnlich hohe Pro-Kopf-Werte entstehen.

Auf den Plätzen zwei bis fünf folgen Slowenien, die Schweiz, Ungarn und die Slowakei. Auffällig ist, dass insbesondere Österreichs Nachbarländer und andere kleinere europäische Volkswirtschaften hohe Exportwerte pro Einwohner aufweisen. Dies verdeutlicht die intensive wirtschaftliche Verflechtung innerhalb des europäischen Binnenmarktes sowie die enge Integration regionaler Liefer- und Wertschöpfungsketten.

Ein ähnliches Muster zeigt sich bei den Importen. Zu den wichtigsten Handelspartnern gemessen am Importwert pro Einwohner zählen neben Liechtenstein Slowenien, die Schweiz, Deutschland, Tschechien und die Slowakei. Die Rangliste wird durch kleinere Staaten wie Luxemburg, die Kaimaninseln und Guyana ergänzt, deren hohe Pro-Kopf-Werte vor allem auf ihre geringe Bevölkerungszahl zurückzuführen sind.

4f:T95a9,handelNachKontinent2 = { const exportExcel = workbookAusfuhr2025.sheet(0, { range: "A3:C", headers: true }); const importExcel = workbookEinfuhr2025.sheet(0, { range: "A3:C", headers: true }); /* * Eingebettete Referenzdaten: * ISO-Code → [Bevölkerung, Kontinent] */ const landMeta = { AE: [9446000, "Asien"], AF: [26023100, "Asien"], AG: [86295, "Nordamerika"], AI: [13452, "Nordamerika"], AL: [2895947, "Europa"], AM: [3009800, "Asien"], AO: [24383301, "Afrika"], AR: [42669500, "Südamerika"], AS: [55519, "Ozeanien"], AT: [8534492, "Europa"], AU: [23696900, "Ozeanien"], AW: [107394, "Nordamerika"], AX: [28875, "Europa"], AZ: [9552500, "Asien"], BA: [3791622, "Europa"], BB: [285000, "Nordamerika"], BD: [157486000, "Asien"], BE: [11225469, "Europa"], BF: [17322796, "Afrika"], BG: [7202198, "Europa"], BH: [1316500, "Asien"], BI: [10114505, "Afrika"], BJ: [9988068, "Afrika"], BL: [9072, "Nordamerika"], BM: [64237, "Nordamerika"], BN: [393372, "Asien"], BO: [10027254, "Südamerika"], BQ: [17408, "Nordamerika"], BR: [202768562, "Südamerika"], BS: [351461, "Nordamerika"], BT: [755030, "Asien"], BV: [0, "Antarktis"], BW: [2024904, "Afrika"], BY: [9475100, "Europa"], BZ: [349728, "Nordamerika"], CA: [35540419, "Nordamerika"], CC: [550, "Asien"], CD: [69360000, "Afrika"], CF: [4709000, "Afrika"], CG: [4559000, "Afrika"], CH: [8183800, "Europa"], CI: [23202000, "Afrika"], CK: [14974, "Ozeanien"], CL: [17773000, "Südamerika"], CM: [20386799, "Afrika"], CN: [1367110000, "Asien"], CO: [47661787, "Südamerika"], CR: [4773130, "Nordamerika"], CU: [11210064, "Nordamerika"], CV: [524833, "Afrika"], CW: [154843, "Nordamerika"], CX: [2072, "Asien"], CY: [858000, "Europa"], CZ: [10521600, "Europa"], DE: [80783000, "Europa"], DJ: [886000, "Afrika"], DK: [5655750, "Europa"], DM: [71293, "Nordamerika"], DO: [9445281, "Nordamerika"], DZ: [38700000, "Afrika"], EC: [15736600, "Südamerika"], EE: [1315819, "Europa"], EG: [87668100, "Afrika"], EH: [586000, "Afrika"], ER: [6536000, "Afrika"], ES: [46507760, "Europa"], ET: [87952100, "Afrika"], FI: [5470437, "Europa"], FJ: [859178, "Ozeanien"], FK: [2563, "Südamerika"], FM: [101351, "Ozeanien"], FO: [48857, "Europa"], FR: [66078000, "Europa"], GA: [1711000, "Afrika"], GB: [64105654, "Europa"], GD: [103328, "Nordamerika"], GE: [4490500, "Asien"], GF: [250109, "Südamerika"], GG: [62000, "Europa"], GH: [27043093, "Afrika"], GI: [30001, "Europa"], GL: [56295, "Nordamerika"], GM: [1882450, "Afrika"], GN: [10628972, "Afrika"], GP: [405739, "Nordamerika"], GQ: [1430000, "Afrika"], GR: [10992589, "Europa"], GS: [30, "Antarktis"], GT: [15806675, "Nordamerika"], GU: [159358, "Ozeanien"], GW: [1746000, "Afrika"], GY: [784894, "Südamerika"], HK: [7234800, "Asien"], HM: [0, "Antarktis"], HN: [8555072, "Nordamerika"], HR: [4290612, "Europa"], HT: [10911819, "Nordamerika"], HU: [9879000, "Europa"], ID: [252164800, "Asien"], IE: [6378000, "Europa"], IL: [8212900, "Asien"], IM: [84497, "Europa"], IN: [1263930000, "Asien"], IO: [3000, "Afrika"], IQ: [36004552, "Asien"], IR: [77935600, "Asien"], IS: [328170, "Europa"], IT: [60753707, "Europa"], JE: [99000, "Europa"], JM: [2717991, "Nordamerika"], JO: [6602190, "Asien"], JP: [127080000, "Asien"], KE: [45546000, "Afrika"], KG: [5776570, "Asien"], KH: [15184116, "Asien"], KI: [106461, "Ozeanien"], KM: [624000, "Afrika"], KN: [55000, "Nordamerika"], KP: [24895000, "Asien"], KR: [50423955, "Asien"], KW: [4183658, "Asien"], KY: [55456, "Nordamerika"], KZ: [17330400, "Asien"], LA: [6890000, "Asien"], LB: [4104000, "Asien"], LC: [184000, "Nordamerika"], LI: [37132, "Europa"], LK: [20277597, "Asien"], LR: [4397000, "Afrika"], LS: [2098000, "Afrika"], LT: [2921920, "Europa"], LU: [549700, "Europa"], LV: [1997400, "Europa"], LY: [6253000, "Afrika"], MA: [33337529, "Afrika"], MC: [36950, "Europa"], MD: [3557600, "Europa"], ME: [620029, "Europa"], MF: [36979, "Nordamerika"], MG: [22434363, "Afrika"], MH: [56086, "Ozeanien"], MK: [2058539, "Europa"], ML: [15768000, "Afrika"], MM: [51419420, "Asien"], MN: [2931300, "Asien"], MO: [642900, "Asien"], MP: [53883, "Ozeanien"], MQ: [386486, "Nordamerika"], MR: [3461041, "Afrika"], MS: [4922, "Nordamerika"], MT: [416055, "Europa"], MU: [1261208, "Afrika"], MV: [341256, "Asien"], MW: [16310431, "Afrika"], MX: [119713203, "Nordamerika"], MY: [30430500, "Asien"], MZ: [26423700, "Afrika"], NA: [2113077, "Afrika"], NC: [268767, "Ozeanien"], NE: [17138707, "Afrika"], NF: [2302, "Ozeanien"], NG: [178517000, "Afrika"], NI: [6198154, "Nordamerika"], NL: [16879800, "Europa"], NO: [5156451, "Europa"], NP: [26494504, "Asien"], NR: [10084, "Ozeanien"], NU: [1190, "Ozeanien"], NZ: [4552460, "Ozeanien"], OM: [4050288, "Asien"], PA: [3405813, "Nordamerika"], PE: [30814175, "Südamerika"], PF: [268270, "Ozeanien"], PG: [7398500, "Ozeanien"], PH: [100981437, "Asien"], PK: [188020000, "Asien"], PL: [38483957, "Europa"], PM: [6081, "Nordamerika"], PN: [56, "Ozeanien"], PR: [3615086, "Nordamerika"], PS: [4294682, "Asien"], PT: [10477800, "Europa"], PW: [20901, "Ozeanien"], PY: [6893727, "Südamerika"], QA: [2174035, "Asien"], RE: [840974, "Afrika"], RO: [19942642, "Europa"], RS: [7131787, "Europa"], RU: [146233000, "Europa"], RW: [10537222, "Afrika"], SA: [31521418, "Asien"], SB: [581344, "Ozeanien"], SC: [89949, "Afrika"], SD: [37289406, "Afrika"], SE: [9737521, "Europa"], SG: [5469700, "Asien"], SH: [4255, "Afrika"], SI: [2061085, "Europa"], SJ: [2562, "Europa"], SK: [5415949, "Europa"], SL: [6205000, "Afrika"], SM: [32777, "Europa"], SN: [13508715, "Afrika"], SO: [10806000, "Afrika"], SR: [534189, "Südamerika"], SS: [11892000, "Afrika"], ST: [187356, "Afrika"], SV: [6401240, "Nordamerika"], SX: [37429, "Nordamerika"], SY: [21987000, "Asien"], SZ: [1268000, "Afrika"], TC: [31458, "Nordamerika"], TD: [13211000, "Afrika"], TF: [140, "Antarktis"], TG: [6993000, "Afrika"], TH: [64871000, "Asien"], TJ: [8161000, "Asien"], TK: [1411, "Ozeanien"], TL: [1212107, "Asien"], TM: [5307000, "Asien"], TN: [10982754, "Afrika"], TO: [103252, "Ozeanien"], TR: [76667864, "Asien"], TT: [1328019, "Nordamerika"], TV: [11323, "Ozeanien"], TW: [23433753, "Asien"], TZ: [44928923, "Afrika"], UA: [42836922, "Europa"], UG: [34856813, "Afrika"], UM: [300, "Ozeanien"], US: [319259000, "Nordamerika"], UY: [3286314, "Südamerika"], UZ: [30492800, "Asien"], VA: [842, "Europa"], VC: [109000, "Nordamerika"], VE: [30206307, "Südamerika"], VG: [28054, "Nordamerika"], VI: [114743, "Nordamerika"], VN: [89708900, "Asien"], VU: [264652, "Ozeanien"], WF: [13135, "Ozeanien"], WS: [187820, "Ozeanien"], XK: [1800000, "Europa"], XS: [7131787, "Europa"], YE: [25956000, "Asien"], YT: [212645, "Afrika"], ZA: [54002000, "Afrika"], ZM: [15023315, "Afrika"], ZW: [13061239, "Afrika"] }; const kontinente = [ "Europa", "Asien", "Nordamerika", "Afrika", "Südamerika", "Ozeanien" ]; const parseWert = value => { if (typeof value === "number") { return value; } const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) { return NaN; } return text.includes(",") ? Number( text .replace(/\./g, "") .replace(",", ".") ) : Number( text.replace(/\./g, "") ); }; const normalize = value => String(value ?? "") .trim() .toLocaleLowerCase("de-AT") .normalize("NFD") .replace(/\p{Diacritic}/gu, ""); const euro = new Intl.NumberFormat( "de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 } ); const euroProKopf = new Intl.NumberFormat( "de-AT", { style: "currency", currency: "EUR", minimumFractionDigits: 2, maximumFractionDigits: 2 } ); const prozent = new Intl.NumberFormat( "de-AT", { style: "percent", minimumFractionDigits: 1, maximumFractionDigits: 1 } ); const kompakt = value => { if (value >= 1e9) { return `${( value / 1e9 ).toLocaleString("de-AT", { maximumFractionDigits: 1 })} Mrd. €`; } if (value >= 1e6) { return `${( value / 1e6 ).toLocaleString("de-AT", { maximumFractionDigits: 1 })} Mio. €`; } return euro.format(value); }; const bereiteDatenAuf = ( excelData, typ ) => { const roh = excelData .map(row => ({ iso: String( row.ISOA2 ?? "" ) .trim() .toUpperCase(), name: String( row.Name ?? "" ).trim(), wert: parseWert( row.Wert ) })) .filter( d => /^[A-Z]{2}$/.test( d.iso ) && Number.isFinite( d.wert ) ); const wertNachISO = d3.rollup( roh, rows => d3.sum( rows, d => d.wert ), d => d.iso ); const nameNachISO = new Map( roh.map(d => [ d.iso, d.name ]) ); const laender = Array.from( wertNachISO, ([iso, wert]) => { const meta = landMeta[iso]; return { iso, name: nameNachISO.get( iso ) ?? iso, wert, population: meta?.[0] ?? null, kontinent: meta?.[1] ?? null }; } ) .filter( d => d.kontinent && kontinente.includes( d.kontinent ) && Number.isFinite( d.wert ) ) .sort( (a, b) => a.name.localeCompare( b.name, "de" ) ); const gesamt = d3.sum( laender, d => d.wert ); const summen = d3.rollup( laender, rows => d3.sum( rows, d => d.wert ), d => d.kontinent ); const kontinentDaten = kontinente .map(kontinent => { const wert = summen.get( kontinent ) ?? 0; return { kontinent, wert, anteil: gesamt > 0 ? wert / gesamt : 0 }; }) .filter( d => d.wert > 0 ); return { typ, laender, gesamt, summen, kontinentDaten }; }; const datensaetze = { export: bereiteDatenAuf( exportExcel, "export" ), import: bereiteDatenAuf( importExcel, "import" ) }; const gemeinsamesMaximum = Math.max( d3.max( datensaetze .export .kontinentDaten, d => d.wert ) ?? 0, d3.max( datensaetze .import .kontinentDaten, d => d.wert ) ?? 0 ) * 1.13; let modus = "export"; let aktuelleDaten = datensaetze[modus]; let gefiltert = []; let aktiv = -1; let ausgewaehltesISO = null; /* * Kleine Hilfsfunktion für Styles. */ const style = ( element, styles ) => { Object.assign( element.style, styles ); return element; }; const container = style( document.createElement( "div" ), { width: "100%", maxWidth: "1100px", margin: "0 auto", boxSizing: "border-box", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", color: "#213852" } ); /* * Umschalter Exporte / Importe. */ const toggleWrap = style( document.createElement( "div" ), { display: "inline-flex", padding: "4px", marginBottom: "14px", border: "1px solid #c8d2dc", borderRadius: "999px", background: "#f3f6f8" } ); const exportButton = document.createElement( "button" ); const importButton = document.createElement( "button" ); const styleToggle = button => { style(button, { appearance: "none", border: "none", borderRadius: "999px", padding: "9px 18px", background: "transparent", color: "#435466", font: "inherit", fontSize: "14px", fontWeight: "700", cursor: "pointer", transition: "background 140ms ease, color 140ms ease, box-shadow 140ms ease" }); }; exportButton.textContent = "Exporte"; importButton.textContent = "Importe"; styleToggle( exportButton ); styleToggle( importButton ); toggleWrap.append( exportButton, importButton ); const chartContainer = style( document.createElement( "div" ), { width: "100%", maxWidth: "100%", boxSizing: "border-box", overflow: "hidden" } ); /* * Detailbereich. */ const section = style( document.createElement( "section" ), { marginTop: "20px", padding: "20px", border: "1px solid #d7e0e8", borderRadius: "12px", background: "#f8fafc" } ); const heading = style( document.createElement( "div" ), { fontSize: "18px", fontWeight: "750", marginBottom: "5px" } ); const description = style( document.createElement( "div" ), { fontSize: "13px", color: "#607184", marginBottom: "14px" } ); /* * Suchfeld mit nativer * Löschfunktion. * * type="search" erzeugt in * unterstützten Browsern ein X, * sobald Text enthalten ist. */ const searchWrap = style( document.createElement( "div" ), { position: "relative", width: "min(100%, 390px)" } ); const input = style( document.createElement( "input" ), { width: "100%", boxSizing: "border-box", padding: "10px 38px 10px 13px", border: "1px solid #8799aa", borderRadius: "8px", background: "#ffffff", color: "#20354b", font: "inherit", fontSize: "14px", outline: "none" } ); input.type = "search"; input.placeholder = "Land eingeben, z. B. Deutschland"; input.autocomplete = "off"; const arrow = style( document.createElement( "button" ), { position: "absolute", top: "1px", right: "1px", width: "36px", height: "38px", border: "none", background: "transparent", cursor: "pointer", fontSize: "16px", color: "#607184" } ); arrow.type = "button"; arrow.textContent = "▾"; const dropdown = style( document.createElement( "div" ), { position: "absolute", zIndex: "1000", top: "calc(100% + 4px)", left: "0", right: "0", display: "none", maxHeight: "280px", overflowY: "auto", border: "1px solid #aab8c4", borderRadius: "8px", background: "#ffffff", boxShadow: "0 8px 24px rgba(30,50,70,.16)" } ); const message = style( document.createElement( "div" ), { minHeight: "20px", marginTop: "8px", color: "#9b2d30", fontSize: "13px" } ); const detail = style( document.createElement( "div" ), { marginTop: "18px" } ); searchWrap.append( input, arrow, dropdown ); section.append( heading, description, searchWrap, message, detail ); container.append( toggleWrap, chartContainer, section ); const aktualisiereToggle = () => { const aktivStyle = { background: "#ffffff", color: "#20354b", boxShadow: "0 1px 4px rgba(22,42,60,.16)" }; const inaktivStyle = { background: "transparent", color: "#627283", boxShadow: "none" }; style( exportButton, modus === "export" ? aktivStyle : inaktivStyle ); style( importButton, modus === "import" ? aktivStyle : inaktivStyle ); exportButton.setAttribute( "aria-pressed", String( modus === "export" ) ); importButton.setAttribute( "aria-pressed", String( modus === "import" ) ); }; const schliessen = () => { dropdown.style.display = "none"; aktiv = -1; }; const leereAuswahl = ({ fokus = false, dropdownOeffnen = false } = {}) => { input.value = ""; ausgewaehltesISO = null; detail.replaceChildren(); message.textContent = ""; schliessen(); if (fokus) { input.focus(); } if (dropdownOeffnen) { renderDropdown(""); } }; const renderHauptdiagramm = () => { const istExport = modus === "export"; const farbe = istExport ? "#557fa5" : "#9a6b91"; const verfuegbareBreite = chartContainer .getBoundingClientRect() .width || container .getBoundingClientRect() .width || 1100; const chartWidth = Math.max( 320, Math.min( 1100, Math.floor( verfuegbareBreite ) ) ); const chart = Plot.plot({ width: chartWidth, height: 560, marginTop: 70, marginRight: 35, marginBottom: 85, marginLeft: 95, title: `Österreichische ${ istExport ? "Exporte" : "Importe" } nach Kontinent`, subtitle: `Gesamt${ istExport ? "export" : "import" }volumen: ` + kompakt( aktuelleDaten .gesamt ), x: { label: null, domain: kontinente, tickRotate: -32 }, y: { label: istExport ? "Exportwert" : "Importwert", grid: true, domain: [ 0, gemeinsamesMaximum ], tickFormat: value => value === 0 ? "0" : kompakt( value ) }, marks: [ Plot.ruleY( [0] ), Plot.barY( aktuelleDaten .kontinentDaten, { x: "kontinent", y: "wert", fill: farbe, insetLeft: 12, insetRight: 12, title: d => `${d.kontinent}\n` + `${euro.format( d.wert )}\n` + `${prozent.format( d.anteil )} des Gesamt${ istExport ? "exports" : "imports" }` } ), Plot.text( aktuelleDaten .kontinentDaten, { x: "kontinent", y: "wert", text: d => `${kompakt( d.wert )}\n` + `${prozent.format( d.anteil )}`, dy: -16, fontSize: 12, fontWeight: 700, fill: "#203b5d" } ) ] }); style(chart, { display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: "0 auto" }); chartContainer .replaceChildren( chart ); }; const erstelleKarte = ( labelText, valueText ) => { const card = style( document.createElement( "div" ), { padding: "13px 14px", border: "1px solid #d9e1e8", borderRadius: "9px", background: "#ffffff" } ); const label = style( document.createElement( "div" ), { fontSize: "12px", color: "#667788", marginBottom: "5px" } ); label.textContent = labelText; const value = style( document.createElement( "div" ), { fontSize: "16px", fontWeight: "750", color: "#203a56" } ); value.textContent = valueText; card.append( label, value ); return card; }; const renderLand = land => { detail.replaceChildren(); message.textContent = ""; if (!land) { message.textContent = "Das Land wurde nicht gefunden."; return; } if ( !Number.isFinite( land.population ) || land.population <= 0 ) { message.textContent = `Für ${land.name} ist keine eingebettete Bevölkerungszahl verfügbar.`; return; } const istExport = modus === "export"; const kontinentGesamt = aktuelleDaten .summen .get( land.kontinent ) ?? 0; const proKopf = land.wert / land.population; const anteil = kontinentGesamt > 0 ? land.wert / kontinentGesamt : 0; const rest = Math.max( 0, kontinentGesamt - land.wert ); const cards = style( document.createElement( "div" ), { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: "12px", marginBottom: "18px" } ); cards.append( erstelleKarte( "Partnerland", `${land.name} (${land.iso})` ), erstelleKarte( istExport ? "Exportwert" : "Importwert", euro.format( land.wert ) ), erstelleKarte( `${ istExport ? "Export" : "Import" }wert pro Einwohner`, euroProKopf.format( proKopf ) ), erstelleKarte( `Anteil an ${land.kontinent}`, prozent.format( anteil ) ) ); const restLabel = `Übriges ${land.kontinent}`; const detailDaten = [ { gruppe: land.kontinent, segment: land.name, wert: land.wert }, { gruppe: land.kontinent, segment: restLabel, wert: rest } ]; const detailBreite = Math.max( 320, Math.min( 1020, Math.floor( detail .getBoundingClientRect() .width || container .getBoundingClientRect() .width || 1020 ) ) ); const detailChart = Plot.plot({ width: detailBreite, height: 220, marginTop: 45, marginRight: 30, marginBottom: 45, marginLeft: 30, title: `${land.name}: Anteil am ${ istExport ? "Export" : "Import" }volumen von ${land.kontinent}`, x: { label: istExport ? "Exportwert" : "Importwert", grid: true, domain: [ 0, kontinentGesamt ], tickFormat: kompakt }, y: { axis: null }, color: { domain: [ land.name, restLabel ], range: istExport ? [ "#214f78", "#cbd9e5" ] : [ "#714367", "#ddd0da" ], legend: true }, marks: [ Plot.barX( detailDaten, Plot.stackX({ x: "wert", y: "gruppe", fill: "segment", title: d => `${d.segment}\n${euro.format( d.wert )}` }) ), Plot.text( [ { gruppe: land.kontinent, x: land.wert / 2, text: prozent.format( anteil ) } ], { x: "x", y: "gruppe", text: "text", fill: "#ffffff", stroke: "#111111", strokeWidth: 3, strokeLinejoin: "round", fontWeight: 700, fontSize: 15 } ) ] }); style( detailChart, { display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: "0 auto" } ); const note = style( document.createElement( "div" ), { marginTop: "8px", color: "#687786", fontSize: "12px" } ); note.textContent = `Der Pro-Kopf-Wert ist der österreichische ${ istExport ? "Export" : "Import" }wert ${ istExport ? "nach" : "aus" } ${land.name}, geteilt durch die eingebettete Referenzbevölkerung des Partnerlandes.`; detail.append( cards, detailChart, note ); }; const waehlen = land => { ausgewaehltesISO = land.iso; input.value = land.name; schliessen(); renderLand( land ); }; const renderDropdown = value => { const q = normalize( value ); gefiltert = aktuelleDaten .laender .filter( land => !q || normalize( land.name ).includes(q) || normalize( land.iso ).includes(q) ); dropdown .replaceChildren(); aktiv = -1; if ( !gefiltert.length ) { const empty = style( document.createElement( "div" ), { padding: "11px 13px", color: "#7b8792", fontSize: "13px" } ); empty.textContent = "Kein passendes Land gefunden"; dropdown.append( empty ); dropdown.style .display = "block"; return; } gefiltert.forEach( ( land, index ) => { const option = style( document.createElement( "div" ), { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "12px", padding: "10px 13px", cursor: "pointer", borderBottom: index === gefiltert.length - 1 ? "none" : "1px solid #edf1f4" } ); const name = document.createElement( "span" ); name.textContent = land.name; const infoText = style( document.createElement( "span" ), { color: "#718191", fontSize: "12px", fontWeight: "650", whiteSpace: "nowrap" } ); infoText.textContent = `${land.iso} · ${land.kontinent}`; option.append( name, infoText ); option.addEventListener( "mouseenter", () => { aktiv = index; Array.from( dropdown.children ).forEach( ( child, childIndex ) => { child.style .background = childIndex === aktiv ? "#eaf2f8" : "#ffffff"; } ); } ); option.addEventListener( "mousedown", event => { event .preventDefault(); waehlen( land ); } ); dropdown.append( option ); } ); dropdown.style.display = "block"; }; const wechselModus = neuerModus => { if ( modus === neuerModus ) { return; } modus = neuerModus; aktuelleDaten = datensaetze[modus]; schliessen(); message.textContent = ""; heading.textContent = `${ modus === "export" ? "Export" : "Import" }wert eines Partnerlandes untersuchen`; description.textContent = `Land auswählen, um ${ modus === "export" ? "Export" : "Import" }wert, Pro-Kopf-Wert und Kontinentanteil zu sehen.`; aktualisiereToggle(); renderHauptdiagramm(); const gleichesLand = ausgewaehltesISO ? aktuelleDaten .laender .find( land => land.iso === ausgewaehltesISO ) : null; if (gleichesLand) { input.value = gleichesLand.name; renderLand( gleichesLand ); } else { leereAuswahl(); if ( ausgewaehltesISO ) { message.textContent = "Für das ausgewählte Land sind in diesem Datensatz keine Werte vorhanden."; } } }; exportButton.addEventListener( "click", () => wechselModus( "export" ) ); importButton.addEventListener( "click", () => wechselModus( "import" ) ); input.addEventListener( "focus", () => renderDropdown( input.value ) ); /* * Das native X eines Suchfelds löst ebenfalls * ein input-Ereignis aus. Wird das Feld geleert, * verschwindet daher automatisch die Länderauswahl. */ input.addEventListener( "input", () => { if ( !input.value.trim() ) { ausgewaehltesISO = null; detail.replaceChildren(); message.textContent = ""; } renderDropdown( input.value ); } ); input.addEventListener( "blur", () => setTimeout( schliessen, 120 ) ); arrow.addEventListener( "mousedown", event => { event.preventDefault(); if ( dropdown.style .display === "block" ) { schliessen(); } else { input.focus(); renderDropdown( input.value ); } } ); input.addEventListener( "keydown", event => { if ( event.key === "Escape" ) { schliessen(); return; } if ( dropdown.style .display !== "block" ) { if ( event.key === "ArrowDown" ) { event.preventDefault(); renderDropdown( input.value ); } return; } if ( event.key === "ArrowDown" ) { event.preventDefault(); aktiv = Math.min( aktiv + 1, gefiltert.length - 1 ); } else if ( event.key === "ArrowUp" ) { event.preventDefault(); aktiv = Math.max( aktiv - 1, 0 ); } else if ( event.key === "Enter" ) { event.preventDefault(); const land = aktiv >= 0 ? gefiltert[ aktiv ] : gefiltert[0]; if (land) { waehlen( land ); } return; } Array.from( dropdown.children ).forEach( ( child, index ) => { child.style .background = index === aktiv ? "#eaf2f8" : "#ffffff"; } ); dropdown.children[ aktiv ]?.scrollIntoView({ block: "nearest" }); } ); heading.textContent = "Exportwert eines Partnerlandes untersuchen"; description.textContent = "Land auswählen, um Exportwert, Pro-Kopf-Wert und Kontinentanteil zu sehen."; aktualisiereToggle(); renderHauptdiagramm(); input.value = ""; detail.replaceChildren(); message.textContent = ""; /* * Responsive Neuberechnung. */ let letzteBreite = 0; const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver( entries => { const breite = entries[0] ?.contentRect ?.width ?? 0; if ( breite > 0 && Math.abs( breite - letzteBreite ) > 2 ) { letzteBreite = breite; renderHauptdiagramm(); if ( ausgewaehltesISO ) { const land = aktuelleDaten .laender .find( d => d.iso === ausgewaehltesISO ); if (land) { renderLand( land ); } } } } ) : null; resizeObserver?.observe( container ); invalidation.then(() => { resizeObserver?.disconnect(); }); return container; } 50:T6ef,

Interpretation

Die österreichischen Exporte sind stark auf Europa konzentriert: Rund 149,2 Mrd. Euro beziehungsweise 78,6 % des gesamten Exportvolumens entfallen auf europäische Partnerländer. Asien folgt mit 18,7 Mrd. Euro (9,8 %) knapp vor Nordamerika mit 16,6 Mrd. Euro (8,7 %). Afrika, Südamerika und Ozeanien spielen mit zusammen weniger als 3 % nur eine untergeordnete Rolle. Insgesamt zeigt die Verteilung eine deutliche regionale Abhängigkeit Österreichs vom europäischen Absatzmarkt.

Für die Importe ergibt sich ein sehr ähnliches Bild. Rund 145,7 Mrd. Euro beziehungsweise 74,1 % des gesamten österreichischen Importvolumens stammen aus Europa. Damit ist Europa auch auf der Beschaffungsseite mit großem Abstand der wichtigste Handelspartner. Asien folgt mit 37,7 Mrd. Euro (19,1 %) und weist im Vergleich zu den Exporten einen deutlich höheren Anteil auf, was die starke Bedeutung asiatischer Produktions- und Beschaffungsmärkte für Österreich unterstreicht. Nordamerika trägt 9,1 Mrd. Euro (4,6 %) zum Importvolumen bei, während Afrika (2,4 Mrd. Euro; 1,2 %), Südamerika (1,5 Mrd. Euro; 0,8 %) und Ozeanien (285 Mio. Euro; 0,1 %) nur eine geringe Rolle spielen. Insgesamt verdeutlicht die Verteilung, dass Österreich sowohl auf der Absatz- als auch auf der Beschaffungsseite eng in den europäischen Binnenmarkt eingebunden ist, gleichzeitig jedoch insbesondere bei Importen eine stärkere Abhängigkeit von asiatischen Liefermärkten besteht.

51:T488,

Visualisierungen

Handelsänderungen

52:T319a,handel2024vs2025 = { const parseWert = value => { if (typeof value === "number") return value; const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) return NaN; if (text.includes(",")) { return Number( text .replace(/\./g, "") .replace(",", ".") ); } return Number(text.replace(/\./g, "")); }; const summeWorkbook = workbook => { const rows = workbook.sheet(0, { range: "A3:C", headers: true }); return d3.sum(rows, row => { const wert = parseWert(row.Wert); return Number.isFinite(wert) ? wert : 0; }); }; const export2024 = summeWorkbook( workbookAusfuhr2024 ); const import2024 = summeWorkbook( workbookEinfuhr2024 ); const export2025 = summeWorkbook( workbookAusfuhr2025 ); const import2025 = summeWorkbook( workbookEinfuhr2025 ); const daten = [ { jahr: "2024", handelsart: "Exporte", wert: export2024 }, { jahr: "2024", handelsart: "Importe", wert: import2024 }, { jahr: "2025", handelsart: "Exporte", wert: export2025 }, { jahr: "2025", handelsart: "Importe", wert: import2025 } ]; const farben = { Exporte: "#557fa5", Importe: "#9a6b91" }; const euroFormat = new Intl.NumberFormat("de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }); const milliardenFormat = value => `${( value / 1_000_000_000 ).toLocaleString("de-AT", { minimumFractionDigits: 1, maximumFractionDigits: 1 })} Mrd. €`; const veraenderung = ( aktuell, vorher ) => vorher > 0 ? (aktuell - vorher) / vorher : null; const exportVeraenderung = veraenderung( export2025, export2024 ); const importVeraenderung = veraenderung( import2025, import2024 ); const prozentFormat = new Intl.NumberFormat("de-AT", { style: "percent", minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: "always" }); /* * Gemeinsames Maximum: * Die Y-Achse bleibt beim Ein- und Ausblenden unverändert. */ const gemeinsamesMaximum = (d3.max(daten, d => d.wert) ?? 0) * 1.14; const container = document.createElement("div"); Object.assign(container.style, { width: "100%", maxWidth: "1100px", margin: "0 auto", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", color: "#243b5a" }); /* * Überschrift außerhalb des Plots. */ const header = document.createElement("div"); Object.assign(header.style, { marginBottom: "8px" }); const title = document.createElement("h2"); title.textContent = "Österreich: Import und Export im Vergleich 2024 – 2025"; Object.assign(title.style, { margin: "0 0 5px 0", color: "#243b5a", fontSize: "25px", fontWeight: "650", lineHeight: "1.25" }); const subtitle = document.createElement("div"); subtitle.textContent = "Gesamtwerte der Exporte und Importe"; Object.assign(subtitle.style, { marginBottom: "12px", color: "#546477", fontSize: "15px" }); /* * Checkboxen ersetzen die Legende. */ const controls = document.createElement("div"); Object.assign(controls.style, { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "10px" }); const checkboxExport = document.createElement("input"); checkboxExport.type = "checkbox"; checkboxExport.checked = true; const checkboxImport = document.createElement("input"); checkboxImport.type = "checkbox"; checkboxImport.checked = true; const createCheckbox = ( checkbox, labelText, color ) => { const label = document.createElement("label"); Object.assign(label.style, { display: "inline-flex", alignItems: "center", gap: "8px", padding: "8px 13px", border: `1px solid ${color}`, borderRadius: "999px", background: "#ffffff", color: "#33485f", fontSize: "13px", fontWeight: "650", cursor: "pointer", userSelect: "none", boxShadow: `0 0 0 2px ${color}22`, transition: "border-color 140ms ease, box-shadow 140ms ease, background 140ms ease" }); Object.assign(checkbox.style, { width: "15px", height: "15px", margin: "0", accentColor: color, cursor: "pointer" }); const text = document.createElement("span"); text.textContent = labelText; label.append( checkbox, text ); return label; }; const exportLabel = createCheckbox( checkboxExport, "Exporte", farben.Exporte ); const importLabel = createCheckbox( checkboxImport, "Importe", farben.Importe ); controls.append( exportLabel, importLabel ); header.append( title, subtitle, controls ); const chartContainer = document.createElement("div"); const message = document.createElement("div"); Object.assign(message.style, { minHeight: "18px", marginTop: "4px", color: "#9b2d30", fontSize: "12px" }); /* * Veränderungsbereich. */ const summaryTitle = document.createElement("div"); summaryTitle.textContent = "Veränderung von 2024 auf 2025"; Object.assign(summaryTitle.style, { marginTop: "16px", marginBottom: "10px", color: "#31485f", fontSize: "15px", fontWeight: "700" }); const summary = document.createElement("div"); Object.assign(summary.style, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: "12px" }); const createChangeCard = ({ titel, vorher, aktuell, aenderung, farbe }) => { const card = document.createElement("div"); Object.assign(card.style, { padding: "15px 17px", border: "1px solid #d9e1e8", borderRadius: "11px", background: "#f8fafc", boxShadow: "0 1px 3px rgba(20, 40, 60, 0.04)" }); const topRow = document.createElement("div"); Object.assign(topRow.style, { display: "flex", alignItems: "center", gap: "8px", marginBottom: "9px" }); const indicator = document.createElement("span"); Object.assign(indicator.style, { width: "4px", height: "17px", borderRadius: "999px", background: farbe }); const cardTitle = document.createElement("div"); cardTitle.textContent = titel; Object.assign(cardTitle.style, { color: "#526476", fontSize: "13px", fontWeight: "650" }); topRow.append( indicator, cardTitle ); const value = document.createElement("div"); value.textContent = aenderung == null ? "Keine Berechnung möglich" : prozentFormat.format(aenderung); Object.assign(value.style, { marginBottom: "8px", color: aenderung == null ? "#667788" : aenderung >= 0 ? "#1f6b45" : "#a33a3a", fontSize: "23px", fontWeight: "780" }); const comparison = document.createElement("div"); comparison.textContent = `${milliardenFormat(vorher)} → ${milliardenFormat(aktuell)}`; Object.assign(comparison.style, { color: "#68798a", fontSize: "12px" }); card.append( topRow, value, comparison ); return card; }; const exportChangeCard = createChangeCard({ titel: "Exporte", vorher: export2024, aktuell: export2025, aenderung: exportVeraenderung, farbe: farben.Exporte }); const importChangeCard = createChangeCard({ titel: "Importe", vorher: import2024, aktuell: import2025, aenderung: importVeraenderung, farbe: farben.Importe }); summary.append( exportChangeCard, importChangeCard ); container.append( header, chartContainer, message, summaryTitle, summary ); /* * Nicht ausgewählte Checkboxen bleiben normal klickbar * und sehen nicht deaktiviert aus. */ const aktualisiereCheckboxDesign = () => { Object.assign(exportLabel.style, { opacity: "1", color: "#33485f", background: checkboxExport.checked ? "#f7fafc" : "#ffffff", borderColor: checkboxExport.checked ? farben.Exporte : "#cbd5df", boxShadow: checkboxExport.checked ? `0 0 0 2px ${farben.Exporte}22` : "0 1px 2px rgba(20, 40, 60, 0.05)" }); Object.assign(importLabel.style, { opacity: "1", color: "#33485f", background: checkboxImport.checked ? "#fcf8fb" : "#ffffff", borderColor: checkboxImport.checked ? farben.Importe : "#cbd5df", boxShadow: checkboxImport.checked ? `0 0 0 2px ${farben.Importe}22` : "0 1px 2px rgba(20, 40, 60, 0.05)" }); }; const renderChart = zuletztGeaendert => { let exportAktiv = checkboxExport.checked; let importAktiv = checkboxImport.checked; // Falls durch den Klick beide Checkboxen deaktiviert wären, // wird automatisch die jeweils andere Handelsart aktiviert. if (!exportAktiv && !importAktiv) { if (zuletztGeaendert === "export") { checkboxImport.checked = true; importAktiv = true; } else { checkboxExport.checked = true; exportAktiv = true; } } message.textContent = ""; aktualisiereCheckboxDesign(); exportChangeCard.style.display = exportAktiv ? "block" : "none"; importChangeCard.style.display = importAktiv ? "block" : "none"; summaryTitle.style.display = exportAktiv || importAktiv ? "block" : "none"; const aktiveArten = []; if (exportAktiv) { aktiveArten.push("Exporte"); } if (importAktiv) { aktiveArten.push("Importe"); } const gefilterteDaten = daten.filter(d => aktiveArten.includes(d.handelsart) ); const plotDaten = gefilterteDaten.map(d => { let mitte; if (exportAktiv && importAktiv) { if (d.handelsart === "Exporte") { mitte = d.jahr === "2024" ? 0 : 1; } else { mitte = d.jahr === "2024" ? 3 : 4; } } else { mitte = d.jahr === "2024" ? 0 : 1; } return { ...d, mitte, x1: mitte - 0.43, x2: mitte + 0.43 }; }); const chart = Plot.plot({ width: 1100, height: 540, marginTop: 34, marginRight: 35, marginBottom: 62, marginLeft: 88, x: { label: "Handelsart", domain: exportAktiv && importAktiv ? [-0.8, 4.8] : [-0.8, 1.8], ticks: exportAktiv && importAktiv ? [0.5, 3.5] : [0.5], tickFormat: value => { if (exportAktiv && importAktiv) { return value === 0.5 ? "Exporte" : value === 3.5 ? "Importe" : ""; } return exportAktiv ? "Exporte" : "Importe"; } }, y: { label: "Wert in Mrd. €", grid: true, domain: [ 0, gemeinsamesMaximum ], tickFormat: value => ( value / 1_000_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 }) }, marks: [ Plot.ruleY([0], { stroke: "#34495e" }), Plot.rectY(plotDaten, { x1: "x1", x2: "x2", y1: 0, y2: "wert", fill: d => farben[d.handelsart], title: d => `${d.handelsart} ${d.jahr}\n${euroFormat.format( d.wert )}` }), Plot.text(plotDaten, { x: "mitte", y: "wert", text: d => `${d.jahr}\n${milliardenFormat( d.wert )}`, dy: -17, lineAnchor: "bottom", fontSize: 13, fontWeight: 700, fill: "#243b5a" }) ] }); chartContainer.replaceChildren(chart); }; checkboxExport.addEventListener( "change", () => renderChart("export") ); checkboxImport.addEventListener( "change", () => renderChart("import") ); renderChart(); return container; }53:T59c9,handelsbilanzKarte = { /* * ------------------------------------------------------------ * 1. IMPORT- UND EXPORTDATEN EINLESEN * ------------------------------------------------------------ */ const exportExcel = workbookAusfuhr2025.sheet(0, { range: "A3:C", headers: true }); const importExcel = workbookEinfuhr2025.sheet(0, { range: "A3:C", headers: true }); const world = await d3.json( "https://raw.githubusercontent.com/datasets/geo-countries/main/data/countries.geojson" ); /* * Excel-Zahlen zuverlässig in JavaScript-Zahlen umwandeln. */ const parseWert = value => { if (typeof value === "number") { return value; } const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) { return NaN; } if (text.includes(",")) { return Number( text .replace(/\./g, "") .replace(",", ".") ); } return Number( text.replace(/\./g, "") ); }; /* * Import- und Exporttabellen vereinheitlichen. */ const bereiteDatenAuf = rows => rows .map(row => ({ iso: String(row.ISOA2 ?? "") .trim() .toUpperCase(), name: String(row.Name ?? "") .trim(), wert: parseWert(row.Wert) })) .filter( row => /^[A-Z]{2}$/.test(row.iso) && Number.isFinite(row.wert) ); const exportDaten = bereiteDatenAuf(exportExcel); const importDaten = bereiteDatenAuf(importExcel); /* * Mehrfach vorkommende ISO-Codes zusammenfassen. */ const exportNachISO = d3.rollup( exportDaten, rows => d3.sum(rows, row => row.wert), row => row.iso ); const importNachISO = d3.rollup( importDaten, rows => d3.sum(rows, row => row.wert), row => row.iso ); const nameNachISO = new Map([ ...exportDaten.map(row => [ row.iso, row.name ]), ...importDaten.map(row => [ row.iso, row.name ]) ]); /* * ------------------------------------------------------------ * 2. GEOJSON MIT EXCEL-DATEN VERBINDEN * ------------------------------------------------------------ */ const isoFallback = new Map([ ["france", "FR"], ["frankreich", "FR"], ["norway", "NO"], ["kosovo", "XK"], ["serbia", "RS"], ["somaliland", "SO"], ["northern cyprus", "CY"] ]); const getGeoName = feature => String( feature.properties?.name ?? feature.properties?.ADMIN ?? feature.properties?.NAME ?? feature.properties?.NAME_EN ?? "" ).trim(); const getGeoISO = feature => { const properties = feature.properties ?? {}; const iso = String( properties["ISO3166-1-Alpha-2"] ?? properties.ISO_A2 ?? properties.iso_a2 ?? properties.iso2 ?? "" ) .trim() .toUpperCase(); if (/^[A-Z]{2}$/.test(iso)) { return iso; } return ( isoFallback.get( getGeoName(feature).toLowerCase() ) ?? "" ); }; const mapData = world.features.map(feature => { const iso = getGeoISO(feature); const exportwert = exportNachISO.get(iso) ?? 0; const importwert = importNachISO.get(iso) ?? 0; const hatDaten = exportNachISO.has(iso) || importNachISO.has(iso); const handelsbilanz = hatDaten ? exportwert - importwert : null; const status = !Number.isFinite(handelsbilanz) ? "Keine Daten" : handelsbilanz > 0 ? "Handelsüberschuss" : handelsbilanz < 0 ? "Handelsdefizit" : "Ausgeglichen"; return { ...feature, properties: { ...feature.properties, iso, name: nameNachISO.get(iso) ?? getGeoName(feature) ?? iso, exportwert, importwert, handelsbilanz, status } }; }); const bilanzLaender = mapData.filter( feature => Number.isFinite( feature.properties.handelsbilanz ) ); /* * ------------------------------------------------------------ * 3. TOP-10-LÄNDER BESTIMMEN * ------------------------------------------------------------ */ const positiveLaender = bilanzLaender .filter( feature => feature.properties.handelsbilanz > 0 ) .sort( (a, b) => d3.descending( a.properties.handelsbilanz, b.properties.handelsbilanz ) ); const negativeLaender = bilanzLaender .filter( feature => feature.properties.handelsbilanz < 0 ) .sort( (a, b) => d3.ascending( a.properties.handelsbilanz, b.properties.handelsbilanz ) ); const top10Positiv = positiveLaender.slice(0, 10); const top10Negativ = negativeLaender.slice(0, 10); /* * Längen- und Breitengrade für Beschriftungen. */ const erstelleLabelDaten = features => features.map((feature, index) => { const [longitude, latitude] = d3.geoCentroid(feature); return { feature, longitude, latitude, rang: index + 1, iso: feature.properties.iso, name: feature.properties.name, handelsbilanz: feature.properties.handelsbilanz }; }); const top10PositivLabels = erstelleLabelDaten(top10Positiv); const top10NegativLabels = erstelleLabelDaten(top10Negativ); /* * ------------------------------------------------------------ * 4. FARBKLASSEN * ------------------------------------------------------------ */ const positiveFarben = [ "#9fc3de", // leichter Überschuss "#355f80" // hoher Überschuss ]; const negativeFarben = [ "#cfa7c4", // leichtes Defizit "#754b70" // hohes Defizit ]; const hoheBilanzGrenze = 1_000_000_000; /*const maxPositiv = d3.max( positiveLaender, feature => feature.properties.handelsbilanz ) ?? 1; const maxNegativ = d3.max( negativeLaender, feature => Math.abs( feature.properties.handelsbilanz ) ) ?? 1;*/ /* * ------------------------------------------------------------ * 5. FORMATIERUNGEN * ------------------------------------------------------------ */ const euroFormat = new Intl.NumberFormat("de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }); const kompakt = value => { const betrag = Math.abs(value); if (betrag >= 1_000_000_000) { return `${( betrag / 1_000_000_000 ).toLocaleString("de-AT", { minimumFractionDigits: 1, maximumFractionDigits: 1 })} Mrd. €`; } if (betrag >= 1_000_000) { return `${( betrag / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 })} Mio. €`; } return euroFormat.format(betrag); }; const bilanzFormat = value => { if (!Number.isFinite(value)) { return "Keine Daten"; } if (value > 0) { return `+${kompakt(value)}`; } if (value < 0) { return `−${kompakt(value)}`; } return "0 €"; }; /* * ------------------------------------------------------------ * 6. UI-GRUNDELEMENTE * ------------------------------------------------------------ */ const container = document.createElement("div"); Object.assign(container.style, { width: "100%", maxWidth: "1100px", margin: "0 auto", boxSizing: "border-box", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", color: "#243b5a" }); const title = document.createElement("h2"); title.textContent = "Österreichische Handelsbilanz nach Partnerland 2025 weltweit"; Object.assign(title.style, { margin: "0 0 5px", color: "#243b5a", fontSize: "24px", fontWeight: "700" }); const subtitle = document.createElement("div"); subtitle.textContent = "Handelsüberschuss = Mehr Wert exportiert als importiert. Handelsdefizizt = Mehr Wert importiert als exportiert."; Object.assign(subtitle.style, { marginBottom: "15px", color: "#5f6f80", fontSize: "14px" }); const controls = document.createElement("div"); Object.assign(controls.style, { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "9px", marginBottom: "12px" }); /* * Einheitlich gestaltete Checkboxen. */ const createCheckbox = ( text, checked = true ) => { const label = document.createElement("label"); const input = document.createElement("input"); const span = document.createElement("span"); input.type = "checkbox"; input.checked = checked; span.textContent = text; Object.assign(label.style, { display: "inline-flex", alignItems: "center", gap: "7px", padding: "8px 12px", border: "1px solid #c8d2dc", borderRadius: "999px", background: "#ffffff", color: "#33495f", fontSize: "13px", fontWeight: "650", cursor: "pointer", userSelect: "none", transition: "border-color 140ms ease, background 140ms ease, box-shadow 140ms ease" }); Object.assign(input.style, { width: "15px", height: "15px", margin: "0", accentColor: "#557fa5", cursor: "pointer" }); label.append( input, span ); return { label, input }; }; const positivCheckbox = createCheckbox( "Handelsüberschüsse", true ); const negativCheckbox = createCheckbox( "Handelsdefizite", true ); const topPositivCheckbox = createCheckbox( "Top 10 Überschüsse", false ); const topNegativCheckbox = createCheckbox( "Top 10 Defizite", false ); controls.append( positivCheckbox.label, negativCheckbox.label, topPositivCheckbox.label, topNegativCheckbox.label ); const chartContainer = document.createElement("div"); Object.assign(chartContainer.style, { width: "100%", maxWidth: "100%", boxSizing: "border-box", overflow: "hidden" }); const legendContainer = document.createElement("div"); const rankingContainer = document.createElement("div"); container.append( title, subtitle, controls, chartContainer, legendContainer, rankingContainer ); /* * ------------------------------------------------------------ * 7. CHECKBOX-DESIGN AKTUALISIEREN * ------------------------------------------------------------ */ const aktualisiereCheckboxDesign = () => { const eintraege = [ positivCheckbox, negativCheckbox, topPositivCheckbox, topNegativCheckbox ]; for (const eintrag of eintraege) { Object.assign( eintrag.label.style, { background: eintrag.input.checked ? "#f1f6f9" : "#ffffff", borderColor: eintrag.input.checked ? "#6c879e" : "#c8d2dc", boxShadow: eintrag.input.checked ? "0 0 0 2px rgba(85,127,165,0.12)" : "none", opacity: "1" } ); } }; /* * ------------------------------------------------------------ * 8. EIGENE LEGENDE * ------------------------------------------------------------ */ const renderLegend = () => { const legend = document.createElement("div"); Object.assign(legend.style, { display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "10px 18px", marginTop: "3px", marginBottom: "12px", fontSize: "12px", color: "#536576" }); const createLegendItem = ( color, text ) => { const item = document.createElement("div"); const swatch = document.createElement("span"); const label = document.createElement("span"); Object.assign(item.style, { display: "inline-flex", alignItems: "center", gap: "6px" }); Object.assign(swatch.style, { width: "17px", height: "12px", borderRadius: "2px", background: color, border: "1px solid rgba(30,45,60,0.18)" }); label.textContent = text; item.append( swatch, label ); return item; }; /* * Blaue Klassen nur anzeigen, * wenn Überschüsse aktiviert sind. */ if (positivCheckbox.input.checked) { legend.append( createLegendItem( positiveFarben[0], "leichter Überschuss (< 1 Mrd. €)" ), createLegendItem( positiveFarben[1], "hoher Überschuss (> 1 Mrd. €)" ) ); } legend.append( createLegendItem( "#eceff1", "keine Daten / ausgeblendet" ) ); if (negativCheckbox.input.checked) { legend.append( createLegendItem( negativeFarben[0], "leichtes Defizit (> -1 Mrd. €)" ), createLegendItem( negativeFarben[1], "hohes Defizit (< -1 Mrd. €)" ) ); } legendContainer.replaceChildren( legend ); }; /* * ------------------------------------------------------------ * 9. TOP-10-LISTEN * ------------------------------------------------------------ */ const renderRankings = () => { rankingContainer.replaceChildren(); const positivAktiv = topPositivCheckbox.input.checked; const negativAktiv = topNegativCheckbox.input.checked; if (!positivAktiv && !negativAktiv) { return; } const wrapper = document.createElement("div"); Object.assign(wrapper.style, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "14px", marginTop: "8px" }); const createRanking = ( heading, daten, color ) => { const block = document.createElement("div"); Object.assign(block.style, { padding: "14px 16px", border: "1px solid #d7e0e8", borderRadius: "11px", background: "#f8fafc" }); const blockTitle = document.createElement("div"); blockTitle.textContent = heading; Object.assign(blockTitle.style, { marginBottom: "9px", color: "#31475c", fontSize: "14px", fontWeight: "750" }); block.append(blockTitle); daten.forEach((feature, index) => { const row = document.createElement("div"); const name = document.createElement("span"); const wert = document.createElement("span"); Object.assign(row.style, { display: "flex", justifyContent: "space-between", gap: "12px", padding: "6px 0", borderTop: index === 0 ? "none" : "1px solid #e5ebf0", fontSize: "13px" }); name.textContent = `${index + 1}. ${feature.properties.name}`; wert.textContent = bilanzFormat( feature.properties.handelsbilanz ); Object.assign(wert.style, { color, fontWeight: "750", whiteSpace: "nowrap" }); row.append( name, wert ); block.append(row); }); return block; }; if (positivAktiv) { wrapper.append( createRanking( "Top 10 Handelsüberschüsse", top10Positiv, "#355f80" ) ); } if (negativAktiv) { wrapper.append( createRanking( "Top 10 Handelsdefizite", top10Negativ, "#754b70" ) ); } rankingContainer.append( wrapper ); }; /* * ------------------------------------------------------------ * 10. KARTE ZEICHNEN * ------------------------------------------------------------ */ const renderChart = () => { aktualisiereCheckboxDesign(); const zeigePositiv = positivCheckbox.input.checked; const zeigeNegativ = negativCheckbox.input.checked; const zeigeTopPositiv = topPositivCheckbox.input.checked; const zeigeTopNegativ = topNegativCheckbox.input.checked; const getFill = feature => { const bilanz = feature.properties.handelsbilanz; if (!Number.isFinite(bilanz)) { return "#eceff1"; } if (bilanz > 0) { if (!zeigePositiv) { return "#eceff1"; } return bilanz >= hoheBilanzGrenze ? positiveFarben[1] : positiveFarben[0]; } if (bilanz < 0) { if (!zeigeNegativ) { return "#eceff1"; } return bilanz <= -hoheBilanzGrenze ? negativeFarben[1] : negativeFarben[0]; } return "#d5dadd"; }; const marks = [ /* * Kartenhintergrund beziehungsweise Ozean. */ Plot.sphere({ fill: "#d7e6ef", stroke: "#78909e", strokeWidth: 1.1 }), /* * Eingefärbte Länder. */ Plot.geo(mapData, { fill: getFill, stroke: "none", title: feature => { const properties = feature.properties; if ( !Number.isFinite( properties.handelsbilanz ) ) { return ( `${properties.name} (${properties.iso})\n` + "Keine Handelsdaten vorhanden" ); } const bilanzText = properties.handelsbilanz > 0 ? `Handelsüberschuss: ${bilanzFormat( properties.handelsbilanz )}` : properties.handelsbilanz < 0 ? `Handelsdefizit: ${bilanzFormat( properties.handelsbilanz )}` : "Ausgeglichene Handelsbilanz"; return ( `${properties.name} (${properties.iso})\n` + `Exporte: ${euroFormat.format( properties.exportwert )}\n` + `Importe: ${euroFormat.format( properties.importwert )}\n` + bilanzText ); } }), /* * Permanente Ländergrenzen. */ Plot.geo(mapData, { fill: "none", stroke: "#718493", strokeWidth: 0.65, pointerEvents: "none" }) ]; /* * Top-10-Konturen. */ if (zeigeTopPositiv) { marks.push( Plot.geo(top10Positiv, { fill: "none", stroke: "#162d40", strokeWidth: 2.1, pointerEvents: "none" }) ); } if (zeigeTopNegativ) { marks.push( Plot.geo(top10Negativ, { fill: "none", stroke: "#3e1f3a", strokeWidth: 2.1, pointerEvents: "none" }) ); } const gemesseneBreite = chartContainer .getBoundingClientRect() .width || container .getBoundingClientRect() .width || 1100; const chartWidth = Math.max( 320, Math.min( 1100, Math.floor(gemesseneBreite) ) ); const chartHeight = Math.max( 360, Math.min( 650, Math.round( chartWidth * 0.59 ) ) ); const chart = Plot.plot({ width: chartWidth, height: chartHeight, projection: "equal-earth", marginTop: 35, marginRight: 20, marginBottom: 20, marginLeft: 20, marks }); Object.assign(chart.style, { display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: "0 auto", overflow: "visible" }); /* * Nur die Pfade der ersten Länderflächenebene * erhalten den Hover-Effekt. */ const geoGroups = Array.from( chart.querySelectorAll( 'g[aria-label="geo"]' ) ); const countryGroup = geoGroups[1] ?? null; const countryPaths = countryGroup ? Array.from( countryGroup.querySelectorAll( "path" ) ) : []; for (const path of countryPaths) { const originalStroke = path.getAttribute("stroke") ?? "none"; const originalStrokeWidth = path.getAttribute( "stroke-width" ) ?? "0"; path.style.cursor = "pointer"; path.style.transition = [ "filter 140ms ease", "stroke 140ms ease", "stroke-width 140ms ease" ].join(", "); const entferneHover = () => { path.style.filter = ""; path.setAttribute( "stroke", originalStroke ); path.setAttribute( "stroke-width", originalStrokeWidth ); }; path.addEventListener( "pointerenter", () => { path.style.filter = "brightness(1.2) drop-shadow(0 0 3px rgba(0,0,0,0.6))"; path.setAttribute( "stroke", "#111111" ); path.setAttribute( "stroke-width", "1.7" ); } ); path.addEventListener( "pointerleave", entferneHover ); path.addEventListener( "pointercancel", entferneHover ); } chartContainer.replaceChildren( chart ); renderLegend(); renderRankings(); }; /* * ------------------------------------------------------------ * 11. INTERAKTIONEN * ------------------------------------------------------------ */ for ( const eintrag of [ positivCheckbox, negativCheckbox, topPositivCheckbox, topNegativCheckbox ] ) { eintrag.input.addEventListener( "change", renderChart ); } aktualisiereCheckboxDesign(); renderChart(); /* * Responsive Neuberechnung. */ let letzteBreite = 0; const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(entries => { const breite = entries[0]?.contentRect?.width ?? 0; if ( breite > 0 && Math.abs( breite - letzteBreite ) > 2 ) { letzteBreite = breite; renderChart(); } }) : null; resizeObserver?.observe( chartContainer ); invalidation.then(() => { resizeObserver?.disconnect(); }); return container; }54:T5e8,

Interpretation

Die Choroplethenkarte zeigt, dass Österreich gegenüber vielen europäischen und nordamerikanischen Handelspartnern Handelsüberschüsse erzielt, während insbesondere gegenüber mehreren asiatischen Ländern deutliche Handelsdefizite bestehen. Besonders hohe Überschüsse (über 1 Mrd. €) werden mit den Vereinigten Staaten (+5,2 Mrd. €), dem Vereinigten Königreich (+2,9 Mrd. €) und Ungarn (+2,2 Mrd. €) erzielt. Auch Frankreich, Rumänien, Slowenien, Mexiko, Polen und Kroatien weisen positive Handelsbilanzen von mehr als einer Milliarde Euro auf.

Auf der Defizitseite dominiert die Volksrepublik China mit einem Handelsdefizit von rund 12,5 Mrd. €, gefolgt von Deutschland (−7,3 Mrd. €) sowie Kasachstan und den Niederlanden. Insgesamt verdeutlicht die Karte, dass Österreich gegenüber den meisten Industrieländern Europas und Nordamerikas wettbewerbsfähig ist, während bei zahlreichen asiatischen Produktionsstandorten deutliche Importüberschüsse bestehen. Die räumliche Verteilung unterstreicht damit die Rolle Europas und Nordamerikas als wichtige Absatzmärkte, während Asien vor allem als bedeutender Beschaffungsmarkt für österreichische Importe hervortritt.

55:T5257,handelsbilanzPartner = { const exportExcel = workbookAusfuhr2025.sheet(0, { range: "A3:C", headers: true }); const importExcel = workbookEinfuhr2025.sheet(0, { range: "A3:C", headers: true }); const parseWert = value => { if (typeof value === "number") return value; const text = String(value ?? "") .trim() .replace(/\u00a0/g, "") .replace(/\s/g, "") .replace(/€/g, ""); if (!text) return NaN; return text.includes(",") ? Number( text .replace(/\./g, "") .replace(",", ".") ) : Number(text.replace(/\./g, "")); }; const normalize = value => String(value ?? "") .trim() .toLocaleLowerCase("de-AT") .normalize("NFD") .replace(/\p{Diacritic}/gu, ""); const bereiteDatenAuf = rows => rows .map(row => ({ iso: String(row.ISOA2 ?? "") .trim() .toUpperCase(), name: String(row.Name ?? "") .trim(), wert: parseWert(row.Wert) })) .filter( row => /^[A-Z]{2}$/.test(row.iso) && Number.isFinite(row.wert) ); const exportDaten = bereiteDatenAuf(exportExcel); const importDaten = bereiteDatenAuf(importExcel); const exportNachISO = d3.rollup( exportDaten, rows => d3.sum(rows, row => row.wert), row => row.iso ); const importNachISO = d3.rollup( importDaten, rows => d3.sum(rows, row => row.wert), row => row.iso ); const nameNachISO = new Map([ ...exportDaten.map(row => [ row.iso, row.name ]), ...importDaten.map(row => [ row.iso, row.name ]) ]); const kontinentISO = { Europa: new Set( ` AD AL AT AX BA BE BG BY CH CY CZ DE DK EE ES FI FO FR GB GG GI GR HR HU IE IM IS IT JE LI LT LU LV MC MD ME MK MT NL NO PL PT RO RS RU SE SI SJ SK SM UA VA XK XS ` .trim() .split(/\s+/) ), Asien: new Set( ` AE AF AM AZ BD BH BN BT CN GE HK ID IL IN IQ IR JO JP KG KH KP KR KW KZ LA LB LK MM MN MO MV MY NP OM PH PK PS QA SA SG SY TH TJ TL TM TR TW UZ VN YE ` .trim() .split(/\s+/) ), Afrika: new Set( ` AO BF BI BJ BW CD CF CG CI CM CV DJ DZ EG EH ER ET GA GH GM GN GQ GW KE KM LR LS LY MA MG ML MR MU MW MZ NA NE NG RE RW SC SD SH SL SN SO SS ST SZ TD TG TN TZ UG YT ZA ZM ZW ` .trim() .split(/\s+/) ), Nordamerika: new Set( ` AG AI AW BB BL BM BQ BS BZ CA CR CU CW DM DO GD GL GP GT HN HT JM KN KY LC MF MQ MS MX NI PA PM PR SV SX TC TT US VC VG VI ` .trim() .split(/\s+/) ), Südamerika: new Set( ` AR BO BR CL CO EC FK GF GY PE PY SR UY VE ` .trim() .split(/\s+/) ), Ozeanien: new Set( ` AS AU CK FJ FM GU KI MH MP NC NF NR NU NZ PF PG PN PW SB TK TO TV UM VU WF WS ` .trim() .split(/\s+/) ) }; const kontinentNachISO = new Map(); for ( const [kontinent, isoCodes] of Object.entries(kontinentISO) ) { for (const iso of isoCodes) { kontinentNachISO.set(iso, kontinent); } } const nachbarISO = new Set([ "DE", "CZ", "SK", "HU", "SI", "IT", "CH", "LI" ]); const alleISO = new Set([ ...exportNachISO.keys(), ...importNachISO.keys() ]); const alleLaender = Array.from( alleISO, iso => { const exportwert = exportNachISO.get(iso) ?? 0; const importwert = importNachISO.get(iso) ?? 0; const handelsbilanz = exportwert - importwert; return { iso, name: nameNachISO.get(iso) ?? iso, exportwert, importwert, handelsbilanz, handelsbilanzMrd: handelsbilanz / 1_000_000_000, kontinent: kontinentNachISO.get(iso) ?? "Nicht zugeordnet", status: handelsbilanz > 0 ? "Positiv" : handelsbilanz < 0 ? "Negativ" : "Ausgeglichen" }; } ) .filter( land => land.exportwert > 0 || land.importwert > 0 ) .sort((a, b) => a.name.localeCompare(b.name, "de") ); const euroFormat = new Intl.NumberFormat("de-AT", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }); const bilanzFormat = value => { const betrag = Math.abs(value); const vorzeichen = value > 0 ? "+" : value < 0 ? "−" : ""; if (betrag >= 1_000_000_000) { return ( `${vorzeichen}${( betrag / 1_000_000_000 ).toLocaleString("de-AT", { minimumFractionDigits: 1, maximumFractionDigits: 1 })} Mrd. €` ); } return ( `${vorzeichen}${( betrag / 1_000_000 ).toLocaleString("de-AT", { maximumFractionDigits: 0 })} Mio. €` ); }; const container = document.createElement("div"); Object.assign(container.style, { width: "100%", maxWidth: "1100px", margin: "0 auto", boxSizing: "border-box", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", color: "#243b5a" }); const title = document.createElement("h2"); title.textContent = "Österreichische Handelsbilanz nach Partnerland 2025 Länderliste"; Object.assign(title.style, { margin: "0 0 5px", color: "#243b5a", fontSize: "24px", fontWeight: "700" }); const subtitle = document.createElement("div"); subtitle.textContent = "Positive Werte zeigen einen Exportüberschuss, negative Werte ein Handelsdefizit."; Object.assign(subtitle.style, { marginBottom: "15px", color: "#5f6f80", fontSize: "14px" }); const controls = document.createElement("div"); Object.assign(controls.style, { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "10px", marginBottom: "12px" }); const radioName = `handelsbilanz-${Math.random() .toString(36) .slice(2)}`; const createRadio = ( value, text, checked = false ) => { const label = document.createElement("label"); Object.assign(label.style, { display: "inline-flex", alignItems: "center", gap: "7px", padding: "8px 12px", border: "1px solid #c8d2dc", borderRadius: "999px", background: "#ffffff", color: "#33495f", fontSize: "13px", fontWeight: "650", cursor: "pointer", userSelect: "none" }); const input = document.createElement("input"); input.type = "radio"; input.name = radioName; input.value = value; input.checked = checked; Object.assign(input.style, { margin: "0", accentColor: "#557fa5", cursor: "pointer" }); const span = document.createElement("span"); span.textContent = text; label.append(input, span); return { label, input }; }; const nachbarRadio = createRadio( "nachbarn", "Nachbarländer", true ); const alleRadio = createRadio( "alle", "Alle Länder" ); const kontinentRadio = createRadio( "kontinent", "Kontinent" ); const kontinentSelect = document.createElement("select"); for ( const kontinent of [ "Europa", "Asien", "Nordamerika", "Südamerika", "Afrika", "Ozeanien" ] ) { const option = document.createElement("option"); option.value = kontinent; option.textContent = kontinent; kontinentSelect.append(option); } /*Object.assign(kontinentSelect.style, { display: "none", padding: "8px 35px 8px 12px", border: "1px solid #aab7c3", borderRadius: "8px", background: "#ffffff", color: "#33495f", font: "inherit", fontSize: "13px", cursor: "pointer" });*/ Object.assign(kontinentSelect.style, { display: "none", /* mehr Platz rechts für den Pfeil */ padding: "8px 48px 8px 12px", border: "1px solid #aab7c3", borderRadius: "8px", color: "#33495f", font: "inherit", fontSize: "13px", cursor: "pointer", appearance: "none", WebkitAppearance: "none", MozAppearance: "none", backgroundColor: "#ffffff", /* eigener Pfeil */ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: "no-repeat", /* <-- hier den Abstand einstellen */ backgroundPosition: "right 16px center", backgroundSize: "10px 6px" }); controls.append( nachbarRadio.label, kontinentRadio.label, alleRadio.label, kontinentSelect ); const searchWrap = document.createElement("div"); Object.assign(searchWrap.style, { width: "min(100%, 390px)", marginBottom: "12px" }); const searchInput = document.createElement("input"); searchInput.type = "search"; searchInput.placeholder = "Land suchen, z. B. Deutschland"; searchInput.autocomplete = "off"; Object.assign(searchInput.style, { width: "100%", boxSizing: "border-box", padding: "10px 13px", border: "1px solid #aab7c3", borderRadius: "8px", background: "#ffffff", color: "#263d58", font: "inherit", fontSize: "14px", outline: "none" }); const datalistId = `handelsbilanz-laender-${Math.random() .toString(36) .slice(2)}`; searchInput.setAttribute( "list", datalistId ); const datalist = document.createElement("datalist"); datalist.id = datalistId; for (const land of alleLaender) { const option = document.createElement("option"); option.value = land.name; option.label = `${land.iso} · ${land.kontinent}`; datalist.append(option); } searchWrap.append( searchInput, datalist ); const info = document.createElement("div"); Object.assign(info.style, { minHeight: "20px", marginBottom: "4px", color: "#607184", fontSize: "13px" }); const chartContainer = document.createElement("div"); Object.assign(chartContainer.style, { width: "100%", maxWidth: "100%", boxSizing: "border-box", overflow: "hidden" }); container.append( title, subtitle, controls, searchWrap, info, chartContainer ); const ausgewaehlterModus = () => { if (kontinentRadio.input.checked) { return "kontinent"; } if (nachbarRadio.input.checked) { return "nachbarn"; } return "alle"; }; const aktualisiereControls = () => { for ( const eintrag of [ alleRadio, kontinentRadio, nachbarRadio ] ) { Object.assign( eintrag.label.style, { borderColor: eintrag.input.checked ? "#557fa5" : "#c8d2dc", background: eintrag.input.checked ? "#eef4f8" : "#ffffff", boxShadow: eintrag.input.checked ? "0 0 0 2px rgba(85,127,165,0.13)" : "none" } ); } kontinentSelect.style.display = kontinentRadio.input.checked ? "inline-block" : "none"; }; const renderChart = () => { const modus = ausgewaehlterModus(); const suchtext = normalize(searchInput.value); let daten; if (suchtext) { daten = alleLaender.filter( land => normalize(land.name).includes( suchtext ) || normalize(land.iso).includes( suchtext ) ); } else if (modus === "nachbarn") { daten = alleLaender.filter( land => nachbarISO.has(land.iso) ); } else if (modus === "kontinent") { daten = alleLaender.filter( land => land.kontinent === kontinentSelect.value ); } else { daten = [...alleLaender]; } daten.sort( (a, b) => d3.ascending( a.handelsbilanz, b.handelsbilanz ) ); const plotDaten = daten.map( (land, index) => ({ ...land, position: index }) ); /* * Feste Beschriftungen ausschließlich * für die Nachbarländer. */ const labels = modus === "nachbarn" && !suchtext ? plotDaten : []; const positiveLabels = labels.filter( land => land.handelsbilanz >= 0 ); const negativeLabels = labels.filter( land => land.handelsbilanz < 0 ); const maxAbsolut = d3.max( plotDaten, land => Math.abs( land.handelsbilanzMrd ) ) ?? 1; const yMaximum = Math.max( 0.1, maxAbsolut * 1.22 ); const gemesseneBreite = chartContainer .getBoundingClientRect() .width || container .getBoundingClientRect() .width || 1100; const chartWidth = Math.max( 320, Math.min( 1100, Math.floor( gemesseneBreite ) ) ); const punktRadius = plotDaten.length <= 20 ? 8 : 5.5; const chart = Plot.plot({ width: chartWidth, height: 600, marginTop: 45, marginRight: 55, marginBottom: 55, marginLeft: 85, /* * Keine zufälligen Ländernamen * auf der unteren Achse. */ x: { axis: null, domain: [ -0.7, Math.max( 0.7, plotDaten.length - 0.3 ) ] }, y: { label: "Handelsbilanz in Mrd. €", domain: [ -yMaximum, yMaximum ], grid: true, tickFormat: value => value.toLocaleString( "de-AT", { maximumFractionDigits: 1 } ) }, color: { domain: [ "Negativ", "Positiv", "Ausgeglichen" ], range: [ "#a17b9f", "#6689a8", "#87929c" ], legend: true, label: "Status" }, marks: [ Plot.ruleY([0], { stroke: "#17212b", strokeWidth: 2 }), /* * Nur ein Punkt-Layer. */ Plot.dot(plotDaten, { x: "position", y: "handelsbilanzMrd", fill: "status", r: punktRadius, fillOpacity: 0.9, stroke: "#ffffff", strokeWidth: 1.3, title: land => { const bilanzBeschreibung = land.handelsbilanz >= 0 ? `Handelsüberschuss: ${euroFormat.format( land.handelsbilanz )}` : `Handelsdefizit: ${euroFormat.format( Math.abs( land.handelsbilanz ) )}`; return ( `${land.name} (${land.iso})\n` + `Kontinent: ${land.kontinent}\n` + `Exporte: ${euroFormat.format( land.exportwert )}\n` + `Importe: ${euroFormat.format( land.importwert )}\n` + bilanzBeschreibung ); } }), Plot.text(positiveLabels, { x: "position", y: "handelsbilanzMrd", text: land => `${land.name}\n${bilanzFormat( land.handelsbilanz )}`, dy: -19, textAnchor: "middle", fontSize: 11, fontWeight: 700, fill: "#263d58", stroke: "#ffffff", strokeWidth: 4, paintOrder: "stroke", pointerEvents: "none" }), Plot.text(negativeLabels, { x: "position", y: "handelsbilanzMrd", text: land => `${land.name}\n${bilanzFormat( land.handelsbilanz )}`, dy: 20, textAnchor: "middle", fontSize: 11, fontWeight: 700, fill: "#263d58", stroke: "#ffffff", strokeWidth: 4, paintOrder: "stroke", pointerEvents: "none" }) ] }); Object.assign(chart.style, { display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: "0 auto", overflow: "visible" }); /* * Hover-Effekt direkt auf die sichtbaren Kreise. */ /* * Stabiler Hover-Effekt für die sichtbaren Punkte. * Der Punkt wird über CSS skaliert und nicht im SVG verschoben. */ const dotGroup = chart.querySelector( 'g[aria-label="dot"]' ); const circles = dotGroup ? Array.from( dotGroup.querySelectorAll( "circle" ) ) : []; for (const circle of circles) { const originalStroke = circle.getAttribute("stroke") ?? "#ffffff"; const originalStrokeWidth = circle.getAttribute( "stroke-width" ) ?? "1.3"; circle.style.cursor = "pointer"; /* * Wichtig für korrektes Skalieren eines SVG-Kreises. */ circle.style.transformBox = "fill-box"; circle.style.transformOrigin = "center"; circle.style.transition = [ "transform 130ms ease", "filter 130ms ease", "stroke 130ms ease", "stroke-width 130ms ease" ].join(", "); const aktiviereHover = () => { circle.style.transform = "scale(1.65)"; circle.setAttribute( "stroke", "#111111" ); circle.setAttribute( "stroke-width", "2.2" ); circle.style.filter = "drop-shadow(0 2px 3px rgba(0,0,0,0.35))"; }; const entferneHover = () => { circle.style.transform = "scale(1)"; circle.setAttribute( "stroke", originalStroke ); circle.setAttribute( "stroke-width", originalStrokeWidth ); circle.style.filter = ""; }; circle.addEventListener( "pointerenter", aktiviereHover ); circle.addEventListener( "pointerleave", entferneHover ); /* * Zusätzliche Absicherung, falls der Mauszeiger * das Diagramm sehr schnell verlässt. */ circle.addEventListener( "pointercancel", entferneHover ); } if (!plotDaten.length) { info.textContent = `Kein Land für „${searchInput.value.trim()}“ gefunden.`; } else if (suchtext) { info.textContent = plotDaten.length === 1 ? `${plotDaten[0].name} wird angezeigt.` : `${plotDaten.length} passende Länder werden angezeigt.`; } else if (modus === "nachbarn") { info.textContent = `${plotDaten.length} österreichische Nachbarländer werden angezeigt.`; } else if (modus === "kontinent") { info.textContent = `${plotDaten.length} Partnerländer in ${kontinentSelect.value} werden angezeigt.`; } else { info.textContent = `${plotDaten.length} Partnerländer werden angezeigt.`; } chartContainer.replaceChildren(chart); }; const handleRadioChange = () => { searchInput.value = ""; aktualisiereControls(); renderChart(); }; alleRadio.input.addEventListener( "change", handleRadioChange ); kontinentRadio.input.addEventListener( "change", handleRadioChange ); nachbarRadio.input.addEventListener( "change", handleRadioChange ); kontinentSelect.addEventListener( "change", () => { searchInput.value = ""; renderChart(); } ); searchInput.addEventListener( "input", () => { /* * Beim Klick auf das native X wird * automatisch wieder „Alle Länder“ gewählt. */ if (!searchInput.value.trim()) { nachbarRadio.input.checked = true; aktualisiereControls(); } renderChart(); } ); aktualisiereControls(); renderChart(); let letzteBreite = 0; const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(entries => { const breite = entries[0]?.contentRect?.width ?? 0; if ( breite > 0 && Math.abs( breite - letzteBreite ) > 2 ) { letzteBreite = breite; renderChart(); } }) : null; resizeObserver?.observe( chartContainer ); invalidation.then(() => { resizeObserver?.disconnect(); }); return container; }56:[{"id":"9ab1ac5b7ab1c2aca653285d2a74e3b4164268c10eb0b8f8c611cd8d97748ae8081bbbe85f5f61988c484d9806262c53ad6b04d96d0d5391df2ddd4216f1fdb7","href":"https://static.observableusercontent.com/files/9ab1ac5b7ab1c2aca653285d2a74e3b4164268c10eb0b8f8c611cd8d97748ae8081bbbe85f5f61988c484d9806262c53ad6b04d96d0d5391df2ddd4216f1fdb7","name":"image@1.png","type":"image/png","lastModified":1784152519816.256,"size":3809232},{"id":"d95d64ae7b23305f57d2dbd556731d0bc2a1f5ad03f9d4a4095129283a86e2ada2029ee9f757cd88ba19039097f5b8f9190c04ff60d0f9148e7e44ec7825c692","href":"https://static.observableusercontent.com/files/d95d64ae7b23305f57d2dbd556731d0bc2a1f5ad03f9d4a4095129283a86e2ada2029ee9f757cd88ba19039097f5b8f9190c04ff60d0f9148e7e44ec7825c692","name":"Einfuhr 2024 Wert in Euro.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1784153062847.177,"size":62008},{"id":"23231d6e0f84ebf2a08dfd4cac8bfd636648b65dd336b90311bb96f59b7e27e2f1f9d7089b643d054795f4374e2cbc9505d0d6362104206834ee8ccda26148c4","href":"https://static.observableusercontent.com/files/23231d6e0f84ebf2a08dfd4cac8bfd636648b65dd336b90311bb96f59b7e27e2f1f9d7089b643d054795f4374e2cbc9505d0d6362104206834ee8ccda26148c4","name":"around-the-world.mp3","type":"audio/mpeg","lastModified":1784133979588.804,"size":150393},{"id":"7cc95f366929f0d3daeaaadbb1b20e2e20ec813eae930bd4b1a151c33b8a385c34a5ae3cf946bd42c1794387bad312fa43bf5ecac45e8200072af55406cd7b8d","href":"https://static.observableusercontent.com/files/7cc95f366929f0d3daeaaadbb1b20e2e20ec813eae930bd4b1a151c33b8a385c34a5ae3cf946bd42c1794387bad312fa43bf5ecac45e8200072af55406cd7b8d","name":"Ausfuhr 2024 Wert in Euro.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1784153062843.733,"size":59564},{"id":"7737524805a40c3ad2f7d23bb7fa7b4ae2dedec8ddb7d449256e5fae5cffb8af9c51460bc2337df9ec955c03872a0630885eddf44ae29725d095e6e0eda6d3d6","href":"https://static.observableusercontent.com/files/7737524805a40c3ad2f7d23bb7fa7b4ae2dedec8ddb7d449256e5fae5cffb8af9c51460bc2337df9ec955c03872a0630885eddf44ae29725d095e6e0eda6d3d6","name":"ÖsterreichImporte.png","type":"image/png","lastModified":1783241770849.866,"size":28556},{"id":"7f8b8be6aef9bbc6bb2d72bb8a2413612d4681101f3266f50abde10430c79a23cccf4257cd9a37d4619ed1ccb64c835b879a7bdaf5de66f5e13e3b73c8568f07","href":"https://static.observableusercontent.com/files/7f8b8be6aef9bbc6bb2d72bb8a2413612d4681101f3266f50abde10430c79a23cccf4257cd9a37d4619ed1ccb64c835b879a7bdaf5de66f5e13e3b73c8568f07","name":"VergleichImportundExport.png","type":"image/png","lastModified":1783241770849.866,"size":29203},{"id":"2b3f7b31cef9135a06e875ab3dd9b79709cfb38e47fb00380beb9aedec655656cb2c507336913e935898fa1e8f27968c9dc510319a0d825303ae8b5ab36156a2","href":"https://static.observableusercontent.com/files/2b3f7b31cef9135a06e875ab3dd9b79709cfb38e47fb00380beb9aedec655656cb2c507336913e935898fa1e8f27968c9dc510319a0d825303ae8b5ab36156a2","name":"top10HandelspartnerÖsterreich.png","type":"image/png","lastModified":1783241770849.866,"size":46338},{"id":"1fd9b94a63410a832f88b9e6459158aad2cd1a50f9df320968727bbcc1e55ee7b0450c48b39bfde5117ee16c3d27dd76cd0261f269ff906e4513e46ead2ad553","href":"https://static.observableusercontent.com/files/1fd9b94a63410a832f88b9e6459158aad2cd1a50f9df320968727bbcc1e55ee7b0450c48b39bfde5117ee16c3d27dd76cd0261f269ff906e4513e46ead2ad553","name":"ÖsterreichExporte.png","type":"image/png","lastModified":1783241770849.866,"size":27858},{"id":"3d891d23c59638dca32578ef59eeea3e3cea47b77cdff6277a3f3f3efcce1ecc472fecb9c3744d00441caf9093becee5da0ccd0c24d0e0414fa7ea010a32cb58","href":"https://static.observableusercontent.com/files/3d891d23c59638dca32578ef59eeea3e3cea47b77cdff6277a3f3f3efcce1ecc472fecb9c3744d00441caf9093becee5da0ccd0c24d0e0414fa7ea010a32cb58","name":"Handelsbilanz.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1783241770849.866,"size":60868},{"id":"c9ff75d90eac1c40b5ba65b4a8aa70cbeec6f7a1772122128705da11f8103df8604a2071dfc23ad661e9a1d9f4e1b95f911b077397392b2a10c339427c1d2ec6","href":"https://static.observableusercontent.com/files/c9ff75d90eac1c40b5ba65b4a8aa70cbeec6f7a1772122128705da11f8103df8604a2071dfc23ad661e9a1d9f4e1b95f911b077397392b2a10c339427c1d2ec6","name":"Einfuhr 2025 Wert in Euro@1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1783241770849.866,"size":60732},{"id":"506bd01e9ee3b90aae23e937deadb9fd522d01320bdb0c055fbf423ff3189ac1ff7217571dd62ede3f88f23008f44d5882b007bec306617d56ab5a5e1ae51696","href":"https://static.observableusercontent.com/files/506bd01e9ee3b90aae23e937deadb9fd522d01320bdb0c055fbf423ff3189ac1ff7217571dd62ede3f88f23008f44d5882b007bec306617d56ab5a5e1ae51696","name":"Ausfuhr 2025 Wert in Euro@5.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1783241770849.866,"size":59815},{"id":"def9d2f3e7263ac2df6dde0133ad7201a70f9b5be5af59a2ed1d90f98926133d4bebcfcf6702a00142bbbd7add792f60f5d2d9adaa52ab07831e2e0d791a8752","href":"https://static.observableusercontent.com/files/def9d2f3e7263ac2df6dde0133ad7201a70f9b5be5af59a2ed1d90f98926133d4bebcfcf6702a00142bbbd7add792f60f5d2d9adaa52ab07831e2e0d791a8752","name":"Veränderung Handelsintensität 2025 im Vergleich zum Vorjahr in Euro.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1783241770849.866,"size":62334}] 29:{"id":"e0021bfc0d7b9808","slug":null,"title":"\n Reise um die Welt - Österreichs Außenhandel 2025\n","thumbnail":"81d4678d0f7bcb7fd78a58ab7e59dd8313de943fdc19ca5851deb7f8b7a50b6c","access_level":"public","create_time":"$D2026-07-05T08:56:10.849Z","update_time":"$D2026-07-17T14:56:45.828Z","view_time":null,"first_public_time":"$D2026-07-15T16:58:30.844Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":1857,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fd38f1d2662b43d","login":"s2510745002","name":"Angelika","avatar_url":"https://avatars-next.observableusercontent.com/26a31904523d9fc437b76bbe24fd0f17e69d618119abe6317246b1a34b5a3dcd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"},{"type":"individual","id":"5fd38f1d2662b43d","login":"s2510745002","name":"Angelika","avatar_url":"https://avatars-next.observableusercontent.com/26a31904523d9fc437b76bbe24fd0f17e69d618119abe6317246b1a34b5a3dcd","tier":null,"role":"editor"},{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"\n Reise um die Welt - Österreichs Außenhandel 2025\n","cells":[{"id":1831,"value":"

\n Reise um die Welt - Österreichs Außenhandel 2025\n

\n\n

\n Interaktive Visualisierung und Analyse der österreichischen\n Export-, Import- und Handelsbilanzdaten mit Fokus auf\n Handelspartner, regionale Verteilung und Handelsintensität.\n

\n\n

\n Visualisierungen\n

\n\n

\n Exporte und Importe\n

\n\n

\n Visualisierungen\n

\n\n

\n Zusammenhänge Handel & Entfernung\n

\n\n

\n Interpretation\n

\n\n

\n\n\n

\nDer Vergleich der gesamten Export- und Importwerte zeigt eine deutliche Veränderung der österreichischen Handelsstruktur zwischen den Jahren 2024 und 2025. Während Österreich im Jahr 2024 noch einen höheren Export- als Importwert verzeichnete, überstieg im Jahr 2025 erstmals der Wert der Importe den Wert der Exporte.\n

\n\n

\nDiese Entwicklung spiegelt sich auch in der Handelsbilanz wider. Im Jahr 2024 erzielte Österreich noch einen Handelsüberschuss, während im Jahr 2025 ein Handelsdefizit verzeichnet wurde. Innerhalb eines Jahres kam es somit zu einem Wechsel von einer positiven zu einer negativen Handelsbilanz, was auf eine Verschiebung der außenwirtschaftlichen Position Österreichs hindeutet.\n

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1023,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1784,"value":"

\n\n

\n Visualisierungen\n

\n\n

\n Handelsbilanzen\n

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1788,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1699,"value":"$53","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1779,"value":"$54","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1660,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1726,"value":"$55","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"## Imports and Code\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1041,"value":"import { toc } from \"@nebrius/indented-toc\" // Table of Contents","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1488,"value":"##### Geladene Datensätze","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1483,"value":"workbookAusfuhr2025 = FileAttachment(\"Ausfuhr 2025 Wert in Euro@5.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"workbookAusfuhr2025.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"workbookEinfuhr2025 = FileAttachment(\"Einfuhr 2025 Wert in Euro@1.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"workbookEinfuhr2025.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"workbookVeränderungHandelsintesität = FileAttachment(\"Veränderung Handelsintensität 2025 im Vergleich zum Vorjahr in Euro.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"workbookVeränderungHandelsintesität.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"workbookHandelsbilanz = FileAttachment(\"Handelsbilanz.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"workbookHandelsbilanz.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"workbookAusfuhr2024 = FileAttachment(\"Ausfuhr 2024 Wert in Euro.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"workbookAusfuhr2024.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"workbookEinfuhr2024 = FileAttachment(\"Einfuhr 2024 Wert in Euro.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"workbookEinfuhr2024.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W56","stdlib":"1"}} 24:null