{"id":1544,"date":"2024-05-02T18:51:59","date_gmt":"2024-05-02T16:51:59","guid":{"rendered":"https:\/\/dt-report.de\/panel-de-control\/"},"modified":"2025-11-05T14:51:48","modified_gmt":"2025-11-05T13:51:48","slug":"panel-de-control","status":"publish","type":"page","link":"https:\/\/dt-report.de\/en\/panel-de-control\/?lang=es","title":{"rendered":"Panel de control"},"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 de control&#8221; button_one_text=&#8221;Panel de control de pacientes&#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 de control del equipo de diabetes&#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 de control de pacientes 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 de control del equipo de diabetes 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;m\u00e9dicos&#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 de control del equipo de diabetes<\/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 de control de m\u00e9dicos<\/h2>\n<p><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#stichprobedeutschland\">Muestra Alemania<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#stichprobeoesterreich\">Muestra Austria<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#stichprobeschweiz\">Muestra Suiza<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#diabetologischeeinrichtungen\">Centros de diabetolog\u00eda<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#themenfelder\">\u00c1reas tem\u00e1ticas<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#einstellungenzurdigitalisierung\">Actitudes ante la digitalizaci\u00f3n<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#aidsysteme\">Sistemas AID<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#cgm\">CGM<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#onlinevideoschulungen\">Formaci\u00f3n en v\u00eddeo online<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#ki\">Inteligencia artificial<\/a><br><a href=\"https:\/\/dt-report.de\/en\/es\/panel-de-control\/#indikationenvoncgm\">Indicaciones de 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 Muestra 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>Muestra Alemania<\/h2><!-- [et_pb_line_break_holder] --><h3>Origen<\/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 Muestra D Formaci\u00f3n adicional&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Formaci\u00f3n adicional Alemania<\/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 Muestra 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>Muestra Austria<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Origen<\/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 Muestra 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>Muestra Suiza<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Origen<\/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 Muestra CH Formaci\u00f3n adicional&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Formaci\u00f3n adicional Suiza<\/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 Centros Forma de consulta&#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>Centros de diabetolog\u00eda<\/h2><!-- [et_pb_line_break_holder] --><h3>Forma de consulta del centro de diabetolog\u00eda<\/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 Centros Equipamiento&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Equipamiento del centro de diabetolog\u00eda<\/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 Centros Tipo&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Tipo de centro de diabetolog\u00eda<\/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 \u00c1reas tem\u00e1ticas&#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>\u00c1reas tem\u00e1ticas<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>\u00c1reas tem\u00e1ticas m\u00e1s importantes de la digitalizaci\u00f3n y las tecnolog\u00edas modernas para la diabetes<\/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 Actitud ante la digitalizaci\u00f3n&#8221; module_id=&#8221;einstellungenzurdigitalisierung&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Actitudes ante la digitalizaci\u00f3n<\/h2><!-- [et_pb_line_break_holder] --><h3>Actitud ante la digitalizaci\u00f3n en diabetolog\u00eda<\/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 Cargas de la diabetes &#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>Cargas de la diabetes debidas a las tecnolog\u00edas modernas<\/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 Razones de las cargas&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Razones de las cargas debidas a las nuevas tecnolog\u00edas<\/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 Importancia de 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>Sistemas AID<\/h2><!-- [et_pb_line_break_holder] --><h3 style=\"text-align: left;\">Importancia de los sistemas 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 % en 5 a\u00f1os&#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>Uso de un sistema AID en 5 a\u00f1os<\/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 Reacciones de los pacientes&#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>Reacciones de los pacientes al uso de 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 Importancia de CGM Obesidad&#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>Importancia de CGM para la prevenci\u00f3n de la obesidad<\/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 Importancia de CGM Tipo 2&#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>Importancia de CGM para la prevenci\u00f3n de la diabetes tipo 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 Importancia de las videoconsultas 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] --> Videoconsultas 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>Importancia de las videoconsultas 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 Uso de videoconsultas 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>Uso de videoconsultas 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 IA&#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>Inteligencia artificial<\/h2><!-- [et_pb_line_break_holder] --><!-- Diagrammtitel --><!-- [et_pb_line_break_holder] --><h3>Futuros campos de aplicaci\u00f3n de la IA<\/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>Indicaciones de CGM<\/h2><!-- [et_pb_line_break_holder] --><h3>\u00bfQu\u00e9 porcentaje de personas con diabetes son aptas para un sistema 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;pacientes1&#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 de control de pacientes<\/h2>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Muestra&#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;Edad&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Muestra<\/h2><!-- [et_pb_line_break_holder] --><h4>57 Edad (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. Origen de los participantes (gr\u00e1fico circular)&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Origen de los participantes<\/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. Sexo de los participantes (gr\u00e1fico circular)&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Sexo de los participantes<\/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;Muestra Diabetes&#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;tipo de diabetes&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h3>Distribuci\u00f3n del tipo de diabetes<\/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;compromiso&#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>Compromiso de los participantes<\/h2><!-- [et_pb_line_break_holder] --><h3>Tipos de compromiso<\/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;Duraci\u00f3n&#8221; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<h2>Duraci\u00f3n y frecuencia de la diabetes<\/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 Tecnolog\u00edas para la diabetes&#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>Tecnolog\u00edas para la diabetes<\/h2><!-- [et_pb_line_break_holder] --><h3>Uso de tecnolog\u00edas para la diabetes<\/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;actitudes hacia la diabetes&#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>Actitud hacia la digitalizaci\u00f3n<\/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;carga relacionada con la diabetes&#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>Cargas relacionadas con la diabetes por la tecnolog\u00eda para la diabetes<\/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;\u00c1reas tem\u00e1ticas de la digitalizaci\u00f3n&#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>\u00c1reas tem\u00e1ticas de la digitalizaci\u00f3n<\/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;Importancia de la 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: Importancia<\/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 antes de la 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;Impacto de la 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: Impacto<\/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;bol\u00edgrafos inteligentes&#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>Plumas inteligentes de insulina<\/h2><!-- [et_pb_line_break_holder] --><h3>Barreras para el uso de plumas inteligentes<\/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;\">Importancia de las plumas inteligentes de insulina<\/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 Medicamentos para adelgazar&#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>Medicamentos para adelgazar<\/h2><!-- [et_pb_line_break_holder] --><h3 style=\"text-align: left;\">Importancia de los medicamentos para adelgazar<\/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>Ya ha o\u00eddo hablar de medicamentos para la p\u00e9rdida de peso:<\/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>Actitud hacia los medicamentos para la p\u00e9rdida de peso<\/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 de control de pacientes 2025Panel de control del equipo de diabetes 2025Panel de control del equipo de diabetesPanel de control de m\u00e9dicos Muestra AlemaniaMuestra AustriaMuestra SuizaCentros de diabetolog\u00eda\u00c1reas tem\u00e1ticasActitudes ante la digitalizaci\u00f3nSistemas AIDCGMFormaci\u00f3n en v\u00eddeo onlineInteligencia artificialIndicaciones de CGMPanel de control de pacientes<\/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":6,"footnotes":""},"class_list":["post-1544","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1544","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=1544"}],"version-history":[{"count":2,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1544\/revisions"}],"predecessor-version":[{"id":1549,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1544\/revisions\/1549"}],"wp:attachment":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/media?parent=1544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}