{"id":1491,"date":"2024-05-02T18:51:59","date_gmt":"2024-05-02T16:51:59","guid":{"rendered":"https:\/\/dt-report.de\/panel\/"},"modified":"2025-11-05T14:48:59","modified_gmt":"2025-11-05T13:48:59","slug":"panel","status":"publish","type":"page","link":"https:\/\/dt-report.de\/en\/panel\/?lang=pl","title":{"rendered":"Panel"},"content":{"rendered":"[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_header title=&#8221;Panel&#8221; button_one_text=&#8221;Panel pacjenta&#8221; button_one_url=&#8221;https:\/\/dt-report.de\/dashboard\/#patienten&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#477bb8&#8243; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; button_two_text=&#8221;Panel zespo\u0142u diabetologicznego&#8221; button_two_url=&#8221;https:\/\/dt-report.de\/dashboard\/#diabetesteam&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<h2>Panel pacjenta 2025<\/h2>[\/et_pb_text][et_pb_code module_id=&#8221;patienten&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<iframe loading=\"lazy\" width=\"100%\" height=\"600\" src=\"https:\/\/app.powerbi.com\/view?r=eyJrIjoiNjhjOTZhYjYtZjQzMC00ODdkLWI5ZjAtMDUwNmRkNzI5YjRlIiwidCI6IjQ4NDY0YmY4LWViOTMtNDI2Zi1hZGQ5LTM5MTY4ZTllMDc3MiJ9&amp;embedImagePlaceholder=true\" frameborder=\"0\" allowfullscreen=\"true\"><!-- [et_pb_line_break_holder] --><\/iframe><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243; module_id=&#8221;diabetesteam&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<h2>Panel zespo\u0142u diabetologicznego 2025<\/h2>[\/et_pb_text][et_pb_code module_id=&#8221;patienten&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<iframe loading=\"lazy\" width=\"100%\" height=\"600\" src=\"https:\/\/app.powerbi.com\/view?r=eyJrIjoiN2NkMjgwZDYtYzYxMC00NzFjLTg4YzctM2I5YjZiYWRmZGU3IiwidCI6IjQ4NDY0YmY4LWViOTMtNDI2Zi1hZGQ5LTM5MTY4ZTllMDc3MiJ9&amp;embedImagePlaceholder=true\" frameborder=\"0\" allowfullscreen=\"true\"><!-- [et_pb_line_break_holder] --><\/iframe><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; disabled_on=&#8221;on|on|on&#8221; module_id=&#8221;lekarze&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; disabled=&#8221;on&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;H1&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#f2f0eb&#8221; border_radii=&#8221;on|6px|6px|6px|6px&#8221; border_color_all=&#8221;RGBA(255,255,255,0)&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text disabled_on=&#8221;off|off|off&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;abb74a70-48f3-4be5-8e28-aff93dd6f04b&#8221; custom_margin=&#8221;||10px||false|false&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Panel zespo\u0142u diabetologicznego<\/h2>[\/et_pb_text][et_pb_text disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;abb74a70-48f3-4be5-8e28-aff93dd6f04b&#8221; custom_margin=&#8221;||10px||false|false&#8221; disabled=&#8221;on&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Panel lekarzy<\/h2>\n<p><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#stichprobedeutschland\">Pr\u00f3bka Niemcy<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#stichprobeoesterreich\">Pr\u00f3bka Austria<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#stichprobeschweiz\">Pr\u00f3bka Szwajcaria<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#diabetologischeeinrichtungen\">Plac\u00f3wki diabetologiczne<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#themenfelder\">Obszary tematyczne<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#einstellungenzurdigitalisierung\">Nastawienie do digitalizacji<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#aidsysteme\">Systemy AID<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#cgm\">CGM<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#onlinevideoschulungen\">Szkolenia wideo online<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#ki\">Sztuczna inteligencja<\/a><br><a href=\"https:\/\/dt-report.de\/en\/pl\/panel\/#indikationenvoncgm\">Wskazania do CGM<\/a><\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;1 Pr\u00f3bka D&#8221; module_id=&#8221;stichprobedeutschland&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Herkunft --><!-- [et_pb_line_break_holder] --><h2>Pr\u00f3bka Niemcy<\/h2><!-- [et_pb_line_break_holder] --><h3>Pochodzenie<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_herkunft\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Herkunft), konvertierte H\u00e4ufigkeit in numerische Werte<!-- [et_pb_line_break_holder] -->    const barData_herkunft = [<!-- [et_pb_line_break_holder] -->        { region: \"KV Bayern\", value: 16.31 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Niedersachsen\", value: 13.48 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Baden-W\u00fcrttemberg\", value: 12.06 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Nordrhein\", value: 12.06 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Westfalen-Lippe\", value: 6.38 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Berlin\", value: 5.74 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Hessen\", value: 5.74 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Rheinland-Pfalz\", value: 4.79 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Sachsen\", value: 4.79 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Schleswig-Holstein\", value: 3.19 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Th\u00fcringen\", value: 2.55 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Brandenburg\", value: 1.91 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Sachsen-Anhalt\", value: 1.91 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Hamburg\", value: 1.91 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Mecklenburg-Vorpommern\", value: 1.27 },<!-- [et_pb_line_break_holder] -->        { region: \"KV Bremen\", value: 0.64 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_herkunft = d3.select(\"#barChart_herkunft\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartHerkunft() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Region<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_herkunft.map(d => d.region.length));<!-- [et_pb_line_break_holder] -->        const barMargin_herkunft = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_herkunft = Math.min(1080, window.innerWidth * 0.8) - barMargin_herkunft.left - barMargin_herkunft.right,<!-- [et_pb_line_break_holder] -->            barHeight_herkunft = 500 - barMargin_herkunft.top - barMargin_herkunft.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_herkunft = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_herkunft, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_herkunft]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_herkunft = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_herkunft.map(d => d.region))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_herkunft])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_herkunft<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_herkunft + barMargin_herkunft.left + barMargin_herkunft.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_herkunft + barMargin_herkunft.top + barMargin_herkunft.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_herkunft.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_herkunft = barSvg_herkunft<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_herkunft.left},${barMargin_herkunft.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_herkunft = barChart_herkunft.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_herkunft)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_herkunft(d.region))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_herkunft.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_herkunft(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_herkunft.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_herkunft))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicks() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_herkunft.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_herkunft.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_herkunft})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_herkunft)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicks()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_herkunft.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_herkunft) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_herkunft + barMargin_herkunft.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung rechtsb\u00fcndig und abgesetzt von den Labels<!-- [et_pb_line_break_holder] -->        barChart_herkunft.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_herkunft.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Region\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_herkunft = barChart_herkunft.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_herkunft)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_herkunft(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_herkunft(d.region) + barY_herkunft.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartHerkunft();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartHerkunft);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][et_pb_code admin_label=&#8221;1 Pr\u00f3bka D Dodatkowe szkolenie&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Dodatkowe szkolenie Niemcy<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChart\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Zusatzweiterbildung)<!-- [et_pb_line_break_holder] -->    const data = [<!-- [et_pb_line_break_holder] -->        { label: 'beide', spending: 48.9 },<!-- [et_pb_line_break_holder] -->        { label: 'ausschlie\u00dflich Diabetologe \u00c4rztekammer', spending: 24.8 },<!-- [et_pb_line_break_holder] -->        { label: 'ausschlie\u00dflich Diabetologe DDG', spending: 22.6 },<!-- [et_pb_line_break_holder] -->        { label: 'weder noch', spending: 3.6 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colors = ['#1482A5', '#F47A2D', '#95C623', '#9A6980'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function calculateHeight() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = data.length * 40;         return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChart() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeight();        const svg = d3.select('#pieChart')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();  \/\/ Clear previous content        const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(data))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (data.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(data)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', -10)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .style('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .style('font-family', 'Arial')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${d.spending}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChart();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChart);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;1.1 Pr\u00f3bka A&#8221; module_id=&#8221;stichprobeoesterreich&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Titel --><!-- [et_pb_line_break_holder] --><h2>Pr\u00f3bka Austria<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Pochodzenie<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_herkunftA\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Herkunft A), konvertierte H\u00e4ufigkeit in numerische Werte<!-- [et_pb_line_break_holder] -->    const barData_herkunftA = [<!-- [et_pb_line_break_holder] -->        { region: \"Steiermark\", value: 38.24 },<!-- [et_pb_line_break_holder] -->        { region: \"Wien\", value: 23.53 },<!-- [et_pb_line_break_holder] -->        { region: \"Ober\u00f6sterreich\", value: 11.76 },<!-- [et_pb_line_break_holder] -->        { region: \"Tirol\", value: 8.82 },<!-- [et_pb_line_break_holder] -->        { region: \"Nieder\u00f6sterreich\", value: 5.88 },<!-- [et_pb_line_break_holder] -->        { region: \"Salzburg\", value: 5.88 },<!-- [et_pb_line_break_holder] -->        { region: \"Burgenland\", value: 2.9 },<!-- [et_pb_line_break_holder] -->        { region: \"K\u00e4rnten\", value: 2.9 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_herkunftA = d3.select(\"#barChart_herkunftA\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartHerkunftA() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Region<!-- [et_pb_line_break_holder] -->        const longestLabelLengthA = Math.max(...barData_herkunftA.map(d => d.region.length));<!-- [et_pb_line_break_holder] -->        const barMargin_herkunftA = {top: 40, right: 50, bottom: 60, left: longestLabelLengthA * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_herkunftA = Math.min(1080, window.innerWidth * 0.8) - barMargin_herkunftA.left - barMargin_herkunftA.right,<!-- [et_pb_line_break_holder] -->            barHeight_herkunftA = 500 - barMargin_herkunftA.top - barMargin_herkunftA.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_herkunftA = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_herkunftA, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_herkunftA]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_herkunftA = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_herkunftA.map(d => d.region))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_herkunftA])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_herkunftA<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_herkunftA + barMargin_herkunftA.left + barMargin_herkunftA.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_herkunftA + barMargin_herkunftA.top + barMargin_herkunftA.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_herkunftA.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_herkunftA = barSvg_herkunftA<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_herkunftA.left},${barMargin_herkunftA.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_herkunftA = barChart_herkunftA.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_herkunftA)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_herkunftA(d.region))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_herkunftA.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_herkunftA(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_herkunftA.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_herkunftA))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksA() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_herkunftA.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_herkunftA.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_herkunftA})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_herkunftA)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksA()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und mit weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_herkunftA.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_herkunftA) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_herkunftA + barMargin_herkunftA.bottom - 15) \/\/ Weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung rechtsb\u00fcndig mit den y-Achsenlabels<!-- [et_pb_line_break_holder] -->        barChart_herkunftA.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_herkunftA.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Bundesland AU\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_herkunftA = barChart_herkunftA.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_herkunftA)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_herkunftA(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_herkunftA(d.region) + barY_herkunftA.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartHerkunftA();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartHerkunftA);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;1.11 Pr\u00f3bka CH&#8221; module_id=&#8221;stichprobeschweiz&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Titel --><!-- [et_pb_line_break_holder] --><h2>Pr\u00f3bka Szwajcaria<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Pochodzenie<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_herkunftC\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Herkunft C), konvertierte H\u00e4ufigkeit in numerische Werte<!-- [et_pb_line_break_holder] -->    const barData_herkunftC = [<!-- [et_pb_line_break_holder] -->        { region: \"Bern\", value: 23.08 },<!-- [et_pb_line_break_holder] -->        { region: \"Aargau\", value: 15.38 },<!-- [et_pb_line_break_holder] -->        { region: \"Solothurn\", value: 15.38 },<!-- [et_pb_line_break_holder] -->        { region: \"Basel-Landschaft\", value: 7.69 },<!-- [et_pb_line_break_holder] -->        { region: \"Freiburg\", value: 7.69 },<!-- [et_pb_line_break_holder] -->        { region: \"Luzern\", value: 7.69 },<!-- [et_pb_line_break_holder] -->        { region: \"Waadt\", value: 7.69 },<!-- [et_pb_line_break_holder] -->        { region: \"Thurgau\", value: 7.69 },<!-- [et_pb_line_break_holder] -->        { region: \"Basel-Stadt\", value: 7.69 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_herkunftC = d3.select(\"#barChart_herkunftC\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartHerkunftC() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Region<!-- [et_pb_line_break_holder] -->        const longestLabelLengthC = Math.max(...barData_herkunftC.map(d => d.region.length));<!-- [et_pb_line_break_holder] -->        const barMargin_herkunftC = {top: 40, right: 50, bottom: 60, left: longestLabelLengthC * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_herkunftC = Math.min(1080, window.innerWidth * 0.8) - barMargin_herkunftC.left - barMargin_herkunftC.right,<!-- [et_pb_line_break_holder] -->            barHeight_herkunftC = 500 - barMargin_herkunftC.top - barMargin_herkunftC.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_herkunftC = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_herkunftC, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_herkunftC]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_herkunftC = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_herkunftC.map(d => d.region))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_herkunftC])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_herkunftC<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_herkunftC + barMargin_herkunftC.left + barMargin_herkunftC.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_herkunftC + barMargin_herkunftC.top + barMargin_herkunftC.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_herkunftC.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_herkunftC = barSvg_herkunftC<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_herkunftC.left},${barMargin_herkunftC.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_herkunftC = barChart_herkunftC.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_herkunftC)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_herkunftC(d.region))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_herkunftC.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_herkunftC(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_herkunftC.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_herkunftC))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksC() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_herkunftC.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_herkunftC.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_herkunftC})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_herkunftC)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksC()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und mit weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_herkunftC.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_herkunftC) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_herkunftC + barMargin_herkunftC.bottom - 15) \/\/ Weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung rechtsb\u00fcndig mit den y-Achsenlabels<!-- [et_pb_line_break_holder] -->        barChart_herkunftC.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_herkunftC.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Kanton CH\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_herkunftC = barChart_herkunftC.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_herkunftC)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_herkunftC(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_herkunftC(d.region) + barY_herkunftC.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartHerkunftC();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartHerkunftC);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;1.11 Pr\u00f3bka CH Dodatkowe szkolenie&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Dodatkowe szkolenie Szwajcaria<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChart_2\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Zusatzweiterbildung)<!-- [et_pb_line_break_holder] -->    const data_pieChart_2 = [<!-- [et_pb_line_break_holder] -->        { label: 'beide', spending: 10 },<!-- [et_pb_line_break_holder] -->        { label: 'ausschlie\u00dflich Facharzt Endokrinologie \/ Diabetologie', spending: 3 },<!-- [et_pb_line_break_holder] -->        { label: 'ausschlie\u00dflich Facharzt Allgemeine Innere Medizin', spending: 1 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colors_pieChart_2 = ['#1482A5', '#F47A2D', '#95C623'];<!-- [et_pb_line_break_holder] -->    const totalSpending_pieChart_2 = data_pieChart_2.reduce((sum, d) => sum + d.spending, 0);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function calculateHeightPieChart2() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = data_pieChart_2.length * 40;         return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChart2() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeightPieChart2();        const svg = d3.select('#pieChart_2')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();         const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(data_pieChart_2))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors_pieChart_2[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (data_pieChart_2.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(data_pieChart_2)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors_pieChart_2[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${((d.spending \/ totalSpending_pieChart_2) * 100).toFixed(2)}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChart2();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChart2);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;2 Plac\u00f3wki Forma praktyki&#8221; module_id=&#8221;diabetologischeeinrichtungen&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Titel --><!-- [et_pb_line_break_holder] --><h2>Plac\u00f3wki diabetologiczne<\/h2><!-- [et_pb_line_break_holder] --><h3>Forma praktyki plac\u00f3wki diabetologicznej<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_praxisform\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Praxisform)<!-- [et_pb_line_break_holder] -->    const barData_praxisform = [<!-- [et_pb_line_break_holder] -->        { praxisform: 'Gemeinschaftspraxis', value: 35.71 },<!-- [et_pb_line_break_holder] -->        { praxisform: 'Einzelpraxis', value: 25.82 },<!-- [et_pb_line_break_holder] -->        { praxisform: 'MVZ \/ Ambulatorium', value: 24.18 },<!-- [et_pb_line_break_holder] -->        { praxisform: 'Sonstiges', value: 9.89 },<!-- [et_pb_line_break_holder] -->        { praxisform: 'Praxisgemeinschaft', value: 4.40 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_praxisform = d3.select(\"#barChart_praxisform\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartPraxisform() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Praxisform<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_praxisform.map(d => d.praxisform.length));<!-- [et_pb_line_break_holder] -->        const barMargin_praxisform = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_praxisform = Math.min(1080, window.innerWidth * 0.8) - barMargin_praxisform.left - barMargin_praxisform.right,<!-- [et_pb_line_break_holder] -->              barHeight_praxisform = 500 - barMargin_praxisform.top - barMargin_praxisform.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_praxisform = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_praxisform, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_praxisform]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_praxisform = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_praxisform.map(d => d.praxisform))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_praxisform])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_praxisform<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_praxisform + barMargin_praxisform.left + barMargin_praxisform.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_praxisform + barMargin_praxisform.top + barMargin_praxisform.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_praxisform.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_praxisform = barSvg_praxisform<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_praxisform.left},${barMargin_praxisform.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_praxisform = barChart_praxisform.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_praxisform)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_praxisform(d.praxisform))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_praxisform.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_praxisform(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#1482A5\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_praxisform.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_praxisform))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksPraxisform() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_praxisform.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_praxisform.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_praxisform})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_praxisform)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksPraxisform()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_praxisform.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_praxisform) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_praxisform + barMargin_praxisform.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung rechtsb\u00fcndig und abgesetzt von den Labels<!-- [et_pb_line_break_holder] -->        barChart_praxisform.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_praxisform.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Praxisform\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_praxisform = barChart_praxisform.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_praxisform)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_praxisform(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_praxisform(d.praxisform) + barY_praxisform.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartPraxisform();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartPraxisform);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;2 Plac\u00f3wki Wyposa\u017cenie&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Wyposa\u017cenie plac\u00f3wki diabetologicznej<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"treeMap_ausstattung_data\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Tree Map (Ausstattung)<!-- [et_pb_line_break_holder] -->    const treeData_ausstattung_data = [<!-- [et_pb_line_break_holder] -->        { name: 'Online-Rezept', value: 53.4 },<!-- [et_pb_line_break_holder] -->        { name: 'Online-Video-Sprechstunde', value: 41.5 },<!-- [et_pb_line_break_holder] -->        { name: 'Digitale Protokollbesprechung', value: 38.9 },<!-- [et_pb_line_break_holder] -->        { name: 'Online-Termine', value: 30.6 },<!-- [et_pb_line_break_holder] -->        { name: 'Online-Video-Gruppenschulung', value: 10.9 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->    const treeMapColors_ausstattung_data = ['#1482A5', '#F47A2D', '#95C623', '#9A6980', '#E17B34'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const treeSvg_ausstattung_data = d3.select(\"#treeMap_ausstattung_data\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    function drawTreeMapAusstattungData() {<!-- [et_pb_line_break_holder] -->        const treeMargin_ausstattung_data = { top: 40, right: 10, bottom: 80, left: 10 };<!-- [et_pb_line_break_holder] -->        const containerWidth_ausstattung_data = Math.min(1080, window.innerWidth * 0.8) - treeMargin_ausstattung_data.left - treeMargin_ausstattung_data.right;<!-- [et_pb_line_break_holder] -->        const treeHeight_ausstattung_data = 400; \/\/ Fixed content height for the tree map content<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ Calculate the SVG container height dynamically based on the number of legend items<!-- [et_pb_line_break_holder] -->        const legendItemHeight_ausstattung_data = 25;<!-- [et_pb_line_break_holder] -->        const legendHeight_ausstattung_data = treeData_ausstattung_data.length * legendItemHeight_ausstattung_data;<!-- [et_pb_line_break_holder] -->        const svgHeight_ausstattung_data = treeHeight_ausstattung_data + treeMargin_ausstattung_data.top + treeMargin_ausstattung_data.bottom + legendHeight_ausstattung_data;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        treeSvg_ausstattung_data<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth_ausstattung_data + treeMargin_ausstattung_data.left + treeMargin_ausstattung_data.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", svgHeight_ausstattung_data);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        treeSvg_ausstattung_data.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Erstelle die Hierarchie f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->        const root_ausstattung_data = d3.hierarchy({ children: treeData_ausstattung_data })<!-- [et_pb_line_break_holder] -->            .sum(d =&gt; d.value);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        d3.treemap()<!-- [et_pb_line_break_holder] -->            .size([containerWidth_ausstattung_data, treeHeight_ausstattung_data])<!-- [et_pb_line_break_holder] -->            .padding(2)(root_ausstattung_data);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Rechtecke mit den festgelegten Farben<!-- [et_pb_line_break_holder] -->        const nodes_ausstattung_data = treeSvg_ausstattung_data.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_ausstattung_data.left},${treeMargin_ausstattung_data.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(root_ausstattung_data.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; d.x1 - d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", d =&gt; d.y1 - d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_ausstattung_data[i % treeMapColors_ausstattung_data.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge nur den Wert in die Rechtecke ein<!-- [et_pb_line_break_holder] -->        treeSvg_ausstattung_data.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_ausstattung_data.left},${treeMargin_ausstattung_data.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .data(root_ausstattung_data.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0 + (d.x1 - d.x0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0 + (d.y1 - d.y0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"16px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.data.value.toFixed(1) + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Legende unterhalb des Tree Maps<!-- [et_pb_line_break_holder] -->        const legendGroup_ausstattung_data = treeSvg_ausstattung_data.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend-group\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(20, ${treeHeight_ausstattung_data + treeMargin_ausstattung_data.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_ausstattung_data = legendGroup_ausstattung_data.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(treeData_ausstattung_data)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * legendItemHeight_ausstattung_data})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechteck f\u00fcr die Farben in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_ausstattung_data.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_ausstattung_data[i % treeMapColors_ausstattung_data.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Text in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_ausstattung_data.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 20)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .style(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.name);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    drawTreeMapAusstattungData();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Tree Map neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawTreeMapAusstattungData);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;2 Plac\u00f3wki Rodzaj&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Rodzaj plac\u00f3wki diabetologicznej<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChart_diabetic_facility\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Art der diabetologischen Einrichtung)<!-- [et_pb_line_break_holder] -->    const data_pieChart_diabetic_facility = [<!-- [et_pb_line_break_holder] -->        { label: 'Ambulant', spending: 69.59 },<!-- [et_pb_line_break_holder] -->        { label: 'In beiden Bereichen', spending: 26.29 },<!-- [et_pb_line_break_holder] -->        { label: 'Station\u00e4r', spending: 4.12 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colors_pieChart_diabetic_facility = ['#1482A5', '#F47A2D', '#95C623'];<!-- [et_pb_line_break_holder] -->    const totalSpending_pieChart_diabetic_facility = data_pieChart_diabetic_facility.reduce((sum, d) => sum + d.spending, 0);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zur Berechnung der dynamischen H\u00f6he<!-- [et_pb_line_break_holder] -->    function calculateHeightPieChartDiabeticFacility() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = data_pieChart_diabetic_facility.length * 40;        return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChartDiabeticFacility() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeightPieChartDiabeticFacility();        const svg = d3.select('#pieChart_diabetic_facility')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();  \/\/ Clear previous contents        const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(data_pieChart_diabetic_facility))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors_pieChart_diabetic_facility[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Ziffern auf den Pie-Segmenten anzeigen<!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legende erstellen<!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (data_pieChart_diabetic_facility.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(data_pieChart_diabetic_facility)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors_pieChart_diabetic_facility[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${((d.spending \/ totalSpending_pieChart_diabetic_facility) * 100).toFixed(2)}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChartDiabeticFacility();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChartDiabeticFacility);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;3 Obszary tematyczne&#8221; module_id=&#8221;themenfelder&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Titel --><!-- [et_pb_line_break_holder] --><h2>Obszary tematyczne<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Najwa\u017cniejsze obszary tematyczne digitalizacji i nowoczesnych technologii diabetologicznych<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_diabetes\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Diabetes-Themenfelder)<!-- [et_pb_line_break_holder] -->    const barData_diabetes = [<!-- [et_pb_line_break_holder] -->        { region: \"AID\", value: 86.0 },<!-- [et_pb_line_break_holder] -->        { region: \"Kompatibilit\u00e4t\", value: 62.7 },<!-- [et_pb_line_break_holder] -->        { region: \"Software\", value: 46.6 },<!-- [et_pb_line_break_holder] -->        { region: \"Hilfs-Systeme Patienten-Entscheidung\", value: 29.5 },<!-- [et_pb_line_break_holder] -->        { region: \"KI\", value: 27.5 },<!-- [et_pb_line_break_holder] -->        { region: \"Apps\", value: 13.5 },<!-- [et_pb_line_break_holder] -->        { region: \"Hilfs-Systeme Arzt-Entscheidung\", value: 10.9 },<!-- [et_pb_line_break_holder] -->        { region: \"Online-Video-Sprechstunde\", value: 9.8 },<!-- [et_pb_line_break_holder] -->        { region: \"Online-Typ-2-Pr\u00e4vention\", value: 8.8 },<!-- [et_pb_line_break_holder] -->        { region: \"Online-Communities\", value: 6.2 },<!-- [et_pb_line_break_holder] -->        { region: \"Online-Video-Schulung\", value: 4.1 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_diabetes = d3.select(\"#barChart_diabetes\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartDiabetes() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Region<!-- [et_pb_line_break_holder] -->        const longestLabelLengthDiabetes = Math.max(...barData_diabetes.map(d => d.region.length));<!-- [et_pb_line_break_holder] -->        const barMargin_diabetes = {top: 40, right: 50, bottom: 60, left: longestLabelLengthDiabetes * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_diabetes = Math.min(1080, window.innerWidth * 0.8) - barMargin_diabetes.left - barMargin_diabetes.right,<!-- [et_pb_line_break_holder] -->            barHeight_diabetes = 500 - barMargin_diabetes.top - barMargin_diabetes.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_diabetes = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_diabetes, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_diabetes]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_diabetes = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_diabetes.map(d => d.region))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_diabetes])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_diabetes<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_diabetes + barMargin_diabetes.left + barMargin_diabetes.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_diabetes + barMargin_diabetes.top + barMargin_diabetes.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_diabetes.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_diabetes = barSvg_diabetes<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_diabetes.left},${barMargin_diabetes.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_diabetes = barChart_diabetes.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_diabetes)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_diabetes(d.region))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_diabetes.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_diabetes(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_diabetes.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_diabetes))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksDiabetes() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_diabetes.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_diabetes.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_diabetes})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_diabetes)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksDiabetes()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und mit weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_diabetes.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_diabetes) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_diabetes + barMargin_diabetes.bottom - 15) \/\/ Weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung rechtsb\u00fcndig mit den y-Achsenlabels<!-- [et_pb_line_break_holder] -->        barChart_diabetes.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_diabetes.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Themenfelder\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_diabetes = barChart_diabetes.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_diabetes)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_diabetes(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_diabetes(d.region) + barY_diabetes.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartDiabetes();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartDiabetes);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;4 Nastawienie do digitalizacji&#8221; module_id=&#8221;einstellungenzurdigitalisierung&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Nastawienie do digitalizacji<\/h2><!-- [et_pb_line_break_holder] --><h3>Nastawienie do digitalizacji w diabetologii<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChart_digi_attitude\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Einstellung zur Digitalisierung)<!-- [et_pb_line_break_holder] -->    const data_pieChart_digi_attitude = [<!-- [et_pb_line_break_holder] -->        { label: 'positiv', spending: 86.24 },<!-- [et_pb_line_break_holder] -->        { label: 'neutral', spending: 11.64 },<!-- [et_pb_line_break_holder] -->        { label: 'negativ', spending: 2.12 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colors_pieChart_digi_attitude = ['#1482A5', '#F47A2D', '#95C623'];<!-- [et_pb_line_break_holder] -->    const totalSpending_pieChart_digi_attitude = data_pieChart_digi_attitude.reduce((sum, d) => sum + d.spending, 0);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function calculateHeightPieChartDigiAttitude() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = data_pieChart_digi_attitude.length * 40;        return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChartDigiAttitude() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeightPieChartDigiAttitude();        const svg = d3.select('#pieChart_digi_attitude')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();  \/\/ Clear previous content        const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(data_pieChart_digi_attitude))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors_pieChart_digi_attitude[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (data_pieChart_digi_attitude.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(data_pieChart_digi_attitude)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colors_pieChart_digi_attitude[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${((d.spending \/ totalSpending_pieChart_digi_attitude) * 100).toFixed(2)}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChartDigiAttitude();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChartDigiAttitude);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;4 Obci\u0105\u017cenia zwi\u0105zane z cukrzyc\u0105 &#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Belastungen durch neue Technologien --><!-- [et_pb_line_break_holder] --><h3>Obci\u0105\u017cenia zwi\u0105zane z cukrzyc\u0105 przez nowoczesne technologie<\/h3><!-- Bar Chart: Auswirkungen durch neue Technologien --><!-- [et_pb_line_break_holder] --><svg id=\"barChart_technologyImpact\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the bar chart<!-- [et_pb_line_break_holder] -->    const barData_technologyImpact = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Weniger Belastungen\", value: 71 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Neue Belastungen\", value: 24 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the bar chart<!-- [et_pb_line_break_holder] -->    const colors_technologyImpact = {<!-- [et_pb_line_break_holder] -->        \"Weniger Belastungen\": \"#1482A5\",   \/\/ Blue<!-- [et_pb_line_break_holder] -->        \"Neue Belastungen\": \"#F47A2D\"      \/\/ Orange<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_technologyImpact = d3.select(\"#barChart_technologyImpact\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the horizontal bar chart<!-- [et_pb_line_break_holder] -->    function drawBarChartTechnologyImpact() {<!-- [et_pb_line_break_holder] -->        const barMargin_technologyImpact = {top: 40, right: 50, bottom: 60, left: 200}; <!-- [et_pb_line_break_holder] -->        const barContainerWidth_technologyImpact = Math.min(1080, window.innerWidth * 0.8) - barMargin_technologyImpact.left - barMargin_technologyImpact.right,<!-- [et_pb_line_break_holder] -->              barHeight_technologyImpact = 200 - barMargin_technologyImpact.top - barMargin_technologyImpact.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_technologyImpact = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Total percentage must sum to 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_technologyImpact]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_technologyImpact = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_technologyImpact.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_technologyImpact])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_technologyImpact<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_technologyImpact + barMargin_technologyImpact.left + barMargin_technologyImpact.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_technologyImpact + barMargin_technologyImpact.top + barMargin_technologyImpact.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_technologyImpact.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const barChart_technologyImpact = barSvg_technologyImpact<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_technologyImpact.left},${barMargin_technologyImpact.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the bars<!-- [et_pb_line_break_holder] -->        barChart_technologyImpact.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_technologyImpact)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_technologyImpact(d.kategorie))<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; barX_technologyImpact(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_technologyImpact.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_technologyImpact[d.kategorie]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add category labels inside the bars (black, above each section)<!-- [et_pb_line_break_holder] -->        barChart_technologyImpact.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_technologyImpact)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_technologyImpact(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_technologyImpact(d.kategorie) + barY_technologyImpact.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"start\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.value + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the y-axis (left, categories)<!-- [et_pb_line_break_holder] -->        barChart_technologyImpact.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_technologyImpact));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawBarChartTechnologyImpact();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartTechnologyImpact);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;4 Powody obci\u0105\u017ce\u0144&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Powody obci\u0105\u017ce\u0144 przez nowe technologie<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_belastungen\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    const barData_belastungen = [<!-- [et_pb_line_break_holder] -->        { grund: \"Technische Probleme\", value: 67.7 },<!-- [et_pb_line_break_holder] -->        { grund: \"\u00dcberforderung\", value: 63.0 },<!-- [et_pb_line_break_holder] -->        { grund: \"Gef\u00fchl der Abh\u00e4ngigkeit\", value: 44.8 },<!-- [et_pb_line_break_holder] -->        { grund: \"Unerf\u00fcllte Erwartungen\", value: 40.1 },<!-- [et_pb_line_break_holder] -->        { grund: \"Mangelndes Vertrauen\", value: 31.3 },<!-- [et_pb_line_break_holder] -->        { grund: \"Mehr Diabetes-Besch\u00e4ftigung\", value: 29.2 },<!-- [et_pb_line_break_holder] -->        { grund: \"Zu hoher Aufwand\", value: 23.4 },<!-- [et_pb_line_break_holder] -->        { grund: \"Diabetes-Sichtbarkeit\", value: 21.4 },<!-- [et_pb_line_break_holder] -->        { grund: \"Zu geringer Nutzen\", value: 4.2 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_belastungen = d3.select(\"#barChart_belastungen\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function drawBarChartBelastungen() {<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_belastungen.map(d => d.grund.length));<!-- [et_pb_line_break_holder] -->        const barMargin_belastungen = { top: 40, right: 50, bottom: 60, left: longestLabelLength * 7 }; <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_belastungen = Math.min(1080, window.innerWidth * 0.8) - barMargin_belastungen.left - barMargin_belastungen.right,<!-- [et_pb_line_break_holder] -->            barHeight_belastungen = 500 - barMargin_belastungen.top - barMargin_belastungen.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const maxDataValue = Math.ceil(d3.max(barData_belastungen, d => d.value));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Dynamically set tick interval based on screen width<!-- [et_pb_line_break_holder] -->        const tickInterval = window.innerWidth < 760 ? 20 : 10;        \/\/ Limit ticks to the max data value rounded up to nearest multiple of tickInterval        const maxTickValue = Math.ceil(maxDataValue \/ tickInterval) * tickInterval;        const tickValues = d3.range(0, maxTickValue + tickInterval, tickInterval).filter(tick => tick <= maxDataValue);        \/\/ Scales        const barX_belastungen = d3.scaleLinear()            .domain([0, maxTickValue])            .nice()            .range([0, barContainerWidth_belastungen]);        const barY_belastungen = d3.scaleBand()            .domain(barData_belastungen.map(d => d.grund))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_belastungen])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        barSvg_belastungen<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_belastungen + barMargin_belastungen.left + barMargin_belastungen.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_belastungen + barMargin_belastungen.top + barMargin_belastungen.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        barSvg_belastungen.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barChart_belastungen = barSvg_belastungen<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_belastungen.left},${barMargin_belastungen.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        barChart_belastungen.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_belastungen)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_belastungen(d.grund))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_belastungen.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_belastungen(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Left y-axis (gr\u00fcnde)<!-- [et_pb_line_break_holder] -->        barChart_belastungen.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_belastungen))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Bottom x-axis (percentages) with dynamic ticks<!-- [et_pb_line_break_holder] -->        barChart_belastungen.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_belastungen})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_belastungen)<!-- [et_pb_line_break_holder] -->                .tickValues(tickValues)<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ X-axis label \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_belastungen.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_belastungen)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_belastungen + barMargin_belastungen.bottom - 15)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Y-axis label<!-- [et_pb_line_break_holder] -->        barChart_belastungen.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_belastungen.top \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Gr\u00fcnde\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Bar labels (values next to bars)<!-- [et_pb_line_break_holder] -->        barChart_belastungen.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_belastungen)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_belastungen(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_belastungen(d.grund) + barY_belastungen.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawBarChartBelastungen();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartBelastungen);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;5 Znaczenie AiD&#8221; module_id=&#8221;aidsysteme&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Systemy AID<\/h2><!-- [et_pb_line_break_holder] --><h3 style=\"text-align: left;\">Znaczenie system\u00f3w AID<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_technologySignificance\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the stacked bar chart<!-- [et_pb_line_break_holder] -->    const stackedBarData_technologySignificance = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 92.8, \"Nicht Bedeutsam\": 7.2 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 98.3, \"Nicht Bedeutsam\": 1.7 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the bar chart<!-- [et_pb_line_break_holder] -->    const colors_technologySignificance = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blue for Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange for Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_technologySignificance = d3.select(\"#stackedBarChart_technologySignificance\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the stacked bar chart<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartTechnologySignificance() {<!-- [et_pb_line_break_holder] -->        const barMargin_technologySignificance = {top: 40, right: 50, bottom: 80, left: 200};  \/\/ Increased bottom margin for the legend<!-- [et_pb_line_break_holder] -->        const barContainerWidth_technologySignificance = Math.min(1080, window.innerWidth * 0.8) - barMargin_technologySignificance.left - barMargin_technologySignificance.right,<!-- [et_pb_line_break_holder] -->              barHeight_technologySignificance = 300 - barMargin_technologySignificance.top - barMargin_technologySignificance.bottom;  \/\/ Taller bars<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_technologySignificance = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Total percentage must sum to 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_technologySignificance]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_technologySignificance = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_technologySignificance.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_technologySignificance])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_technologySignificance<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_technologySignificance + barMargin_technologySignificance.left + barMargin_technologySignificance.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_technologySignificance + barMargin_technologySignificance.top + barMargin_technologySignificance.bottom + 50); \/\/ Extra space for legend<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_technologySignificance.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const stackedBarChart = barSvg_technologySignificance<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_technologySignificance.left},${barMargin_technologySignificance.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stack the data<!-- [et_pb_line_break_holder] -->        stackedBarData_technologySignificance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_technologySignificance(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_technologySignificance(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_technologySignificance(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_technologySignificance.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_technologySignificance[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add percentage labels for each part of the bar<!-- [et_pb_line_break_holder] -->        stackedBarData_technologySignificance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_technologySignificance(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_technologySignificance(d.kategorie) + barY_technologySignificance.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the y-axis (left, categories)<!-- [et_pb_line_break_holder] -->        stackedBarChart.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_technologySignificance));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend section, aligned below the bars and starting at the same alignment as the bars<!-- [et_pb_line_break_holder] -->        const legend = barSvg_technologySignificance.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_technologySignificance.left}, ${barHeight_technologySignificance + barMargin_technologySignificance.top + 20})`); \/\/ Positioned below the chart<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData = Object.keys(colors_technologySignificance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems = legend.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`); \/\/ Vertically aligned legend<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Color boxes for legend<!-- [et_pb_line_break_holder] -->        legendItems.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_technologySignificance[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend text labels<!-- [et_pb_line_break_holder] -->        legendItems.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawStackedBarChartTechnologySignificance();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartTechnologySignificance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;5 AiD % za 5 lat&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Nutzung eines AID-Systems in 5 Jahren --><!-- [et_pb_line_break_holder] --><h3>Wykorzystanie systemu AID za 5 lat<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_aidSystem\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the bar chart<!-- [et_pb_line_break_holder] -->    const barData_aidSystem = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-1-Diabetes\", value: 69.64 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-2-Diabetes\", value: 13.49 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the bar chart<!-- [et_pb_line_break_holder] -->    const colors_aidSystem = {<!-- [et_pb_line_break_holder] -->        \"Typ-1-Diabetes\": \"#1482A5\",   \/\/ Blue<!-- [et_pb_line_break_holder] -->        \"Typ-2-Diabetes\": \"#F47A2D\"    \/\/ Orange<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_aidSystem = d3.select(\"#barChart_aidSystem\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the horizontal bar chart<!-- [et_pb_line_break_holder] -->    function drawBarChartAidSystem() {<!-- [et_pb_line_break_holder] -->        const barMargin_aidSystem = {top: 40, right: 50, bottom: 60, left: 200}; <!-- [et_pb_line_break_holder] -->        const barContainerWidth_aidSystem = Math.min(1080, window.innerWidth * 0.8) - barMargin_aidSystem.left - barMargin_aidSystem.right,<!-- [et_pb_line_break_holder] -->              barHeight_aidSystem = 200 - barMargin_aidSystem.top - barMargin_aidSystem.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_aidSystem = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Total percentage must sum to 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_aidSystem]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_aidSystem = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_aidSystem.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_aidSystem])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_aidSystem<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_aidSystem + barMargin_aidSystem.left + barMargin_aidSystem.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_aidSystem + barMargin_aidSystem.top + barMargin_aidSystem.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_aidSystem.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const barChart_aidSystem = barSvg_aidSystem<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_aidSystem.left},${barMargin_aidSystem.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the bars<!-- [et_pb_line_break_holder] -->        barChart_aidSystem.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_aidSystem)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_aidSystem(d.kategorie))<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; barX_aidSystem(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_aidSystem.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_aidSystem[d.kategorie]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add category labels inside the bars (black, above each section)<!-- [et_pb_line_break_holder] -->        barChart_aidSystem.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_aidSystem)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_aidSystem(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_aidSystem(d.kategorie) + barY_aidSystem.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"start\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.value + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the y-axis (left, categories)<!-- [et_pb_line_break_holder] -->        barChart_aidSystem.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_aidSystem));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawBarChartAidSystem();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartAidSystem);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;5 AiD Reakcje pacjent\u00f3w&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Reaktionen der Patienten auf AID-Nutzung --><!-- [et_pb_line_break_holder] --><h3>Reakcje pacjent\u00f3w na korzystanie z AID<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_patientReactions\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the bar chart<!-- [et_pb_line_break_holder] -->    const barData_patientReactions = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Verbessern ihre Therapieergebnisse damit\", value: 81.2 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Lehnen sie trotz Eignung ab\", value: 25.5 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Kommen nicht gut damit zurecht\", value: 21.5 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Brechen die Nutzung ab\", value: 6.3 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the bar chart<!-- [et_pb_line_break_holder] -->    const colors_patientReactions = [<!-- [et_pb_line_break_holder] -->        \"#1482A5\",   \/\/ Blue<!-- [et_pb_line_break_holder] -->        \"#F47A2D\",   \/\/ Orange<!-- [et_pb_line_break_holder] -->        \"#95C623\",   \/\/ Green<!-- [et_pb_line_break_holder] -->        \"#9A6980\"    \/\/ Purple<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_patientReactions = d3.select(\"#barChart_patientReactions\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the horizontal bar chart<!-- [et_pb_line_break_holder] -->    function drawBarChartPatientReactions() {<!-- [et_pb_line_break_holder] -->        const barMargin_patientReactions = {top: 40, right: 50, bottom: 60, left: 250}; <!-- [et_pb_line_break_holder] -->        const barContainerWidth_patientReactions = Math.min(1080, window.innerWidth * 0.8) - barMargin_patientReactions.left - barMargin_patientReactions.right,<!-- [et_pb_line_break_holder] -->              barHeight_patientReactions = 300 - barMargin_patientReactions.top - barMargin_patientReactions.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_patientReactions = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Total percentage must sum to 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_patientReactions]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_patientReactions = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_patientReactions.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_patientReactions])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_patientReactions<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_patientReactions + barMargin_patientReactions.left + barMargin_patientReactions.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_patientReactions + barMargin_patientReactions.top + barMargin_patientReactions.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_patientReactions.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const barChart_patientReactions = barSvg_patientReactions<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_patientReactions.left},${barMargin_patientReactions.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the bars<!-- [et_pb_line_break_holder] -->        barChart_patientReactions.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_patientReactions)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_patientReactions(d.kategorie))<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; barX_patientReactions(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_patientReactions.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; colors_patientReactions[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add category labels inside the bars (black, above each section)<!-- [et_pb_line_break_holder] -->        barChart_patientReactions.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_patientReactions)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_patientReactions(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_patientReactions(d.kategorie) + barY_patientReactions.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"start\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.value + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the y-axis (left, categories)<!-- [et_pb_line_break_holder] -->        barChart_patientReactions.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_patientReactions));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawBarChartPatientReactions();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartPatientReactions);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;6 Znaczenie CGM Oty\u0142o\u015b\u0107&#8221; module_id=&#8221;cgm&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>CGM<\/h2><!-- [et_pb_line_break_holder] --><!-- Bar Chart: Adipositas Pr\u00e4vention --><!-- [et_pb_line_break_holder] --><h3>Znaczenie CGM dla prewencji oty\u0142o\u015bci<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_adipositas\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the stacked bar chart - Adipositas Pr\u00e4vention<!-- [et_pb_line_break_holder] -->    const stackedBarData_adipositas_praevention = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 13.8, \"Nicht Bedeutsam\": 86.3 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 21, \"Nicht Bedeutsam\": 79 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the chart<!-- [et_pb_line_break_holder] -->    const colors_adipositas_praevention = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blue for Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange for Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_adipositas_praevention = d3.select(\"#stackedBarChart_adipositas\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the stacked bar chart for Adipositas Pr\u00e4vention<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartAdipositasPraevention() {<!-- [et_pb_line_break_holder] -->        const barMargin_adipositas = {top: 40, right: 50, bottom: 80, left: 200};<!-- [et_pb_line_break_holder] -->        const barContainerWidth_adipositas = Math.min(1080, window.innerWidth * 0.8) - barMargin_adipositas.left - barMargin_adipositas.right,<!-- [et_pb_line_break_holder] -->              barHeight_adipositas = 100; \/\/ Set barHeight to match the height of the AID-System chart<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_adipositas = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_adipositas]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_adipositas = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_adipositas_praevention.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_adipositas]) \/\/ Adjust the bar height to match AID chart<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_adipositas_praevention<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_adipositas + barMargin_adipositas.left + barMargin_adipositas.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_adipositas + barMargin_adipositas.top + barMargin_adipositas.bottom + 50);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_adipositas_praevention.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const stackedBarChart_adipositas = barSvg_adipositas_praevention<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_adipositas.left},${barMargin_adipositas.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stack the data<!-- [et_pb_line_break_holder] -->        stackedBarData_adipositas_praevention.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart_adipositas.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_adipositas(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_adipositas(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_adipositas(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_adipositas.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_adipositas_praevention[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add percentage labels<!-- [et_pb_line_break_holder] -->        stackedBarData_adipositas_praevention.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart_adipositas.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_adipositas(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_adipositas(d.kategorie) + barY_adipositas.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw y-axis<!-- [et_pb_line_break_holder] -->        stackedBarChart_adipositas.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_adipositas));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend<!-- [et_pb_line_break_holder] -->        const legend_adipositas = barSvg_adipositas_praevention.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_adipositas.left}, ${barHeight_adipositas + barMargin_adipositas.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData_adipositas = Object.keys(colors_adipositas_praevention);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_adipositas = legend_adipositas.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData_adipositas)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Color boxes for legend<!-- [et_pb_line_break_holder] -->        legendItems_adipositas.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_adipositas_praevention[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend text labels<!-- [et_pb_line_break_holder] -->        legendItems_adipositas.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawStackedBarChartAdipositasPraevention();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartAdipositasPraevention);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;6 Znaczenie CGM Typ2&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Typ-2 Pr\u00e4vention --><!-- [et_pb_line_break_holder] --><h3>Znaczenie CGM dla prewencji typu 2<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_typ2\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the stacked bar chart - Typ-2 Pr\u00e4vention<!-- [et_pb_line_break_holder] -->    const stackedBarData_typ2_praevention = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 25, \"Nicht Bedeutsam\": 75 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 36, \"Nicht Bedeutsam\": 64 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the chart<!-- [et_pb_line_break_holder] -->    const colors_typ2_praevention = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blue for Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange for Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_typ2_praevention = d3.select(\"#stackedBarChart_typ2\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the stacked bar chart for Typ-2 Pr\u00e4vention<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartTyp2Praevention() {<!-- [et_pb_line_break_holder] -->        const barMargin_typ2 = {top: 40, right: 50, bottom: 80, left: 200};<!-- [et_pb_line_break_holder] -->        const barContainerWidth_typ2 = Math.min(1080, window.innerWidth * 0.8) - barMargin_typ2.left - barMargin_typ2.right,<!-- [et_pb_line_break_holder] -->              barHeight_typ2 = 100; \/\/ Set barHeight to match the height of the AID-System chart<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_typ2 = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_typ2]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_typ2 = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_typ2_praevention.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_typ2]) \/\/ Adjust the bar height to match AID chart<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_typ2_praevention<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_typ2 + barMargin_typ2.left + barMargin_typ2.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_typ2 + barMargin_typ2.top + barMargin_typ2.bottom + 50);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_typ2_praevention.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const stackedBarChart_typ2 = barSvg_typ2_praevention<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_typ2.left},${barMargin_typ2.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stack the data<!-- [et_pb_line_break_holder] -->        stackedBarData_typ2_praevention.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart_typ2.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_typ2(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_typ2(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_typ2(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_typ2.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_typ2_praevention[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add percentage labels<!-- [et_pb_line_break_holder] -->        stackedBarData_typ2_praevention.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart_typ2.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_typ2(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_typ2(d.kategorie) + barY_typ2.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw y-axis<!-- [et_pb_line_break_holder] -->        stackedBarChart_typ2.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_typ2));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend<!-- [et_pb_line_break_holder] -->        const legend_typ2 = barSvg_typ2_praevention.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_typ2.left}, ${barHeight_typ2 + barMargin_typ2.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData_typ2 = Object.keys(colors_typ2_praevention);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_typ2 = legend_typ2.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData_typ2)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Color boxes for legend<!-- [et_pb_line_break_holder] -->        legendItems_typ2.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_typ2_praevention[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend text labels<!-- [et_pb_line_break_holder] -->        legendItems_typ2.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawStackedBarChartTyp2Praevention();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartTyp2Praevention);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;7 Znaczenie szkole\u0144 wideo online&#8221; module_id=&#8221;onlinevideoschulungen&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2><!-- [et_pb_line_break_holder] --> Szkolenia wideo online<!-- [et_pb_line_break_holder] --><\/h2><!-- [et_pb_line_break_holder] --><!-- Bar Chart: Bedeutsamkeit von Online-Video-Schulungen --><!-- [et_pb_line_break_holder] --><h3>Znaczenie szkole\u0144 wideo online<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_videoTrainings\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the stacked bar chart - Bedeutsamkeit von Online-Video-Schulungen<!-- [et_pb_line_break_holder] -->    const stackedBarData_video_trainings = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 12.5, \"Nicht Bedeutsam\": 87.5 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 48, \"Nicht Bedeutsam\": 52 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the chart<!-- [et_pb_line_break_holder] -->    const colors_video_trainings = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blue for Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange for Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_video_trainings = d3.select(\"#stackedBarChart_videoTrainings\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the stacked bar chart for Bedeutsamkeit von Online-Video-Schulungen<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartVideoTrainings() {<!-- [et_pb_line_break_holder] -->        const barMargin_video_trainings = {top: 40, right: 50, bottom: 80, left: 200};<!-- [et_pb_line_break_holder] -->        const barContainerWidth_video_trainings = Math.min(1080, window.innerWidth * 0.8) - barMargin_video_trainings.left - barMargin_video_trainings.right,<!-- [et_pb_line_break_holder] -->              barHeight_video_trainings = 100; \/\/ Set barHeight to match the height of the AID-System chart<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_video_trainings = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_video_trainings]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_video_trainings = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_video_trainings.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_video_trainings]) \/\/ Adjust the bar height to match AID chart<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_video_trainings<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_video_trainings + barMargin_video_trainings.left + barMargin_video_trainings.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_video_trainings + barMargin_video_trainings.top + barMargin_video_trainings.bottom + 50);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_video_trainings.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const stackedBarChart_video_trainings = barSvg_video_trainings<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_video_trainings.left},${barMargin_video_trainings.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stack the data<!-- [et_pb_line_break_holder] -->        stackedBarData_video_trainings.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart_video_trainings.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_video_trainings(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_video_trainings(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_video_trainings(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_video_trainings.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_video_trainings[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add percentage labels<!-- [et_pb_line_break_holder] -->        stackedBarData_video_trainings.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart_video_trainings.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_video_trainings(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_video_trainings(d.kategorie) + barY_video_trainings.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw y-axis<!-- [et_pb_line_break_holder] -->        stackedBarChart_video_trainings.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_video_trainings));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend<!-- [et_pb_line_break_holder] -->        const legend_video_trainings = barSvg_video_trainings.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_video_trainings.left}, ${barHeight_video_trainings + barMargin_video_trainings.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData_video_trainings = Object.keys(colors_video_trainings);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_video_trainings = legend_video_trainings.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData_video_trainings)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Color boxes for legend<!-- [et_pb_line_break_holder] -->        legendItems_video_trainings.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_video_trainings[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend text labels<!-- [et_pb_line_break_holder] -->        legendItems_video_trainings.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawStackedBarChartVideoTrainings();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartVideoTrainings);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;7 Wykorzystanie szkole\u0144 wideo online&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Nutzung von Online-Video-Schulungen --><!-- [et_pb_line_break_holder] --><h3>Wykorzystanie szkole\u0144 wideo online<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_videoTrainings\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the bar chart<!-- [et_pb_line_break_holder] -->    const barData_videoTrainings = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", value: 8.7 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", value: 25.4 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the bar chart<!-- [et_pb_line_break_holder] -->    const colors_videoTrainings = {<!-- [et_pb_line_break_holder] -->        \"Aktuell\": \"#1482A5\",        \/\/ Blue for Aktuell<!-- [et_pb_line_break_holder] -->        \"In 5 Jahren\": \"#F47A2D\"     \/\/ Orange for In 5 Jahren<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_videoTrainings = d3.select(\"#barChart_videoTrainings\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the horizontal bar chart<!-- [et_pb_line_break_holder] -->    function drawBarChartVideoTrainings() {<!-- [et_pb_line_break_holder] -->        const barMargin_videoTrainings = {top: 40, right: 50, bottom: 60, left: 200}; <!-- [et_pb_line_break_holder] -->        const barContainerWidth_videoTrainings = Math.min(1080, window.innerWidth * 0.8) - barMargin_videoTrainings.left - barMargin_videoTrainings.right,<!-- [et_pb_line_break_holder] -->              barHeight_videoTrainings = 200 - barMargin_videoTrainings.top - barMargin_videoTrainings.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales<!-- [et_pb_line_break_holder] -->        const barX_videoTrainings = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Total percentage must sum to 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_videoTrainings]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_videoTrainings = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_videoTrainings.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_videoTrainings])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_videoTrainings<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_videoTrainings + barMargin_videoTrainings.left + barMargin_videoTrainings.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_videoTrainings + barMargin_videoTrainings.top + barMargin_videoTrainings.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_videoTrainings.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const barChart_videoTrainings = barSvg_videoTrainings<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_videoTrainings.left},${barMargin_videoTrainings.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the bars<!-- [et_pb_line_break_holder] -->        barChart_videoTrainings.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_videoTrainings)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_videoTrainings(d.kategorie))<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; barX_videoTrainings(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_videoTrainings.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_videoTrainings[d.kategorie]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add category labels inside the bars (black, above each section)<!-- [et_pb_line_break_holder] -->        barChart_videoTrainings.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_videoTrainings)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_videoTrainings(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_videoTrainings(d.kategorie) + barY_videoTrainings.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"start\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.value + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the y-axis (left, categories)<!-- [et_pb_line_break_holder] -->        barChart_videoTrainings.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_videoTrainings));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawBarChartVideoTrainings();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartVideoTrainings);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;8 SI&#8221; module_id=&#8221;ki&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Titel --><!-- [et_pb_line_break_holder] --><h2>Sztuczna inteligencja<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Przysz\u0142e obszary zastosowa\u0144 SI<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_ki\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Zuk\u00fcnftige Einsatzfelder von KI), alle 7 Zeilen<!-- [et_pb_line_break_holder] -->    const barData_ki = [<!-- [et_pb_line_break_holder] -->        { region: \"Algorithmen f\u00fcr AID-Systeme\", value: 90.5 },<!-- [et_pb_line_break_holder] -->        { region: \"Inhalte von Nahrungsmitteln erkennen\", value: 80.4 },<!-- [et_pb_line_break_holder] -->        { region: \"Personalisierte Therapieempfehlungen\", value: 67.5 },<!-- [et_pb_line_break_holder] -->        { region: \"Risikobestimmung f\u00fcr Folgeerkrankungen\", value: 65.0 },<!-- [et_pb_line_break_holder] -->        { region: \"Screening f\u00fcr Folgeerkrankungen\", value: 61.3 },<!-- [et_pb_line_break_holder] -->        { region: \"Typ-2-Risikobestimmung\", value: 57.0 },<!-- [et_pb_line_break_holder] -->        { region: \"Diagnostik von Folgeerkrankungen\", value: 53.8 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_ki = d3.select(\"#barChart_ki\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartKI() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Region<!-- [et_pb_line_break_holder] -->        const longestLabelLengthKI = Math.max(...barData_ki.map(d => d.region.length));<!-- [et_pb_line_break_holder] -->        const barMargin_ki = {top: 40, right: 50, bottom: 60, left: longestLabelLengthKI * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_ki = Math.min(1080, window.innerWidth * 0.8) - barMargin_ki.left - barMargin_ki.right,<!-- [et_pb_line_break_holder] -->            barHeight_ki = 500 - barMargin_ki.top - barMargin_ki.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_ki = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_ki, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_ki]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_ki = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_ki.map(d => d.region))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_ki])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_ki<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_ki + barMargin_ki.left + barMargin_ki.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_ki + barMargin_ki.top + barMargin_ki.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_ki.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_ki = barSvg_ki<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_ki.left},${barMargin_ki.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_ki = barChart_ki.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_ki)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_ki(d.region))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_ki.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_ki(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_ki.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_ki))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksKI() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_ki.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_ki.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_ki})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_ki)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksKI()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und mit weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_ki.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_ki) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_ki + barMargin_ki.bottom - 15) \/\/ Weniger Abstand (-15) zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung rechtsb\u00fcndig mit den y-Achsenlabels<!-- [et_pb_line_break_holder] -->        barChart_ki.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_ki.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Einsatzfelder von KI\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_ki = barChart_ki.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_ki)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_ki(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_ki(d.region) + barY_ki.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartKI();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartKI);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;9 CGM &#8221; module_id=&#8221;indikationenvoncgm&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Wskazania do CGM<\/h2><!-- [et_pb_line_break_holder] --><h3>Jaki procent os\u00f3b z cukrzyc\u0105 kwalifikuje si\u0119 do systemu CGM?<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"groupedBarChart_cgmSystem\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the grouped bar chart - including all 6 patient groups with 3 countries<!-- [et_pb_line_break_holder] -->    const groupedBarData_cgmSystem = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-1 (Erwachsene)\", Deutschland: 96.1, \u00d6sterreich: 93.2, Schweiz: 98.9 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-1 (Kinder\/Jugendliche)\", Deutschland: 95.4, \u00d6sterreich: 92.8, Schweiz: 98.9 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-1 (Schwangere)\", Deutschland: 95.0, \u00d6sterreich: 94.5, Schweiz: 96.7 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-2 (intensivierte Therapie)\", Deutschland: 81.0, \u00d6sterreich: 87.2, Schweiz: 91.7 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-2 (nicht-intensivierte Therapie)\", Deutschland: 50.9, \u00d6sterreich: 63.7, Schweiz: 65.6 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"Typ-2 (ohne Insulin)\", Deutschland: 39.7, \u00d6sterreich: 52.0, Schweiz: 44.4 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for the bar chart<!-- [et_pb_line_break_holder] -->    const colors_cgmSystem = {<!-- [et_pb_line_break_holder] -->        \"Deutschland\": \"#F47A2D\",    \/\/ Orange for Deutschland<!-- [et_pb_line_break_holder] -->        \"\u00d6sterreich\": \"#1482A5\",     \/\/ Blue for \u00d6sterreich<!-- [et_pb_line_break_holder] -->        \"Schweiz\": \"#95C623\"         \/\/ Green for Schweiz<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_cgmSystem = d3.select(\"#groupedBarChart_cgmSystem\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the horizontal grouped bar chart<!-- [et_pb_line_break_holder] -->    function drawGroupedBarChartCgmSystem() {<!-- [et_pb_line_break_holder] -->        const barMargin_cgmSystem = {top: 40, right: 50, bottom: 100, left: 200};  \/\/ Increase bottom margin for legend space<!-- [et_pb_line_break_holder] -->        const containerWidth = Math.min(1080, window.innerWidth * 0.8);  \/\/ Same responsive width as other charts<!-- [et_pb_line_break_holder] -->        const barContainerWidth_cgmSystem = containerWidth - barMargin_cgmSystem.left - barMargin_cgmSystem.right,<!-- [et_pb_line_break_holder] -->              barHeight_cgmSystem = Math.max(400, window.innerHeight * 0.5);  \/\/ Responsive height for desktop and mobile<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales for the bar chart<!-- [et_pb_line_break_holder] -->        const barY0_cgmSystem = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(groupedBarData_cgmSystem.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_cgmSystem])<!-- [et_pb_line_break_holder] -->            .padding(0.2);  \/\/ Padding between groups of bars<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY1_cgmSystem = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain([\"Deutschland\", \"\u00d6sterreich\", \"Schweiz\"])  \/\/ Inner scale for countries within each group<!-- [et_pb_line_break_holder] -->            .range([0, barY0_cgmSystem.bandwidth()])<!-- [et_pb_line_break_holder] -->            .padding(0.1);  \/\/ Padding between bars within each group<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barX_cgmSystem = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ All percentages are out of 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_cgmSystem]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG container size<!-- [et_pb_line_break_holder] -->        barSvg_cgmSystem<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_cgmSystem + barMargin_cgmSystem.top + barMargin_cgmSystem.bottom + 50);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_cgmSystem.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const groupedBarChart_cgmSystem = barSvg_cgmSystem<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_cgmSystem.left},${barMargin_cgmSystem.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the groups of bars<!-- [et_pb_line_break_holder] -->        const groups = groupedBarChart_cgmSystem.selectAll(\".group\")<!-- [et_pb_line_break_holder] -->            .data(groupedBarData_cgmSystem)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"group\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", d =&gt; `translate(0, ${barY0_cgmSystem(d.kategorie)})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the individual bars within each group<!-- [et_pb_line_break_holder] -->        groups.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(d =&gt; [\"Deutschland\", \"\u00d6sterreich\", \"Schweiz\"].map(key =&gt; ({key: key, value: d[key]})))<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY1_cgmSystem(d.key))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; barX_cgmSystem(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY1_cgmSystem.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_cgmSystem[d.key]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add percentage labels inside the bars<!-- [et_pb_line_break_holder] -->        groups.selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .data(d =&gt; [\"Deutschland\", \"\u00d6sterreich\", \"Schweiz\"].map(key =&gt; ({key: key, value: d[key]})))<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_cgmSystem(d.value) + 5)  \/\/ Position slightly after the bar<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY1_cgmSystem(d.key) + barY1_cgmSystem.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"start\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.value + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw y-axis (categories)<!-- [et_pb_line_break_holder] -->        groupedBarChart_cgmSystem.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY0_cgmSystem).tickSize(0))  \/\/ No tick lines<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ No X-axis (frequency)<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend section - adjusted to ensure space for 3 items<!-- [et_pb_line_break_holder] -->        const legendHeight = 90;  \/\/ Space for 3 legend items<!-- [et_pb_line_break_holder] -->        const legend_cgmSystem = barSvg_cgmSystem.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_cgmSystem.left}, ${barHeight_cgmSystem + barMargin_cgmSystem.top + 20})`);  \/\/ Adjusted position<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData_cgmSystem = Object.keys(colors_cgmSystem);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_cgmSystem = legend_cgmSystem.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData_cgmSystem)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Color boxes for legend<!-- [et_pb_line_break_holder] -->        legendItems_cgmSystem.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_cgmSystem[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend text labels<!-- [et_pb_line_break_holder] -->        legendItems_cgmSystem.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawGroupedBarChartCgmSystem();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawGroupedBarChartCgmSystem);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; disabled_on=&#8221;on|on|on&#8221; module_id=&#8221;pacjenci1&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; disabled=&#8221;on&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;H1&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#f2f0eb&#8221; border_radii=&#8221;on|6px|6px|6px|6px&#8221; border_color_all=&#8221;RGBA(255,255,255,0)&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;abb74a70-48f3-4be5-8e28-aff93dd6f04b&#8221; custom_margin=&#8221;||10px||false|false&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Panel pacjenta<\/h2>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Pr\u00f3ba&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;Wiek&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Pr\u00f3ba<\/h2><!-- [et_pb_line_break_holder] --><h4>57 lat (mediana)<\/h4><!-- [et_pb_line_break_holder] --><svg id=\"barChart_ageFrequency\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Alter und H\u00e4ufigkeit)<!-- [et_pb_line_break_holder] -->    const barData_ageFrequency = [<!-- [et_pb_line_break_holder] -->        { age: 2, value: 0.07 },<!-- [et_pb_line_break_holder] -->        { age: 3, value: 0.20 },<!-- [et_pb_line_break_holder] -->        { age: 4, value: 0.34 },<!-- [et_pb_line_break_holder] -->        { age: 5, value: 0.44 },<!-- [et_pb_line_break_holder] -->        { age: 6, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { age: 7, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { age: 8, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { age: 9, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { age: 10, value: 0.51 },<!-- [et_pb_line_break_holder] -->        { age: 11, value: 0.37 },<!-- [et_pb_line_break_holder] -->        { age: 12, value: 0.54 },<!-- [et_pb_line_break_holder] -->        { age: 13, value: 0.44 },<!-- [et_pb_line_break_holder] -->        { age: 14, value: 0.22 },<!-- [et_pb_line_break_holder] -->        { age: 15, value: 0.27 },<!-- [et_pb_line_break_holder] -->        { age: 16, value: 0.27 },<!-- [et_pb_line_break_holder] -->        { age: 17, value: 0.17 },<!-- [et_pb_line_break_holder] -->        { age: 18, value: 0.22 },<!-- [et_pb_line_break_holder] -->        { age: 19, value: 0.24 },<!-- [et_pb_line_break_holder] -->        { age: 20, value: 0.32 },<!-- [et_pb_line_break_holder] -->        { age: 21, value: 0.37 },<!-- [et_pb_line_break_holder] -->        { age: 22, value: 0.20 },<!-- [et_pb_line_break_holder] -->        { age: 23, value: 0.27 },<!-- [et_pb_line_break_holder] -->        { age: 24, value: 0.47 },<!-- [et_pb_line_break_holder] -->        { age: 25, value: 0.44 },<!-- [et_pb_line_break_holder] -->        { age: 26, value: 0.54 },<!-- [et_pb_line_break_holder] -->        { age: 27, value: 0.54 },<!-- [et_pb_line_break_holder] -->        { age: 28, value: 0.47 },<!-- [et_pb_line_break_holder] -->        { age: 29, value: 0.59 },<!-- [et_pb_line_break_holder] -->        { age: 30, value: 0.42 },<!-- [et_pb_line_break_holder] -->        { age: 31, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { age: 32, value: 0.64 },<!-- [et_pb_line_break_holder] -->        { age: 33, value: 0.71 },<!-- [et_pb_line_break_holder] -->        { age: 34, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { age: 35, value: 0.54 },<!-- [et_pb_line_break_holder] -->        { age: 36, value: 0.78 },<!-- [et_pb_line_break_holder] -->        { age: 37, value: 0.44 },<!-- [et_pb_line_break_holder] -->        { age: 38, value: 0.47 },<!-- [et_pb_line_break_holder] -->        { age: 39, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { age: 40, value: 0.66 },<!-- [et_pb_line_break_holder] -->        { age: 41, value: 0.49 },<!-- [et_pb_line_break_holder] -->        { age: 42, value: 0.76 },<!-- [et_pb_line_break_holder] -->        { age: 43, value: 0.86 },<!-- [et_pb_line_break_holder] -->        { age: 44, value: 1.13 },<!-- [et_pb_line_break_holder] -->        { age: 45, value: 0.78 },<!-- [et_pb_line_break_holder] -->        { age: 46, value: 0.88 },<!-- [et_pb_line_break_holder] -->        { age: 47, value: 1.03 },<!-- [et_pb_line_break_holder] -->        { age: 48, value: 1.05 },<!-- [et_pb_line_break_holder] -->        { age: 49, value: 0.98 },<!-- [et_pb_line_break_holder] -->        { age: 50, value: 0.93 },<!-- [et_pb_line_break_holder] -->        { age: 51, value: 1.32 },<!-- [et_pb_line_break_holder] -->        { age: 52, value: 1.67 },<!-- [et_pb_line_break_holder] -->        { age: 53, value: 1.57 },<!-- [et_pb_line_break_holder] -->        { age: 54, value: 1.62 },<!-- [et_pb_line_break_holder] -->        { age: 55, value: 1.86 },<!-- [et_pb_line_break_holder] -->        { age: 56, value: 1.67 },<!-- [et_pb_line_break_holder] -->        { age: 57, value: 1.98 },<!-- [et_pb_line_break_holder] -->        { age: 58, value: 2.50 },<!-- [et_pb_line_break_holder] -->        { age: 59, value: 1.57 },<!-- [et_pb_line_break_holder] -->        { age: 60, value: 1.86 },<!-- [et_pb_line_break_holder] -->        { age: 61, value: 1.93 },<!-- [et_pb_line_break_holder] -->        { age: 62, value: 2.08 },<!-- [et_pb_line_break_holder] -->        { age: 63, value: 1.69 },<!-- [et_pb_line_break_holder] -->        { age: 64, value: 1.71 },<!-- [et_pb_line_break_holder] -->        { age: 65, value: 2.28 },<!-- [et_pb_line_break_holder] -->        { age: 66, value: 1.86 },<!-- [et_pb_line_break_holder] -->        { age: 67, value: 1.96 },<!-- [et_pb_line_break_holder] -->        { age: 68, value: 1.71 },<!-- [et_pb_line_break_holder] -->        { age: 69, value: 1.91 },<!-- [et_pb_line_break_holder] -->        { age: 70, value: 1.67 },<!-- [et_pb_line_break_holder] -->        { age: 71, value: 1.67 },<!-- [et_pb_line_break_holder] -->        { age: 72, value: 1.37 },<!-- [et_pb_line_break_holder] -->        { age: 73, value: 1.18 },<!-- [et_pb_line_break_holder] -->        { age: 74, value: 1.22 },<!-- [et_pb_line_break_holder] -->        { age: 75, value: 1.00 },<!-- [et_pb_line_break_holder] -->        { age: 76, value: 0.76 },<!-- [et_pb_line_break_holder] -->        { age: 77, value: 0.61 },<!-- [et_pb_line_break_holder] -->        { age: 78, value: 0.64 },<!-- [et_pb_line_break_holder] -->        { age: 79, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { age: 80, value: 0.42 },<!-- [et_pb_line_break_holder] -->        { age: 81, value: 0.24 },<!-- [et_pb_line_break_holder] -->        { age: 82, value: 0.32 },<!-- [et_pb_line_break_holder] -->        { age: 83, value: 0.37 },<!-- [et_pb_line_break_holder] -->        { age: 84, value: 0.10 },<!-- [et_pb_line_break_holder] -->        { age: 85, value: 0.17 },<!-- [et_pb_line_break_holder] -->        { age: 86, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { age: 87, value: 0.12 },<!-- [et_pb_line_break_holder] -->        { age: 88, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { age: 89, value: 0.02 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_ageFrequency = d3.select(\"#barChart_ageFrequency\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Bar Charts<!-- [et_pb_line_break_holder] -->    function drawBarChartAgeFrequency() {<!-- [et_pb_line_break_holder] -->        const barMargin_ageFrequency = { top: 40, right: 50, bottom: 60, left: 70 };<!-- [et_pb_line_break_holder] -->        const barContainerWidth_ageFrequency = Math.min(1080, window.innerWidth * 0.8) - barMargin_ageFrequency.left - barMargin_ageFrequency.right,<!-- [et_pb_line_break_holder] -->              barHeight_ageFrequency = 500 - barMargin_ageFrequency.top - barMargin_ageFrequency.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_ageFrequency = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_ageFrequency, d =&gt; d.age)])<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_ageFrequency]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_ageFrequency = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_ageFrequency, d =&gt; d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([barHeight_ageFrequency, 0]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_ageFrequency<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_ageFrequency + barMargin_ageFrequency.left + barMargin_ageFrequency.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_ageFrequency + barMargin_ageFrequency.top + barMargin_ageFrequency.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_ageFrequency.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_ageFrequency = barSvg_ageFrequency<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_ageFrequency.left},${barMargin_ageFrequency.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        barChart_ageFrequency.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_ageFrequency)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_ageFrequency(d.age))<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_ageFrequency(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barX_ageFrequency(1) - barX_ageFrequency(0) - 2)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", d =&gt; barHeight_ageFrequency - barY_ageFrequency(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Y-Achse (H\u00e4ufigkeit)<!-- [et_pb_line_break_holder] -->        barChart_ageFrequency.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_ageFrequency));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ X-Achse (Alter) mit benutzerdefinierten Ticks bei 0, 20, 40, 60, 80<!-- [et_pb_line_break_holder] -->        barChart_ageFrequency.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_ageFrequency})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_ageFrequency)<!-- [et_pb_line_break_holder] -->                .tickValues([0, 20, 40, 60, 80])<!-- [et_pb_line_break_holder] -->                .tickFormat(d =&gt; d + \" Jahre\"));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ X-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_ageFrequency.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_ageFrequency \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_ageFrequency + barMargin_ageFrequency.bottom - 10)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Alter (Jahre)\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_ageFrequency.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", -barHeight_ageFrequency \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_ageFrequency.left + 20)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", \"rotate(-90)\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit (%)\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartAgeFrequency();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartAgeFrequency);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;1. Pochodzenie uczestnik\u00f3w (wykres ko\u0142owy)&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Pochodzenie uczestnik\u00f3w<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChartHerkunft\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Herkunft der Teilnehmer)<!-- [et_pb_line_break_holder] -->    const dataHerkunft = [<!-- [et_pb_line_break_holder] -->        { label: 'Deutschland', spending: 74.14 },<!-- [et_pb_line_break_holder] -->        { label: '\u00d6sterreich', spending: 18.90 },<!-- [et_pb_line_break_holder] -->        { label: 'Schweiz', spending: 6.95 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colorsHerkunft = ['#1482A5', '#F47A2D', '#95C623'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function calculateHeightHerkunft() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = dataHerkunft.length * 40;         return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChartHerkunft() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeightHerkunft();        const svg = d3.select('#pieChartHerkunft')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();  \/\/ Clear previous content        const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(dataHerkunft))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colorsHerkunft[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (dataHerkunft.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(dataHerkunft)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colorsHerkunft[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', -10)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .style('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .style('font-family', 'Arial')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${d.spending}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChartHerkunft();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChartHerkunft);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;1. P\u0142e\u0107 uczestnik\u00f3w (wykres ko\u0142owy)&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>P\u0142e\u0107 uczestnik\u00f3w<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChartGeschlecht\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Geschlecht der Teilnehmer)<!-- [et_pb_line_break_holder] -->    const dataGeschlecht = [<!-- [et_pb_line_break_holder] -->        { label: 'M\u00e4nnlich', spending: 54.95 },<!-- [et_pb_line_break_holder] -->        { label: 'Weiblich', spending: 44.92 },<!-- [et_pb_line_break_holder] -->        { label: 'Divers', spending: 0.14 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colorsGeschlecht = ['#1482A5', '#F47A2D', '#95C623'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function calculateHeightGeschlecht() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = dataGeschlecht.length * 40;         return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChartGeschlecht() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeightGeschlecht();        const svg = d3.select('#pieChartGeschlecht')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();  \/\/ Clear previous content        const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(dataGeschlecht))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colorsGeschlecht[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (dataGeschlecht.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(dataGeschlecht)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colorsGeschlecht[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', -10)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .style('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .style('font-family', 'Arial')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${d.spending}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChartGeschlecht();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChartGeschlecht);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Pr\u00f3ba cukrzycy&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;typ cukrzycy&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Rozk\u0142ad typ\u00f3w cukrzycy<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"pieChartDiabetesTyp\" style=\"display: block; margin: auto;\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Pie-Chart (Diabetes-Typ Verteilung)<!-- [et_pb_line_break_holder] -->    const dataDiabetesTyp = [<!-- [et_pb_line_break_holder] -->        { label: 'Typ-1', spending: 70.00 },<!-- [et_pb_line_break_holder] -->        { label: 'Typ-2', spending: 21.11 },<!-- [et_pb_line_break_holder] -->        { label: 'Eltern (Kind mit Diabetes)', spending: 8.88 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const colorsDiabetesTyp = ['#1482A5', '#F47A2D', '#95C623'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function calculateHeightDiabetesTyp() {<!-- [et_pb_line_break_holder] -->        const isMobile = window.innerWidth < 760;        const legendHeight = dataDiabetesTyp.length * 40;         return isMobile ? 250 + legendHeight + 50 : 250 + 100;    }    function drawPieChartDiabetesTyp() {        const containerWidth = Math.min(1080, window.innerWidth * 0.8);        const chartWidth = containerWidth \/ 2;        const chartHeight = 250;        const radius = Math.min(chartWidth, chartHeight) \/ 2;        const svgHeight = calculateHeightDiabetesTyp();        const svg = d3.select('#pieChartDiabetesTyp')            .attr('width', containerWidth)            .attr('height', svgHeight)            .style('padding', '0');        svg.selectAll(\"*\").remove();  \/\/ Clear previous content        const centerY = window.innerWidth < 760 ? radius + 20 : (svgHeight - chartHeight) \/ 2 + radius;        const arc = d3.arc().outerRadius(radius).innerRadius(0);        const pie = d3.pie().value(d => d.spending).sort(null);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const chartGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('transform', `translate(${radius + 20}, ${centerY})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pieGroup = chartGroup.selectAll('.arc')<!-- [et_pb_line_break_holder] -->            .data(pie(dataDiabetesTyp))<!-- [et_pb_line_break_holder] -->            .enter().append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'arc');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('path')<!-- [et_pb_line_break_holder] -->            .attr('d', arc)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colorsDiabetesTyp[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        pieGroup.append('text')<!-- [et_pb_line_break_holder] -->            .attr('transform', d => `translate(${arc.centroid(d)})`)<!-- [et_pb_line_break_holder] -->            .attr('dy', '0.35em')<!-- [et_pb_line_break_holder] -->            .attr('text-anchor', 'middle')<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .attr('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendGroup = svg.append('g')<!-- [et_pb_line_break_holder] -->            .attr('class', 'legend-group')<!-- [et_pb_line_break_holder] -->            .attr('transform', window.innerWidth < 760                 ? `translate(20, ${radius * 2 + 50})`                 : `translate(${radius * 2 + 50}, ${centerY - (dataDiabetesTyp.length * 40) \/ 2})`);        const legendItems = legendGroup.selectAll('g')            .data(dataDiabetesTyp)            .enter().append('g')            .attr('transform', (d, i) => `translate(0, ${i * 40})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('rect')<!-- [et_pb_line_break_holder] -->            .attr('width', 15)<!-- [et_pb_line_break_holder] -->            .attr('height', 15)<!-- [et_pb_line_break_holder] -->            .attr('fill', (d, i) => colorsDiabetesTyp[i]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', -10)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .text((d, i) => i + 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        legendItems.append('text')<!-- [et_pb_line_break_holder] -->            .attr('x', 25)<!-- [et_pb_line_break_holder] -->            .attr('y', 12)<!-- [et_pb_line_break_holder] -->            .attr('fill', 'black')<!-- [et_pb_line_break_holder] -->            .style('font-size', '12px')<!-- [et_pb_line_break_holder] -->            .style('font-family', 'Arial')<!-- [et_pb_line_break_holder] -->            .text(d => `${d.label} - ${d.spending}%`);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial draw<!-- [et_pb_line_break_holder] -->    drawPieChartDiabetesTyp();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener('resize', drawPieChartDiabetesTyp);<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>HbA1c<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"lineChart_respondentID\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Line Chart (Respondent ID und H\u00e4ufigkeit)<!-- [et_pb_line_break_holder] -->    const lineData_respondentID = [<!-- [et_pb_line_break_holder] -->        { respondentID: 4.0, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 4.3, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 4.5, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 4.9, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.0, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.1, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.2, value: 0.27 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.3, value: 0.51 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.4, value: 0.47 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.5, value: 0.54 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.6, value: 0.86 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.7, value: 1.25 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.8, value: 1.69 },<!-- [et_pb_line_break_holder] -->        { respondentID: 5.9, value: 2.03 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.0, value: 1.84 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.1, value: 2.40 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.2, value: 3.57 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.3, value: 4.14 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.4, value: 3.50 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.5, value: 4.73 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.6, value: 2.79 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.7, value: 4.46 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.8, value: 5.00 },<!-- [et_pb_line_break_holder] -->        { respondentID: 6.9, value: 4.38 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.0, value: 3.35 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.1, value: 3.23 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.2, value: 3.75 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.3, value: 2.86 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.4, value: 2.08 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.5, value: 1.64 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.6, value: 1.64 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.7, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.8, value: 1.59 },<!-- [et_pb_line_break_holder] -->        { respondentID: 7.9, value: 1.08 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.0, value: 0.81 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.1, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.2, value: 0.76 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.3, value: 0.61 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.4, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.5, value: 0.37 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.6, value: 0.24 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.7, value: 0.22 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.8, value: 0.10 },<!-- [et_pb_line_break_holder] -->        { respondentID: 8.9, value: 0.22 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.0, value: 0.17 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.1, value: 0.10 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.2, value: 0.07 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.3, value: 0.07 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.5, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.6, value: 0.07 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.8, value: 0.15 },<!-- [et_pb_line_break_holder] -->        { respondentID: 9.9, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.0, value: 0.17 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.1, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.1, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.2, value: 0.02 },     <!-- [et_pb_line_break_holder] -->        { respondentID: 10.3, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.4, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.5, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.6, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.7, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 10.8, value: 0.02 }, <!-- [et_pb_line_break_holder] -->        { respondentID: 11.0, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { respondentID: 11.2, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 11.3, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { respondentID: 12.4, value: 0.05 },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const lineSvg_respondentID = d3.select(\"#lineChart_respondentID\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Liniendiagramms<!-- [et_pb_line_break_holder] -->    function drawLineChartRespondentID() {<!-- [et_pb_line_break_holder] -->        const margin = { top: 40, right: 50, bottom: 60, left: 70 };<!-- [et_pb_line_break_holder] -->        const containerWidth = Math.min(1080, window.innerWidth * 0.8) - margin.left - margin.right,<!-- [et_pb_line_break_holder] -->              height = 500 - margin.top - margin.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const xScale = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([4, 12])  \/\/ Angegebene X-Werte<!-- [et_pb_line_break_holder] -->            .range([0, containerWidth]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const yScale = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(lineData_respondentID, d =&gt; d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([height, 0]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        lineSvg_respondentID<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth + margin.left + margin.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", height + margin.top + margin.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        lineSvg_respondentID.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const chartGroup = lineSvg_respondentID<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${margin.left},${margin.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linie<!-- [et_pb_line_break_holder] -->        const line = d3.line()<!-- [et_pb_line_break_holder] -->            .x(d =&gt; xScale(d.respondentID))<!-- [et_pb_line_break_holder] -->            .y(d =&gt; yScale(d.value))<!-- [et_pb_line_break_holder] -->            .curve(d3.curveMonotoneX);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        chartGroup.append(\"path\")<!-- [et_pb_line_break_holder] -->            .datum(lineData_respondentID)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"none\")<!-- [et_pb_line_break_holder] -->            .attr(\"stroke\", \"#477bb8\")<!-- [et_pb_line_break_holder] -->            .attr(\"stroke-width\", 2)<!-- [et_pb_line_break_holder] -->            .attr(\"d\", line);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ X-Achse<!-- [et_pb_line_break_holder] -->        chartGroup.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${height})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(xScale).tickValues([0, 4, 6, 8, 10, 12]).tickFormat(d =&gt; d));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Y-Achse<!-- [et_pb_line_break_holder] -->        chartGroup.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(yScale).tickFormat(d =&gt; d + \"%\"));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Beschriftungen<!-- [et_pb_line_break_holder] -->        chartGroup.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", containerWidth \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", height + margin.bottom - 10)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        chartGroup.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", -height \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -margin.left + 20)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", \"rotate(-90)\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit (%)\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawLineChartRespondentID();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawLineChartRespondentID);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;zaanga\u017cowanie&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Engagement --><!-- [et_pb_line_break_holder] --><h2>Zaanga\u017cowanie uczestnik\u00f3w<\/h2><!-- [et_pb_line_break_holder] --><h3>Typy zaanga\u017cowania<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_engagement\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Engagement-Typen)<!-- [et_pb_line_break_holder] -->    const barData_engagement = [<!-- [et_pb_line_break_holder] -->        { type: \"Mitglied Patientenorganisation\", value: 31.4 },<!-- [et_pb_line_break_holder] -->        { type: \"Aktiv in Online-Community\", value: 15.7 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_engagement = d3.select(\"#barChart_engagement\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartEngagement() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Typenbeschreibung<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_engagement.map(d => d.type.length));<!-- [et_pb_line_break_holder] -->        const barMargin_engagement = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_engagement = Math.min(1080, window.innerWidth * 0.8) - barMargin_engagement.left - barMargin_engagement.right,<!-- [et_pb_line_break_holder] -->            barHeight_engagement = 500 - barMargin_engagement.top - barMargin_engagement.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_engagement = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_engagement, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_engagement]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_engagement = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_engagement.map(d => d.type))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_engagement])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_engagement<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_engagement + barMargin_engagement.left + barMargin_engagement.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_engagement + barMargin_engagement.top + barMargin_engagement.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_engagement.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_engagement = barSvg_engagement<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_engagement.left},${barMargin_engagement.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_engagement = barChart_engagement.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_engagement)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_engagement(d.type))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_engagement.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_engagement(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_engagement.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_engagement))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksEngagement() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_engagement.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_engagement.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_engagement})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_engagement)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksEngagement()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_engagement.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_engagement) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_engagement + barMargin_engagement.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_engagement.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_engagement.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Engagement-Typ\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_engagement = barChart_engagement.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_engagement)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_engagement(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_engagement(d.type) + barY_engagement.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartEngagement();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartEngagement);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;Czas trwania&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Czas trwania cukrzycy i cz\u0119stotliwo\u015b\u0107<\/h2><!-- [et_pb_line_break_holder] --><svg id=\"barChart_diabetesDuration\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Diabetesdauer und H\u00e4ufigkeit)<!-- [et_pb_line_break_holder] -->    const barData_diabetesDuration = [<!-- [et_pb_line_break_holder] -->        { year: 0, value: 0.29 },<!-- [et_pb_line_break_holder] -->        { year: 1, value: 2.91 },<!-- [et_pb_line_break_holder] -->        { year: 2, value: 2.01 },<!-- [et_pb_line_break_holder] -->        { year: 3, value: 1.44 },<!-- [et_pb_line_break_holder] -->        { year: 4, value: 1.54 },<!-- [et_pb_line_break_holder] -->        { year: 5, value: 2.03 },<!-- [et_pb_line_break_holder] -->        { year: 6, value: 1.22 },<!-- [et_pb_line_break_holder] -->        { year: 7, value: 1.37 },<!-- [et_pb_line_break_holder] -->        { year: 8, value: 1.37 },<!-- [et_pb_line_break_holder] -->        { year: 9, value: 1.30 },<!-- [et_pb_line_break_holder] -->        { year: 10, value: 2.15 },<!-- [et_pb_line_break_holder] -->        { year: 11, value: 1.05 },<!-- [et_pb_line_break_holder] -->        { year: 12, value: 2.20 },<!-- [et_pb_line_break_holder] -->        { year: 13, value: 1.35 },<!-- [et_pb_line_break_holder] -->        { year: 14, value: 1.27 },<!-- [et_pb_line_break_holder] -->        { year: 15, value: 2.35 },<!-- [et_pb_line_break_holder] -->        { year: 16, value: 1.32 },<!-- [et_pb_line_break_holder] -->        { year: 17, value: 1.27 },<!-- [et_pb_line_break_holder] -->        { year: 18, value: 1.32 },<!-- [et_pb_line_break_holder] -->        { year: 19, value: 1.05 },<!-- [et_pb_line_break_holder] -->        { year: 20, value: 2.50 },<!-- [et_pb_line_break_holder] -->        { year: 21, value: 0.86 },<!-- [et_pb_line_break_holder] -->        { year: 22, value: 1.35 },<!-- [et_pb_line_break_holder] -->        { year: 23, value: 1.91 },<!-- [et_pb_line_break_holder] -->        { year: 24, value: 1.54 },<!-- [et_pb_line_break_holder] -->        { year: 25, value: 2.35 },<!-- [et_pb_line_break_holder] -->        { year: 26, value: 0.95 },<!-- [et_pb_line_break_holder] -->        { year: 27, value: 1.20 },<!-- [et_pb_line_break_holder] -->        { year: 28, value: 0.91 },<!-- [et_pb_line_break_holder] -->        { year: 29, value: 1.40 },<!-- [et_pb_line_break_holder] -->        { year: 30, value: 2.38 },<!-- [et_pb_line_break_holder] -->        { year: 31, value: 0.91 },<!-- [et_pb_line_break_holder] -->        { year: 32, value: 1.25 },<!-- [et_pb_line_break_holder] -->        { year: 33, value: 1.35 },<!-- [et_pb_line_break_holder] -->        { year: 34, value: 1.25 },<!-- [et_pb_line_break_holder] -->        { year: 35, value: 1.42 },<!-- [et_pb_line_break_holder] -->        { year: 36, value: 0.71 },<!-- [et_pb_line_break_holder] -->        { year: 37, value: 0.88 },<!-- [et_pb_line_break_holder] -->        { year: 38, value: 1.03 },<!-- [et_pb_line_break_holder] -->        { year: 39, value: 0.95 },<!-- [et_pb_line_break_holder] -->        { year: 40, value: 1.57 },<!-- [et_pb_line_break_holder] -->        { year: 41, value: 0.78 },<!-- [et_pb_line_break_holder] -->        { year: 42, value: 1.15 },<!-- [et_pb_line_break_holder] -->        { year: 43, value: 1.03 },<!-- [et_pb_line_break_holder] -->        { year: 44, value: 0.76 },<!-- [et_pb_line_break_holder] -->        { year: 45, value: 1.13 },<!-- [et_pb_line_break_holder] -->        { year: 46, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { year: 47, value: 0.88 },<!-- [et_pb_line_break_holder] -->        { year: 48, value: 0.64 },<!-- [et_pb_line_break_holder] -->        { year: 49, value: 0.34 },<!-- [et_pb_line_break_holder] -->        { year: 50, value: 0.73 },<!-- [et_pb_line_break_holder] -->        { year: 51, value: 0.34 },<!-- [et_pb_line_break_holder] -->        { year: 52, value: 0.64 },<!-- [et_pb_line_break_holder] -->        { year: 53, value: 0.69 },<!-- [et_pb_line_break_holder] -->        { year: 54, value: 0.56 },<!-- [et_pb_line_break_holder] -->        { year: 55, value: 0.44 },<!-- [et_pb_line_break_holder] -->        { year: 56, value: 0.34 },<!-- [et_pb_line_break_holder] -->        { year: 57, value: 0.37 },<!-- [et_pb_line_break_holder] -->        { year: 58, value: 0.39 },<!-- [et_pb_line_break_holder] -->        { year: 59, value: 0.10 },<!-- [et_pb_line_break_holder] -->        { year: 60, value: 0.51 },<!-- [et_pb_line_break_holder] -->        { year: 61, value: 0.20 },<!-- [et_pb_line_break_holder] -->        { year: 62, value: 0.27 },<!-- [et_pb_line_break_holder] -->        { year: 63, value: 0.20 },<!-- [et_pb_line_break_holder] -->        { year: 64, value: 0.15 },<!-- [et_pb_line_break_holder] -->        { year: 65, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { year: 66, value: 0.10 },<!-- [et_pb_line_break_holder] -->        { year: 67, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { year: 68, value: 0.07 },<!-- [et_pb_line_break_holder] -->        { year: 70, value: 0.05 },<!-- [et_pb_line_break_holder] -->        { year: 71, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { year: 72, value: 0.02 },<!-- [et_pb_line_break_holder] -->        { year: 73, value: 0.05 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_diabetesDuration = d3.select(\"#barChart_diabetesDuration\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Bar Charts<!-- [et_pb_line_break_holder] -->    function drawBarChartDiabetesDuration() {<!-- [et_pb_line_break_holder] -->        const barMargin_diabetesDuration = { top: 40, right: 50, bottom: 60, left: 70 };<!-- [et_pb_line_break_holder] -->        const barContainerWidth_diabetesDuration = Math.min(1080, window.innerWidth * 0.8) - barMargin_diabetesDuration.left - barMargin_diabetesDuration.right,<!-- [et_pb_line_break_holder] -->            barHeight_diabetesDuration = 500 - barMargin_diabetesDuration.top - barMargin_diabetesDuration.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_diabetesDuration = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_diabetesDuration, d =&gt; d.year)])<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_diabetesDuration]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_diabetesDuration = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_diabetesDuration, d =&gt; d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([barHeight_diabetesDuration, 0]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_diabetesDuration<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_diabetesDuration + barMargin_diabetesDuration.left + barMargin_diabetesDuration.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_diabetesDuration + barMargin_diabetesDuration.top + barMargin_diabetesDuration.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_diabetesDuration.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_diabetesDuration = barSvg_diabetesDuration<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_diabetesDuration.left},${barMargin_diabetesDuration.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        barChart_diabetesDuration.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_diabetesDuration)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_diabetesDuration(d.year))<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY_diabetesDuration(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barX_diabetesDuration(1) - barX_diabetesDuration(0) - 2)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", d =&gt; barHeight_diabetesDuration - barY_diabetesDuration(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Y-Achse (H\u00e4ufigkeit)<!-- [et_pb_line_break_holder] -->        barChart_diabetesDuration.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_diabetesDuration));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ X-Achse (Diabetesdauer) mit benutzerdefinierten Ticks<!-- [et_pb_line_break_holder] -->        barChart_diabetesDuration.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_diabetesDuration})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_diabetesDuration)<!-- [et_pb_line_break_holder] -->                .tickValues([0, 20, 40, 60, 80])<!-- [et_pb_line_break_holder] -->                .tickFormat(d =&gt; d + \" Jahre\"));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ X-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_diabetesDuration.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_diabetesDuration \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_diabetesDuration + barMargin_diabetesDuration.bottom - 10)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Diabetesdauer (Jahre)\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_diabetesDuration.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", -barHeight_diabetesDuration \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_diabetesDuration.left + 20)<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", \"rotate(-90)\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit (%)\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartDiabetesDuration();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartDiabetesDuration);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;3 Technologie diabetologiczne&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Technologie diabetologiczne<\/h2><!-- [et_pb_line_break_holder] --><h3>Wykorzystanie technologii diabetologicznych<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"groupedBarChart_diabetesTechnologies\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Data for the grouped bar chart<!-- [et_pb_line_break_holder] -->    const groupedBarData_diabetesTechnologies = [<!-- [et_pb_line_break_holder] -->        { DiaTyp: \"Eltern (Kind mit Diabetes)\", \"CGM-System\": 97.3, \"Insulinpumpe\": 83.6, \"AID-System\": 61.8, \"Smart-Pen\": 14.1 },<!-- [et_pb_line_break_holder] -->        { DiaTyp: \"Typ-1\", \"CGM-System\": 96.0, \"Insulinpumpe\": 63.3, \"AID-System\": 41.9, \"Smart-Pen\": 14.9 },<!-- [et_pb_line_break_holder] -->        { DiaTyp: \"Typ-2\", \"CGM-System\": 50.4, \"Insulinpumpe\": 2.0, \"AID-System\": 1.8, \"Smart-Pen\": 12.3 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Colors for each technology<!-- [et_pb_line_break_holder] -->    const colors_diabetesTechnologies = {<!-- [et_pb_line_break_holder] -->        \"CGM-System\": \"#1482A5\",    \/\/ Orange for CGM-System<!-- [et_pb_line_break_holder] -->        \"Insulinpumpe\": \"#F47A2D\",  \/\/ Blue for Insulinpumpe<!-- [et_pb_line_break_holder] -->        \"AID-System\": \"#95C623\",    \/\/ Green for AID-System<!-- [et_pb_line_break_holder] -->        \"Smart-Pen\": \"#9A6980\"      \/\/ Purple for Smart-Pen<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_diabetesTechnologies = d3.select(\"#groupedBarChart_diabetesTechnologies\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to draw the grouped bar chart<!-- [et_pb_line_break_holder] -->    function drawGroupedBarChartDiabetesTechnologies() {<!-- [et_pb_line_break_holder] -->        const barMargin_diabetesTechnologies = {top: 40, right: 50, bottom: 100, left: 200};<!-- [et_pb_line_break_holder] -->        const containerWidth = Math.min(1080, window.innerWidth * 0.8);<!-- [et_pb_line_break_holder] -->        const barContainerWidth_diabetesTechnologies = containerWidth - barMargin_diabetesTechnologies.left - barMargin_diabetesTechnologies.right,<!-- [et_pb_line_break_holder] -->              barHeight_diabetesTechnologies = 400;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Scales for the chart<!-- [et_pb_line_break_holder] -->        const barY0_diabetesTechnologies = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(groupedBarData_diabetesTechnologies.map(d =&gt; d.DiaTyp))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_diabetesTechnologies])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY1_diabetesTechnologies = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain([\"CGM-System\", \"Insulinpumpe\", \"AID-System\", \"Smart-Pen\"])<!-- [et_pb_line_break_holder] -->            .range([0, barY0_diabetesTechnologies.bandwidth()])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barX_diabetesTechnologies = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_diabetesTechnologies]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Update SVG size<!-- [et_pb_line_break_holder] -->        barSvg_diabetesTechnologies<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_diabetesTechnologies + barMargin_diabetesTechnologies.top + barMargin_diabetesTechnologies.bottom + 50);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Remove old content<!-- [et_pb_line_break_holder] -->        barSvg_diabetesTechnologies.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the chart<!-- [et_pb_line_break_holder] -->        const groupedBarChart_diabetesTechnologies = barSvg_diabetesTechnologies<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_diabetesTechnologies.left},${barMargin_diabetesTechnologies.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw the groups of bars<!-- [et_pb_line_break_holder] -->        const groups = groupedBarChart_diabetesTechnologies.selectAll(\".group\")<!-- [et_pb_line_break_holder] -->            .data(groupedBarData_diabetesTechnologies)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"group\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", d =&gt; `translate(0, ${barY0_diabetesTechnologies(d.DiaTyp)})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw individual bars within each group<!-- [et_pb_line_break_holder] -->        groups.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(d =&gt; [\"CGM-System\", \"Insulinpumpe\", \"AID-System\", \"Smart-Pen\"].map(key =&gt; ({key: key, value: d[key]})))<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY1_diabetesTechnologies(d.key))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; barX_diabetesTechnologies(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY1_diabetesTechnologies.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_diabetesTechnologies[d.key]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Add percentage labels inside the bars<!-- [et_pb_line_break_holder] -->        groups.selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .data(d =&gt; [\"CGM-System\", \"Insulinpumpe\", \"AID-System\", \"Smart-Pen\"].map(key =&gt; ({key: key, value: d[key]})))<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; barX_diabetesTechnologies(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; barY1_diabetesTechnologies(d.key) + barY1_diabetesTechnologies.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"start\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.value + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Draw y-axis (categories)<!-- [et_pb_line_break_holder] -->        groupedBarChart_diabetesTechnologies.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY0_diabetesTechnologies).tickSize(0))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend section<!-- [et_pb_line_break_holder] -->        const legend_diabetesTechnologies = barSvg_diabetesTechnologies.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_diabetesTechnologies.left}, ${barHeight_diabetesTechnologies + barMargin_diabetesTechnologies.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData_diabetesTechnologies = Object.keys(colors_diabetesTechnologies);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_diabetesTechnologies = legend_diabetesTechnologies.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData_diabetesTechnologies)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Color boxes for legend<!-- [et_pb_line_break_holder] -->        legendItems_diabetesTechnologies.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_diabetesTechnologies[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legend text labels<!-- [et_pb_line_break_holder] -->        legendItems_diabetesTechnologies.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initial chart draw<!-- [et_pb_line_break_holder] -->    drawGroupedBarChartDiabetesTechnologies();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Redraw the chart on window resize<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawGroupedBarChartDiabetesTechnologies);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;nastawienie do cukrzycy&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Nastawienie do cyfryzacji<\/h2><!-- [et_pb_line_break_holder] --><svg id=\"treeMap_digi_diab\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Tree Map (Einstellung zu Digitalen Diabetes KAT)<!-- [et_pb_line_break_holder] -->    const treeData_digi_diab = [<!-- [et_pb_line_break_holder] -->        { name: 'positiv', value: 85.28 },<!-- [et_pb_line_break_holder] -->        { name: 'neutral', value: 11.46 },<!-- [et_pb_line_break_holder] -->        { name: 'negativ', value: 3.26 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->    const treeMapColors_digi_diab = ['#95C623', '#1482A5', '#F47A2D'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const treeSvg_digi_diab = d3.select(\"#treeMap_digi_diab\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    function drawTreeMapDigiDiab() {<!-- [et_pb_line_break_holder] -->        const treeMargin_digi_diab = { top: 40, right: 10, bottom: 80, left: 10 };<!-- [et_pb_line_break_holder] -->        const containerWidth_digi_diab = Math.min(1080, window.innerWidth * 0.8) - treeMargin_digi_diab.left - treeMargin_digi_diab.right;<!-- [et_pb_line_break_holder] -->        const treeHeight_digi_diab = 400; \/\/ Fixed content height for the tree map content<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ Calculate the SVG container height dynamically based on the number of legend items<!-- [et_pb_line_break_holder] -->        const legendItemHeight_digi_diab = 25;<!-- [et_pb_line_break_holder] -->        const legendHeight_digi_diab = treeData_digi_diab.length * legendItemHeight_digi_diab;<!-- [et_pb_line_break_holder] -->        const svgHeight_digi_diab = treeHeight_digi_diab + treeMargin_digi_diab.top + treeMargin_digi_diab.bottom + legendHeight_digi_diab;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        treeSvg_digi_diab<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth_digi_diab + treeMargin_digi_diab.left + treeMargin_digi_diab.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", svgHeight_digi_diab);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        treeSvg_digi_diab.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Erstelle die Hierarchie f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->        const root_digi_diab = d3.hierarchy({ children: treeData_digi_diab })<!-- [et_pb_line_break_holder] -->            .sum(d =&gt; d.value);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        d3.treemap()<!-- [et_pb_line_break_holder] -->            .size([containerWidth_digi_diab, treeHeight_digi_diab])<!-- [et_pb_line_break_holder] -->            .padding(2)(root_digi_diab);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Rechtecke mit den festgelegten Farben<!-- [et_pb_line_break_holder] -->        const nodes_digi_diab = treeSvg_digi_diab.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_digi_diab.left},${treeMargin_digi_diab.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(root_digi_diab.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; d.x1 - d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", d =&gt; d.y1 - d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_digi_diab[i % treeMapColors_digi_diab.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge nur den Wert in die Rechtecke ein<!-- [et_pb_line_break_holder] -->        treeSvg_digi_diab.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_digi_diab.left},${treeMargin_digi_diab.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .data(root_digi_diab.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0 + (d.x1 - d.x0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0 + (d.y1 - d.y0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"16px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.data.value.toFixed(2) + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Legende unterhalb des Tree Maps<!-- [et_pb_line_break_holder] -->        const legendGroup_digi_diab = treeSvg_digi_diab.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend-group\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(20, ${treeHeight_digi_diab + treeMargin_digi_diab.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_digi_diab = legendGroup_digi_diab.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(treeData_digi_diab)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * legendItemHeight_digi_diab})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechteck f\u00fcr die Farben in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_digi_diab.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_digi_diab[i % treeMapColors_digi_diab.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Text in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_digi_diab.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 20)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .style(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.name);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    drawTreeMapDigiDiab();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Tree Map neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawTreeMapDigiDiab);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;obci\u0105\u017cenie zwi\u0105zane z cukrzyc\u0105&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Diabetes-Technologie Belastungen --><!-- [et_pb_line_break_holder] --><h3>Obci\u0105\u017cenia zwi\u0105zane z cukrzyc\u0105 spowodowane technologi\u0105 diabetologiczn\u0105<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_technologie\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Diabetes-Technologie Belastungen)<!-- [et_pb_line_break_holder] -->    const barData_technologie = [<!-- [et_pb_line_break_holder] -->        { type: \"Reduktion diabetesbezogener Belastungen\", value: 69.97 },<!-- [et_pb_line_break_holder] -->        { type: \"Neue diabetesbezogene Belastungen\", value: 25.62 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_technologie = d3.select(\"#barChart_technologie\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartTechnologie() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Typenbeschreibung<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_technologie.map(d => d.type.length));<!-- [et_pb_line_break_holder] -->        const barMargin_technologie = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_technologie = Math.min(1080, window.innerWidth * 0.8) - barMargin_technologie.left - barMargin_technologie.right,<!-- [et_pb_line_break_holder] -->            barHeight_technologie = 500 - barMargin_technologie.top - barMargin_technologie.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_technologie = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_technologie, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_technologie]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_technologie = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_technologie.map(d => d.type))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_technologie])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_technologie<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_technologie + barMargin_technologie.left + barMargin_technologie.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_technologie + barMargin_technologie.top + barMargin_technologie.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_technologie.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_technologie = barSvg_technologie<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_technologie.left},${barMargin_technologie.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_technologie = barChart_technologie.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_technologie)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_technologie(d.type))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_technologie.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_technologie(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_technologie.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_technologie))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksTechnologie() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_technologie.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_technologie.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_technologie})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_technologie)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksTechnologie()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_technologie.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_technologie) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_technologie + barMargin_technologie.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_technologie.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_technologie.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Belastungstyp\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_technologie = barChart_technologie.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_technologie)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_technologie(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_technologie(d.type) + barY_technologie.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartTechnologie();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartTechnologie);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Obszary tematyczne cyfryzacji&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code disabled_on=&#8221;on|off|off&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Themenfelder --><!-- [et_pb_line_break_holder] --><h2>Obszary tematyczne cyfryzacji<\/h2><!-- [et_pb_line_break_holder] --><svg id=\"barChart_themenfelder_full\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Themenfelder) mit allen Werten<!-- [et_pb_line_break_holder] -->    const barData_themenfelder_full = [<!-- [et_pb_line_break_holder] -->        { type: \"AID-Systeme\", value: 59.9 },<!-- [et_pb_line_break_holder] -->        { type: \"Kompatibilit\u00e4t\", value: 45.0 },<!-- [et_pb_line_break_holder] -->        { type: \"Software zur Glukoseauswertung\", value: 39.3 },<!-- [et_pb_line_break_holder] -->        { type: \"Diabetes-Apps\", value: 31.4 },<!-- [et_pb_line_break_holder] -->        { type: \"KI (f\u00fcr Diagnostik, Therapieunterst\u00fctzung)\", value: 31.0 },<!-- [et_pb_line_break_holder] -->        { type: \"Unterst\u00fctzungs-Systeme f\u00fcr Patienten-Entscheidungen\", value: 27.5 },<!-- [et_pb_line_break_holder] -->        { type: \"Unterst\u00fctzungs-Systeme f\u00fcr Arzt-Entscheidungen\", value: 16.5 },<!-- [et_pb_line_break_holder] -->        { type: \"Online-Communities\", value: 15.8 },<!-- [et_pb_line_break_holder] -->        { type: \"Online-Video-Schulungen\", value: 12.9 },<!-- [et_pb_line_break_holder] -->        { type: \"Online-Video-Sprechstunden\", value: 11.8 },<!-- [et_pb_line_break_holder] -->        { type: \"Online Typ-2-Pr\u00e4vention\", value: 7.1 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_themenfelder_full = d3.select(\"#barChart_themenfelder_full\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartThemenfelderFull() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Typenbeschreibung<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_themenfelder_full.map(d => d.type.length));<!-- [et_pb_line_break_holder] -->        const barMargin_themenfelder_full = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_themenfelder_full = Math.min(1080, window.innerWidth * 0.8) - barMargin_themenfelder_full.left - barMargin_themenfelder_full.right,<!-- [et_pb_line_break_holder] -->            barHeight_themenfelder_full = 500 - barMargin_themenfelder_full.top - barMargin_themenfelder_full.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_themenfelder_full = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_themenfelder_full, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_themenfelder_full]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_themenfelder_full = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_themenfelder_full.map(d => d.type))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_themenfelder_full])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_themenfelder_full<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_themenfelder_full + barMargin_themenfelder_full.left + barMargin_themenfelder_full.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_themenfelder_full + barMargin_themenfelder_full.top + barMargin_themenfelder_full.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_themenfelder_full.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_themenfelder_full = barSvg_themenfelder_full<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_themenfelder_full.left},${barMargin_themenfelder_full.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_themenfelder_full = barChart_themenfelder_full.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_themenfelder_full)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_themenfelder_full(d.type))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_themenfelder_full.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_themenfelder_full(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_themenfelder_full.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_themenfelder_full))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksThemenfelderFull() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_themenfelder_full.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_themenfelder_full.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_themenfelder_full})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_themenfelder_full)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksThemenfelderFull()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_themenfelder_full.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_themenfelder_full) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_themenfelder_full + barMargin_themenfelder_full.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_themenfelder_full.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_themenfelder_full.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Themenfeld\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_themenfelder_full = barChart_themenfelder_full.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_themenfelder_full)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_themenfelder_full(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_themenfelder_full(d.type) + barY_themenfelder_full.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartThemenfelderFull();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartThemenfelderFull);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Znaczenie AID&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>AID: Znaczenie<\/h2><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_AIDSignificance\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Stacked Bar Chart (AID Bedeutsamkeit)<!-- [et_pb_line_break_holder] -->    const stackedBarData_AIDSignificance = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 70.10, \"Nicht Bedeutsam\": 29.90 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 85.90, \"Nicht Bedeutsam\": 14.10 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Balkendiagramm<!-- [et_pb_line_break_holder] -->    const colors_AIDSignificance = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blau f\u00fcr Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange f\u00fcr Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_AIDSignificance = d3.select(\"#stackedBarChart_AIDSignificance\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Stacked Bar Charts<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartAIDSignificance() {<!-- [et_pb_line_break_holder] -->        const barMargin_AIDSignificance = {top: 40, right: 50, bottom: 80, left: 200};  \/\/ Erh\u00f6hter unterer Rand f\u00fcr die Legende<!-- [et_pb_line_break_holder] -->        const barContainerWidth_AIDSignificance = Math.min(1080, window.innerWidth * 0.8) - barMargin_AIDSignificance.left - barMargin_AIDSignificance.right,<!-- [et_pb_line_break_holder] -->              barHeight_AIDSignificance = 300 - barMargin_AIDSignificance.top - barMargin_AIDSignificance.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_AIDSignificance = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Gesamtprozentsatz summiert sich zu 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_AIDSignificance]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_AIDSignificance = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_AIDSignificance.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_AIDSignificance])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_AIDSignificance<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_AIDSignificance + barMargin_AIDSignificance.left + barMargin_AIDSignificance.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_AIDSignificance + barMargin_AIDSignificance.top + barMargin_AIDSignificance.bottom + 50); \/\/ Zus\u00e4tzlicher Platz f\u00fcr die Legende<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_AIDSignificance.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Diagramm<!-- [et_pb_line_break_holder] -->        const stackedBarChart = barSvg_AIDSignificance<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_AIDSignificance.left},${barMargin_AIDSignificance.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stapel die Daten<!-- [et_pb_line_break_holder] -->        stackedBarData_AIDSignificance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_AIDSignificance(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_AIDSignificance(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_AIDSignificance(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_AIDSignificance.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_AIDSignificance[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge Prozentwerte zu jedem Teil des Balkens hinzu<!-- [et_pb_line_break_holder] -->        stackedBarData_AIDSignificance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_AIDSignificance(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_AIDSignificance(d.kategorie) + barY_AIDSignificance.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die y-Achse (links, Kategorien)<!-- [et_pb_line_break_holder] -->        stackedBarChart.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_AIDSignificance));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legendensektion unterhalb der Balken, die an der gleichen Ausrichtung beginnt wie die Balken<!-- [et_pb_line_break_holder] -->        const legend = barSvg_AIDSignificance.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_AIDSignificance.left}, ${barHeight_AIDSignificance + barMargin_AIDSignificance.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData = Object.keys(colors_AIDSignificance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems = legend.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Farbk\u00e4stchen f\u00fcr die Legende<!-- [et_pb_line_break_holder] -->        legendItems.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_AIDSignificance[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legendentext<!-- [et_pb_line_break_holder] -->        legendItems.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawStackedBarChartAIDSignificance();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartAIDSignificance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code disabled_on=&#8221;on|off|off&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Therapie vor dem AID --><!-- [et_pb_line_break_holder] --><h3>Terapia przed AID<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_therapie\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Therapie vor dem AID)<!-- [et_pb_line_break_holder] -->    const barData_therapie = [<!-- [et_pb_line_break_holder] -->        { type: \"Nur Insulinpumpe\", value: 77.49 },<!-- [et_pb_line_break_holder] -->        { type: \"Mehrmals t\u00e4gliche Insulininjektion\", value: 19.90 },<!-- [et_pb_line_break_holder] -->        { type: \"Keine, AID direkt nach Diabetes-Diagnose\", value: 2.62 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_therapie = d3.select(\"#barChart_therapie\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartTherapie() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Typenbeschreibung<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_therapie.map(d => d.type.length));<!-- [et_pb_line_break_holder] -->        const barMargin_therapie = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_therapie = Math.min(1080, window.innerWidth * 0.8) - barMargin_therapie.left - barMargin_therapie.right,<!-- [et_pb_line_break_holder] -->            barHeight_therapie = 500 - barMargin_therapie.top - barMargin_therapie.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_therapie = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_therapie, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_therapie]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_therapie = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_therapie.map(d => d.type))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_therapie])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_therapie<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_therapie + barMargin_therapie.left + barMargin_therapie.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_therapie + barMargin_therapie.top + barMargin_therapie.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_therapie.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_therapie = barSvg_therapie<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_therapie.left},${barMargin_therapie.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_therapie = barChart_therapie.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_therapie)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_therapie(d.type))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_therapie.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_therapie(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_therapie.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_therapie))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksTherapie() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_therapie.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_therapie.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_therapie})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_therapie)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksTherapie()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_therapie.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_therapie) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_therapie + barMargin_therapie.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_therapie.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_therapie.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Therapieform\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_therapie = barChart_therapie.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_therapie)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_therapie(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_therapie(d.type) + barY_therapie.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartTherapie();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartTherapie);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Wp\u0142yw AID&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Auswirkungen von AID-Systemen --><!-- [et_pb_line_break_holder] --><h2>AID: Wp\u0142yw<\/h2><!-- [et_pb_line_break_holder] --><svg id=\"barChart_auswirkungen\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Auswirkungen von AID-Systemen)<!-- [et_pb_line_break_holder] -->    const barData_auswirkungen = [<!-- [et_pb_line_break_holder] -->        { type: \"Menschen mit Diabetes werden autonomer\", value: 75.6 },<!-- [et_pb_line_break_holder] -->        { type: \"Erh\u00f6hter Schulungsaufwand\", value: 52.1 },<!-- [et_pb_line_break_holder] -->        { type: \"Weniger Kontakt zum Diabetes-Team\", value: 23.6 },<!-- [et_pb_line_break_holder] -->        { type: \"Viele werden nicht damit zurechtkommen\", value: 18.9 },<!-- [et_pb_line_break_holder] -->        { type: \"Therapie wird riskanter\", value: 8.6 },<!-- [et_pb_line_break_holder] -->        { type: \"Diabetes-Team wird \u00fcberfl\u00fcssig\", value: 4.1 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_auswirkungen = d3.select(\"#barChart_auswirkungen\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartAuswirkungen() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Typenbeschreibung<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_auswirkungen.map(d => d.type.length));<!-- [et_pb_line_break_holder] -->        const barMargin_auswirkungen = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_auswirkungen = Math.min(1080, window.innerWidth * 0.8) - barMargin_auswirkungen.left - barMargin_auswirkungen.right,<!-- [et_pb_line_break_holder] -->            barHeight_auswirkungen = 500 - barMargin_auswirkungen.top - barMargin_auswirkungen.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_auswirkungen = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_auswirkungen, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_auswirkungen]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_auswirkungen = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_auswirkungen.map(d => d.type))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_auswirkungen])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_auswirkungen<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_auswirkungen + barMargin_auswirkungen.left + barMargin_auswirkungen.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_auswirkungen + barMargin_auswirkungen.top + barMargin_auswirkungen.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_auswirkungen.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_auswirkungen = barSvg_auswirkungen<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_auswirkungen.left},${barMargin_auswirkungen.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_auswirkungen = barChart_auswirkungen.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_auswirkungen)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_auswirkungen(d.type))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_auswirkungen.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_auswirkungen(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_auswirkungen.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_auswirkungen))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksAuswirkungen() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_auswirkungen.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_auswirkungen.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_auswirkungen})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_auswirkungen)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksAuswirkungen()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_auswirkungen.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_auswirkungen) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_auswirkungen + barMargin_auswirkungen.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_auswirkungen.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_auswirkungen.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Auswirkung\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_auswirkungen = barChart_auswirkungen.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_auswirkungen)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_auswirkungen(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_auswirkungen(d.type) + barY_auswirkungen.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartAuswirkungen();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartAuswirkungen);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;inteligentne peny&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!-- Bar Chart: Kompatibilit\u00e4tsprobleme --><!-- [et_pb_line_break_holder] --><h2>Inteligentne peny insulinowe<\/h2><!-- [et_pb_line_break_holder] --><h3>Bariery w korzystaniu z inteligentnych pen\u00f3w<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"barChart_kompatibilitaet\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Bar Chart (Kompatibilit\u00e4tsprobleme)<!-- [et_pb_line_break_holder] -->    const barData_kompatibilitaet = [<!-- [et_pb_line_break_holder] -->        { type: \"Fehlende Kompatibilit\u00e4t: Software\", value: 42.5 },<!-- [et_pb_line_break_holder] -->        { type: \"Fehlende Kompatibilit\u00e4t: Apps\", value: 41.9 },<!-- [et_pb_line_break_holder] -->        { type: \"Zu geringe Auswahl\", value: 26.0 },<!-- [et_pb_line_break_holder] -->        { type: \"Zu geringer Zusatznutzen\", value: 21.4 },<!-- [et_pb_line_break_holder] -->        { type: \"Zuzahlung erforderlich\", value: 17.5 },<!-- [et_pb_line_break_holder] -->        { type: \"Keine Kostenerstattung\", value: 14.4 },<!-- [et_pb_line_break_holder] -->        { type: \"Unn\u00f6tige Sammlung von Daten\", value: 14.2 },<!-- [et_pb_line_break_holder] -->        { type: \"Zu teuer\", value: 14.2 },<!-- [et_pb_line_break_holder] -->        { type: \"Einsicht in die Therapie durch andere\", value: 12.4 },<!-- [et_pb_line_break_holder] -->        { type: \"Fehleranf\u00e4lligkeit\", value: 8.9 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_kompatibilitaet = d3.select(\"#barChart_kompatibilitaet\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    function drawBarChartKompatibilitaet() {<!-- [et_pb_line_break_holder] -->        \/\/ Dynamischer linker Rand, abh\u00e4ngig von der L\u00e4nge der l\u00e4ngsten Typenbeschreibung<!-- [et_pb_line_break_holder] -->        const longestLabelLength = Math.max(...barData_kompatibilitaet.map(d => d.type.length));<!-- [et_pb_line_break_holder] -->        const barMargin_kompatibilitaet = {top: 40, right: 50, bottom: 60, left: longestLabelLength * 7}; \/\/ Dynamischer linker Rand<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barContainerWidth_kompatibilitaet = Math.min(1080, window.innerWidth * 0.8) - barMargin_kompatibilitaet.left - barMargin_kompatibilitaet.right,<!-- [et_pb_line_break_holder] -->            barHeight_kompatibilitaet = 500 - barMargin_kompatibilitaet.top - barMargin_kompatibilitaet.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_kompatibilitaet = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, d3.max(barData_kompatibilitaet, d => d.value)])<!-- [et_pb_line_break_holder] -->            .nice()<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_kompatibilitaet]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_kompatibilitaet = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(barData_kompatibilitaet.map(d => d.type))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_kompatibilitaet])<!-- [et_pb_line_break_holder] -->            .padding(0.1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_kompatibilitaet<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_kompatibilitaet + barMargin_kompatibilitaet.left + barMargin_kompatibilitaet.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_kompatibilitaet + barMargin_kompatibilitaet.top + barMargin_kompatibilitaet.bottom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_kompatibilitaet.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Chart<!-- [et_pb_line_break_holder] -->        const barChart_kompatibilitaet = barSvg_kompatibilitaet<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_kompatibilitaet.left},${barMargin_kompatibilitaet.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Balken<!-- [et_pb_line_break_holder] -->        const bars_kompatibilitaet = barChart_kompatibilitaet.selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(barData_kompatibilitaet)<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"bar\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_kompatibilitaet(d.type))<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barY_kompatibilitaet.bandwidth())<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d => barX_kompatibilitaet(d.value))<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#477bb8\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Linke Achse (y-Achse)<!-- [et_pb_line_break_holder] -->        barChart_kompatibilitaet.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_kompatibilitaet))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Funktion zur Anzeige von Tick-Werten auf der x-Achse, basierend auf der Fensterbreite<!-- [et_pb_line_break_holder] -->        function getXTicksKompatibilitaet() {<!-- [et_pb_line_break_holder] -->            const windowWidth = window.innerWidth;<!-- [et_pb_line_break_holder] -->            const tickValues = barX_kompatibilitaet.ticks();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (windowWidth < 600) {                \/\/ Bei kleinen Bildschirmen, z.B. mobilen Ger\u00e4ten, jede zweite Tick-Markierung anzeigen                return tickValues.filter((d, i) => i % 2 === 0);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return tickValues; \/\/ Normale Anzeige bei gr\u00f6\u00dferen Bildschirmen<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Untere Achse (x-Achse) mit Beschriftung \"H\u00e4ufigkeit\"<!-- [et_pb_line_break_holder] -->        barChart_kompatibilitaet.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(0,${barHeight_kompatibilitaet})`)<!-- [et_pb_line_break_holder] -->            .call(d3.axisBottom(barX_kompatibilitaet)<!-- [et_pb_line_break_holder] -->                .tickValues(getXTicksKompatibilitaet()) \/\/ Hier werden die Ticks basierend auf der Fensterbreite angepasst<!-- [et_pb_line_break_holder] -->                .tickFormat(d => d + \"%\"))<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechtsb\u00fcndige x-Achsenbeschriftung \"H\u00e4ufigkeit\" und weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->        barChart_kompatibilitaet.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", barContainerWidth_kompatibilitaet) \/\/ Rechtsb\u00fcndig ausgerichtet<!-- [et_pb_line_break_holder] -->            .attr(\"y\", barHeight_kompatibilitaet + barMargin_kompatibilitaet.bottom - 15) \/\/ Weniger Abstand zu den Ticks<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"H\u00e4ufigkeit\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ y-Achsenbeschriftung<!-- [et_pb_line_break_holder] -->        barChart_kompatibilitaet.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"y\", -barMargin_kompatibilitaet.top \/ 2) \/\/ Position leicht oberhalb<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"end\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(\"Problem\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Werte rechts neben den Balken<!-- [et_pb_line_break_holder] -->        const labels_kompatibilitaet = barChart_kompatibilitaet.selectAll(\".label\")<!-- [et_pb_line_break_holder] -->            .data(barData_kompatibilitaet)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"label\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d => barX_kompatibilitaet(d.value) + 5)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d => barY_kompatibilitaet(d.type) + barY_kompatibilitaet.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d => d.value + \"%\");<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawBarChartKompatibilitaet();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawBarChartKompatibilitaet);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3 style=\"text-align: left;\">Znaczenie inteligentnych pen\u00f3w insulinowych<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_medicationSignificance\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Stacked Bar Chart (Medikamentenbedeutsamkeit)<!-- [et_pb_line_break_holder] -->    const stackedBarData_medicationSignificance = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 34.70, \"Nicht Bedeutsam\": 65.30 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 39.80, \"Nicht Bedeutsam\": 60.20 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Balkendiagramm<!-- [et_pb_line_break_holder] -->    const colors_medicationSignificance = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blau f\u00fcr Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange f\u00fcr Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_medicationSignificance = d3.select(\"#stackedBarChart_medicationSignificance\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Stacked Bar Charts<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartMedicationSignificance() {<!-- [et_pb_line_break_holder] -->        const barMargin_medicationSignificance = {top: 40, right: 50, bottom: 80, left: 200};  \/\/ Erh\u00f6hter unterer Rand f\u00fcr die Legende<!-- [et_pb_line_break_holder] -->        const barContainerWidth_medicationSignificance = Math.min(1080, window.innerWidth * 0.8) - barMargin_medicationSignificance.left - barMargin_medicationSignificance.right,<!-- [et_pb_line_break_holder] -->              barHeight_medicationSignificance = 300 - barMargin_medicationSignificance.top - barMargin_medicationSignificance.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_medicationSignificance = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Gesamtprozentsatz summiert sich zu 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_medicationSignificance]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_medicationSignificance = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_medicationSignificance.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_medicationSignificance])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_medicationSignificance<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_medicationSignificance + barMargin_medicationSignificance.left + barMargin_medicationSignificance.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_medicationSignificance + barMargin_medicationSignificance.top + barMargin_medicationSignificance.bottom + 50); \/\/ Zus\u00e4tzlicher Platz f\u00fcr die Legende<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_medicationSignificance.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Diagramm<!-- [et_pb_line_break_holder] -->        const stackedBarChart = barSvg_medicationSignificance<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_medicationSignificance.left},${barMargin_medicationSignificance.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stapel die Daten<!-- [et_pb_line_break_holder] -->        stackedBarData_medicationSignificance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_medicationSignificance(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_medicationSignificance(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_medicationSignificance(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_medicationSignificance.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_medicationSignificance[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge Prozentwerte zu jedem Teil des Balkens hinzu<!-- [et_pb_line_break_holder] -->        stackedBarData_medicationSignificance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_medicationSignificance(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_medicationSignificance(d.kategorie) + barY_medicationSignificance.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die y-Achse (links, Kategorien)<!-- [et_pb_line_break_holder] -->        stackedBarChart.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_medicationSignificance));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legendensektion unterhalb der Balken, die an der gleichen Ausrichtung beginnt wie die Balken<!-- [et_pb_line_break_holder] -->        const legend = barSvg_medicationSignificance.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_medicationSignificance.left}, ${barHeight_medicationSignificance + barMargin_medicationSignificance.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData = Object.keys(colors_medicationSignificance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems = legend.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Farbk\u00e4stchen f\u00fcr die Legende<!-- [et_pb_line_break_holder] -->        legendItems.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_medicationSignificance[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legendentext<!-- [et_pb_line_break_holder] -->        legendItems.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawStackedBarChartMedicationSignificance();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartMedicationSignificance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;9 Leki na odchudzanie&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Leki na odchudzanie<\/h2><!-- [et_pb_line_break_holder] --><h3 style=\"text-align: left;\">Znaczenie lek\u00f3w na odchudzanie<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"stackedBarChart_medicationImportance\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Stacked Bar Chart (Medikamentenbedeutsamkeit)<!-- [et_pb_line_break_holder] -->    const stackedBarData_medicationImportance = [<!-- [et_pb_line_break_holder] -->        { kategorie: \"Aktuell\", Bedeutsam: 32.23, \"Nicht Bedeutsam\": 67.77 },<!-- [et_pb_line_break_holder] -->        { kategorie: \"In 5 Jahren\", Bedeutsam: 46.60, \"Nicht Bedeutsam\": 53.40 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Balkendiagramm<!-- [et_pb_line_break_holder] -->    const colors_medicationImportance = {<!-- [et_pb_line_break_holder] -->        Bedeutsam: \"#1482A5\",        \/\/ Blau f\u00fcr Bedeutsam<!-- [et_pb_line_break_holder] -->        \"Nicht Bedeutsam\": \"#F47A2D\" \/\/ Orange f\u00fcr Nicht Bedeutsam<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const barSvg_medicationImportance = d3.select(\"#stackedBarChart_medicationImportance\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Stacked Bar Charts<!-- [et_pb_line_break_holder] -->    function drawStackedBarChartMedicationImportance() {<!-- [et_pb_line_break_holder] -->        const barMargin_medicationImportance = {top: 40, right: 50, bottom: 80, left: 200};  \/\/ Erh\u00f6hter unterer Rand f\u00fcr die Legende<!-- [et_pb_line_break_holder] -->        const barContainerWidth_medicationImportance = Math.min(1080, window.innerWidth * 0.8) - barMargin_medicationImportance.left - barMargin_medicationImportance.right,<!-- [et_pb_line_break_holder] -->              barHeight_medicationImportance = 300 - barMargin_medicationImportance.top - barMargin_medicationImportance.bottom;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Skalen<!-- [et_pb_line_break_holder] -->        const barX_medicationImportance = d3.scaleLinear()<!-- [et_pb_line_break_holder] -->            .domain([0, 100])  \/\/ Gesamtprozentsatz summiert sich zu 100<!-- [et_pb_line_break_holder] -->            .range([0, barContainerWidth_medicationImportance]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const barY_medicationImportance = d3.scaleBand()<!-- [et_pb_line_break_holder] -->            .domain(stackedBarData_medicationImportance.map(d =&gt; d.kategorie))<!-- [et_pb_line_break_holder] -->            .range([0, barHeight_medicationImportance])<!-- [et_pb_line_break_holder] -->            .padding(0.2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Aktualisiere die Gr\u00f6\u00dfe des SVG-Containers<!-- [et_pb_line_break_holder] -->        barSvg_medicationImportance<!-- [et_pb_line_break_holder] -->            .attr(\"width\", barContainerWidth_medicationImportance + barMargin_medicationImportance.left + barMargin_medicationImportance.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", barHeight_medicationImportance + barMargin_medicationImportance.top + barMargin_medicationImportance.bottom + 50); \/\/ Zus\u00e4tzlicher Platz f\u00fcr die Legende<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        barSvg_medicationImportance.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne das Diagramm<!-- [et_pb_line_break_holder] -->        const stackedBarChart = barSvg_medicationImportance<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_medicationImportance.left},${barMargin_medicationImportance.top})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Stapel die Daten<!-- [et_pb_line_break_holder] -->        stackedBarData_medicationImportance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let cumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"rect\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_medicationImportance(cumulative))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_medicationImportance(d.kategorie))<!-- [et_pb_line_break_holder] -->                    .attr(\"width\", barX_medicationImportance(d[key]))<!-- [et_pb_line_break_holder] -->                    .attr(\"height\", barY_medicationImportance.bandwidth())<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", colors_medicationImportance[key]);<!-- [et_pb_line_break_holder] -->                cumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge Prozentwerte zu jedem Teil des Balkens hinzu<!-- [et_pb_line_break_holder] -->        stackedBarData_medicationImportance.forEach(d =&gt; {<!-- [et_pb_line_break_holder] -->            let labelCumulative = 0;<!-- [et_pb_line_break_holder] -->            [\"Bedeutsam\", \"Nicht Bedeutsam\"].forEach(key =&gt; {<!-- [et_pb_line_break_holder] -->                stackedBarChart.append(\"text\")<!-- [et_pb_line_break_holder] -->                    .attr(\"x\", barX_medicationImportance(labelCumulative + d[key] \/ 2))<!-- [et_pb_line_break_holder] -->                    .attr(\"y\", barY_medicationImportance(d.kategorie) + barY_medicationImportance.bandwidth() \/ 2)<!-- [et_pb_line_break_holder] -->                    .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->                    .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->                    .attr(\"fill\", \"#000\")<!-- [et_pb_line_break_holder] -->                    .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->                    .text(d[key] + \"%\");<!-- [et_pb_line_break_holder] -->                labelCumulative += d[key];<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die y-Achse (links, Kategorien)<!-- [et_pb_line_break_holder] -->        stackedBarChart.append(\"g\")<!-- [et_pb_line_break_holder] -->            .call(d3.axisLeft(barY_medicationImportance));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legendensektion unterhalb der Balken, die an der gleichen Ausrichtung beginnt wie die Balken<!-- [et_pb_line_break_holder] -->        const legend = barSvg_medicationImportance.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${barMargin_medicationImportance.left}, ${barHeight_medicationImportance + barMargin_medicationImportance.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendData = Object.keys(colors_medicationImportance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems = legend.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(legendData)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * 30})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Farbk\u00e4stchen f\u00fcr die Legende<!-- [et_pb_line_break_holder] -->        legendItems.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 18)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", d =&gt; colors_medicationImportance[d]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Legendentext<!-- [et_pb_line_break_holder] -->        legendItems.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 24)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Diagramms<!-- [et_pb_line_break_holder] -->    drawStackedBarChartMedicationImportance();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Diagramm neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawStackedBarChartMedicationImportance);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Ju\u017c s\u0142ysza\u0142em o lekach na odchudzanie:<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"treeMap_medication\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Tree Map (Medikamentenbekanntheit)<!-- [et_pb_line_break_holder] -->    const treeData_medication = [<!-- [et_pb_line_break_holder] -->        { name: 'Ja', value: 83.55 },<!-- [et_pb_line_break_holder] -->        { name: 'Nein', value: 16.45 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->    const treeMapColors_medication = ['#1482A5', '#F47A2D'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const treeSvg_medication = d3.select(\"#treeMap_medication\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    function drawTreeMapMedication() {<!-- [et_pb_line_break_holder] -->        const treeMargin_medication = { top: 40, right: 10, bottom: 80, left: 10 };<!-- [et_pb_line_break_holder] -->        const containerWidth_medication = Math.min(1080, window.innerWidth * 0.8) - treeMargin_medication.left - treeMargin_medication.right;<!-- [et_pb_line_break_holder] -->        const treeHeight_medication = 400; \/\/ Fixed content height for the tree map content<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ Calculate the SVG container height dynamically based on the number of legend items<!-- [et_pb_line_break_holder] -->        const legendItemHeight_medication = 25;<!-- [et_pb_line_break_holder] -->        const legendHeight_medication = treeData_medication.length * legendItemHeight_medication;<!-- [et_pb_line_break_holder] -->        const svgHeight_medication = treeHeight_medication + treeMargin_medication.top + treeMargin_medication.bottom + legendHeight_medication;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        treeSvg_medication<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth_medication + treeMargin_medication.left + treeMargin_medication.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", svgHeight_medication);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        treeSvg_medication.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Erstelle die Hierarchie f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->        const root_medication = d3.hierarchy({ children: treeData_medication })<!-- [et_pb_line_break_holder] -->            .sum(d =&gt; d.value);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        d3.treemap()<!-- [et_pb_line_break_holder] -->            .size([containerWidth_medication, treeHeight_medication])<!-- [et_pb_line_break_holder] -->            .padding(2)(root_medication);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Rechtecke mit den festgelegten Farben<!-- [et_pb_line_break_holder] -->        const nodes_medication = treeSvg_medication.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_medication.left},${treeMargin_medication.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(root_medication.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; d.x1 - d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", d =&gt; d.y1 - d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_medication[i % treeMapColors_medication.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge nur den Wert in die Rechtecke ein<!-- [et_pb_line_break_holder] -->        treeSvg_medication.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_medication.left},${treeMargin_medication.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .data(root_medication.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0 + (d.x1 - d.x0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0 + (d.y1 - d.y0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"16px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.data.value.toFixed(2) + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Legende unterhalb des Tree Maps<!-- [et_pb_line_break_holder] -->        const legendGroup_medication = treeSvg_medication.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend-group\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(20, ${treeHeight_medication + treeMargin_medication.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_medication = legendGroup_medication.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(treeData_medication)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * legendItemHeight_medication})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechteck f\u00fcr die Farben in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_medication.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_medication[i % treeMapColors_medication.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Text in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_medication.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 20)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .style(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.name);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    drawTreeMapMedication();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Tree Map neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawTreeMapMedication);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Nastawienie do lek\u00f3w na odchudzanie<\/h3><!-- [et_pb_line_break_holder] --><svg id=\"treeMap_medis\"><\/svg><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    \/\/ Daten f\u00fcr das Tree Map (Medikamenteneinstellung)<!-- [et_pb_line_break_holder] -->    const treeData_medis = [<!-- [et_pb_line_break_holder] -->        { name: 'negativ', value: 41.89 },<!-- [et_pb_line_break_holder] -->        { name: 'positiv', value: 29.24 },<!-- [et_pb_line_break_holder] -->        { name: 'neutral', value: 28.88 }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Farben f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->    const treeMapColors_medis = ['#F47A2D', '#95C623', '#1482A5'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const treeSvg_medis = d3.select(\"#treeMap_medis\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funktion zum Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    function drawTreeMapMedis() {<!-- [et_pb_line_break_holder] -->        const treeMargin_medis = { top: 40, right: 10, bottom: 80, left: 10 };<!-- [et_pb_line_break_holder] -->        const containerWidth_medis = Math.min(1080, window.innerWidth * 0.8) - treeMargin_medis.left - treeMargin_medis.right;<!-- [et_pb_line_break_holder] -->        const treeHeight_medis = 400; \/\/ Fixed content height for the tree map content<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ Calculate the SVG container height dynamically based on the number of legend items<!-- [et_pb_line_break_holder] -->        const legendItemHeight_medis = 25;<!-- [et_pb_line_break_holder] -->        const legendHeight_medis = treeData_medis.length * legendItemHeight_medis;<!-- [et_pb_line_break_holder] -->        const svgHeight_medis = treeHeight_medis + treeMargin_medis.top + treeMargin_medis.bottom + legendHeight_medis;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        treeSvg_medis<!-- [et_pb_line_break_holder] -->            .attr(\"width\", containerWidth_medis + treeMargin_medis.left + treeMargin_medis.right)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", svgHeight_medis);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Entferne alte Inhalte<!-- [et_pb_line_break_holder] -->        treeSvg_medis.selectAll(\"*\").remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Erstelle die Hierarchie f\u00fcr das Tree Map<!-- [et_pb_line_break_holder] -->        const root_medis = d3.hierarchy({ children: treeData_medis })<!-- [et_pb_line_break_holder] -->            .sum(d =&gt; d.value);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        d3.treemap()<!-- [et_pb_line_break_holder] -->            .size([containerWidth_medis, treeHeight_medis])<!-- [et_pb_line_break_holder] -->            .padding(2)(root_medis);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Rechtecke mit den festgelegten Farben<!-- [et_pb_line_break_holder] -->        const nodes_medis = treeSvg_medis.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_medis.left},${treeMargin_medis.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"rect\")<!-- [et_pb_line_break_holder] -->            .data(root_medis.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"width\", d =&gt; d.x1 - d.x0)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", d =&gt; d.y1 - d.y0)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_medis[i % treeMapColors_medis.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ F\u00fcge nur den Wert in die Rechtecke ein<!-- [et_pb_line_break_holder] -->        treeSvg_medis.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(${treeMargin_medis.left},${treeMargin_medis.top})`)<!-- [et_pb_line_break_holder] -->            .selectAll(\"text\")<!-- [et_pb_line_break_holder] -->            .data(root_medis.leaves())<!-- [et_pb_line_break_holder] -->            .join(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", d =&gt; d.x0 + (d.x1 - d.x0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", d =&gt; d.y0 + (d.y1 - d.y0) \/ 2)<!-- [et_pb_line_break_holder] -->            .attr(\"font-size\", \"16px\")<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .attr(\"text-anchor\", \"middle\")<!-- [et_pb_line_break_holder] -->            .attr(\"dy\", \".35em\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.data.value.toFixed(2) + \"%\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Zeichne die Legende unterhalb des Tree Maps<!-- [et_pb_line_break_holder] -->        const legendGroup_medis = treeSvg_medis.append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"class\", \"legend-group\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", `translate(20, ${treeHeight_medis + treeMargin_medis.top + 20})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const legendItems_medis = legendGroup_medis.selectAll(\"g\")<!-- [et_pb_line_break_holder] -->            .data(treeData_medis)<!-- [et_pb_line_break_holder] -->            .enter()<!-- [et_pb_line_break_holder] -->            .append(\"g\")<!-- [et_pb_line_break_holder] -->            .attr(\"transform\", (d, i) =&gt; `translate(0, ${i * legendItemHeight_medis})`);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Rechteck f\u00fcr die Farben in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_medis.append(\"rect\")<!-- [et_pb_line_break_holder] -->            .attr(\"width\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"height\", 15)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", (d, i) =&gt; treeMapColors_medis[i % treeMapColors_medis.length]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Text in der Legende<!-- [et_pb_line_break_holder] -->        legendItems_medis.append(\"text\")<!-- [et_pb_line_break_holder] -->            .attr(\"x\", 20)<!-- [et_pb_line_break_holder] -->            .attr(\"y\", 12)<!-- [et_pb_line_break_holder] -->            .attr(\"fill\", \"black\")<!-- [et_pb_line_break_holder] -->            .style(\"font-size\", \"12px\")<!-- [et_pb_line_break_holder] -->            .text(d =&gt; d.name);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Initiales Zeichnen des Tree Maps<!-- [et_pb_line_break_holder] -->    drawTreeMapMedis();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Zeichne das Tree Map neu, wenn das Fenster neu dimensioniert wird<!-- [et_pb_line_break_holder] -->    window.addEventListener(\"resize\", drawTreeMapMedis);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]","protected":false},"excerpt":{"rendered":"<p>Panel pacjenta 2025Panel zespo\u0142u diabetologicznego 2025Panel zespo\u0142u diabetologicznegoPanel lekarzy Pr\u00f3bka NiemcyPr\u00f3bka AustriaPr\u00f3bka SzwajcariaPlac\u00f3wki diabetologiczneObszary tematyczneNastawienie do digitalizacjiSystemy AIDCGMSzkolenia wideo onlineSztuczna inteligencjaWskazania do CGMPanel pacjenta<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":3,"footnotes":""},"class_list":["post-1491","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/comments?post=1491"}],"version-history":[{"count":2,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1491\/revisions"}],"predecessor-version":[{"id":1495,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1491\/revisions\/1495"}],"wp:attachment":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/media?parent=1491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}