{"id":1426,"date":"2024-05-01T10:48:32","date_gmt":"2024-05-01T08:48:32","guid":{"rendered":"https:\/\/dt-report.de\/panel-de-control-medicos\/"},"modified":"2025-11-05T14:51:36","modified_gmt":"2025-11-05T13:51:36","slug":"panel-de-control-medicos","status":"publish","type":"page","link":"https:\/\/dt-report.de\/en\/panel-de-control\/panel-de-control-medicos\/?lang=es","title":{"rendered":"Panel de control &#8211; M\u00e9dicos"},"content":{"rendered":"[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; 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; _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; _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; _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; _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; _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; _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; _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; _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; _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; _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; _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]","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":1544,"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":0,"footnotes":""},"class_list":["post-1426","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1426","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/comments?post=1426"}],"version-history":[{"count":6,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1426\/revisions"}],"predecessor-version":[{"id":1471,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1426\/revisions\/1471"}],"up":[{"embeddable":true,"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/pages\/1544"}],"wp:attachment":[{"href":"https:\/\/dt-report.de\/en\/wp-json\/wp\/v2\/media?parent=1426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}