29:null 2a:["$","title",null,{"children":"Prevalence of depression | KielSCN Spektrum Living Lab | Observable"}] 2f:T5bfe,viewof chart = { const params = new URLSearchParams(window.location.search); const s = params.get("s"); const b = params.get("b"); /* console.log("URL Parameter", params); console.log("S", s); console.log("B", b); */ // Define margins and initial yOffset for the first facet var yOffset = SVG_MARGIN.top; // Create the SVG element and set its width and height const svgSelection = d3 .create("svg") .attr("id", "pod-chart") .attr("width", SVG_WIDTH) .attr("height", SVG_HEIGHT) /* .attr("viewBox", `0 0 640 880`) */ .attr("style", `max-width: 100%; height: auto;`) .style("font", "16px filosofia"); const svg = svgSelection.node(); const defs = svgSelection.append("defs"); let pElement; svg.value = { currentIndex: 0, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" } }; /* svgSelection.style("background-color", () => getBgColor(svg)); */ // Define gradient const gradient = defs .append("linearGradient") .attr("id", "fadeGradient") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "100%") .selectAll("stop") .data([ { offset: calcStopPercentage(SVG_HEIGHT - IMG_HEIGHT, SVG_HEIGHT), color: getBgColor(svg), opacity: 1 }, { offset: calcStopPercentage( SVG_HEIGHT - IMG_HEIGHT + GRADIENT_SIZE, SVG_HEIGHT ), color: getBgColor(svg), opacity: 0 } ]) .enter() .append("stop") .attr("offset", (d) => `${d.offset}%`) .attr("stop-color", (d) => d.color) .attr("stop-opacity", (d) => d.opacity); if (bgImage !== "b0") { // Image setup const imageGroup = svgSelection.append("g").attr("id", "imageGroup"); ["currentImage", "nextImage"].forEach((id) => imageGroup .append("image") .attr("id", id) /* .attr( "xlink:href", `https://res.cloudinary.com/dt2gsbmrj/image/upload/w_${IMG_WIDTH}/q_auto:best/f_auto/2023_12_15_a/T_TOTAL_TOTAL_EU27_2020.png` ) */ .attr( "xlink:href", `https://www.spektrum.de/pix/interactive/kielscn_depression/T_TOTAL_TOTAL_EU27_2020.png` ) .attr("width", IMG_WIDTH) .attr("height", IMG_HEIGHT) .attr("y", SVG_HEIGHT - IMG_HEIGHT) ); // Setup fading background imageGroup .append("rect") .attr("width", SVG_WIDTH) .attr("height", SVG_HEIGHT) .style("fill", "url(#fadeGradient)"); } if (bgImage === "b0") { svgSelection .append("rect") .attr("width", SVG_WIDTH) .attr("height", SVG_HEIGHT) .attr("fill", () => getBgColor(svg)); } if (isMobile) { // If it doesn't exist, create it pElement = svgSelection .append("text") .attr("class", "prevalence") .attr("x", SVG_WIDTH / 2) .attr("y", SVG_HEIGHT - IMG_HEIGHT) .attr("dx", "0px") .attr("dy", "36px") .attr("text-anchor", "middle"); } const foreignObject = svgSelection .append("foreignObject") .attr("x", 0) .attr("y", 0) .attr("width", "100%") .attr("height", "100%"); const container = foreignObject.append("xhtml:div").attr("id", "container"); const header = container.append("xhtml:div").attr("id", "header"); const title = header .append("xthml:h1") .attr("id", "title") .html(() => init_i18n.t(`headlines.p${svg.value.currentIndex}`, { lng: language }) ); if (!isMobile) { const paginationControls = header .append("xhtml:div") .attr("id", "paginationControls"); paginationControls .append("button") .attr("id", "prevButton") .attr("class", "button-pagina") .html("<"); paginationControls .append("span") .attr("id", "pageIndex") .text(`${svg.value.currentIndex + 1} / ${paragraphsLength}`); paginationControls .append("button") .attr("id", "nextButton") .attr("class", "button-pagina") .html(">"); } container .append("xhtml:p") .attr("id", "textContainer") .attr("lang", language) .html(() => getContentForDisplay(svg.value.currentIndex)); const dropdownContainer = foreignObject .append("xhtml:div") .attr("id", "dropdownContainer"); if (isMobile) { const paginationControls = foreignObject .append("xhtml:div") .attr("id", "paginationControls"); paginationControls .append("button") .attr("id", "prevButton") .attr("class", "button-pagina") .style("position", "absolute") .style("bottom", SVG_MARGIN.bottom + "px") .style("left", "0px") .style("background", COLOR_PRIMARY) .style("color", "white") .style("padding", "0") .style("width", "34px") .style("height", "40px") .style("border-radius", `0 ${CORNER_RADIUS}px ${CORNER_RADIUS}px 0`) .style("box-shadow", "0px 0px 10px -5px rgba(0, 0, 0, 0.75)") .html("<"); /* paginationControls .append("span") .attr("id", "pageIndex") .text(`${svg.value.currentIndex + 1} / ${paragraphsLength}`); */ paginationControls .append("button") .attr("id", "nextButton") .attr("class", "button-pagina") .style("position", "absolute") .style("bottom", SVG_MARGIN.bottom + "px") .style("right", "0px") .style("background", COLOR_PRIMARY) .style("color", "white") .style("padding", "0") .style("width", "34px") .style("height", "40px") .style("border-radius", `${CORNER_RADIUS}px 0 0 ${CORNER_RADIUS}px`) .style("box-shadow", "0px 0px 10px -5px rgba(0, 0, 0, 0.75)") .html(">"); } svgSelection .append("rect") .attr("class", "indicator-background") .attr("width", SVG_WIDTH) .attr("height", 4) .attr("fill", COLOR_TERTIARY) .style("mix-blend-mode", "multiply"); // Group for each page indicator const pageIndicator = svgSelection .selectAll(".page-indicator") .data(d3.range(paragraphsLength)) .enter() .append("g") .attr("transform", (d) => `translate(${xPage(d)}, 0)`); // Function to set common rectangle attributes const setRectAttributes = (rect, width, height, fill) => { rect.attr("width", width).attr("height", height).attr("fill", fill); }; // Drawing the visible line rectangles pageIndicator .append("rect") .attr("class", "visible-rect") .call(setRectAttributes, xPage.bandwidth(), 4, "transparent") .style("mix-blend-mode", "multiply"); // Adding invisible larger rectangles for mouse events pageIndicator .append("rect") .attr("class", "invisible-rect") .call(setRectAttributes, xPage.bandwidth(), 30, "transparent") .on("mouseover", mouseOver) .on("mouseout", mouseOut) .on("click", (event, d) => updatePage(d)); // Event handlers for mouseover and mouseout function mouseOver() { d3.select(this).style("cursor", "pointer"); d3.select(this.parentNode) .select(".visible-rect") .attr("fill", COLOR_SECONDARY); } function mouseOut() { d3.select(this.parentNode) .select(".visible-rect") .attr("fill", "transparent"); } // Page Indicator const currentPageIndicator = svgSelection .append("rect") .call(setRectAttributes, xPage.bandwidth(), 4, COLOR_PRIMARY) .attr("x", xPage(svg.value.currentIndex)); // Function to update the position of the current page indicator function updateIndicatorState() { currentPageIndicator .transition() .delay(750) .duration(750) .attr("x", xPage(svg.value.currentIndex)); } function updatePage(index) { // Switch between the selection sources const baseLength = Object.keys(contentBase).length; if (index < baseLength) { svg.value.selection = { ...contentBase[`p${index}`].selection }; } else { svg.value.selection = { ...contentDiff[version][`p${index}`].selection }; } svg.value.currentIndex = index; svg.dispatchEvent(new CustomEvent("input")); updatePageContent(index); updateButtonStates(); updateIndicatorState(); } function setupButtonHandler(buttonId, indexChange) { d3.select(buttonId).on("click", function () { const newIndex = indexChange === "next" ? Math.min(paragraphsLength - 1, svg.value.currentIndex + 1) : Math.max(0, svg.value.currentIndex - 1); updatePage(newIndex); }); } function updateButtonStates() { d3.select("#prevButton").property("disabled", svg.value.currentIndex === 0); d3.select("#nextButton").property( "disabled", svg.value.currentIndex === paragraphsLength - 1 ); } setTimeout(() => { // Setup handlers setupButtonHandler("#prevButton", "prev"); setupButtonHandler("#nextButton", "next"); // Initial button state update updateButtonStates(); }, 0); // Define the clip path with rounded corners defs .append("clipPath") .attr("id", "rounded-corner-clip") .append("rect") .attr("width", BAR_WIDTH) .attr("height", BAR_HEIGHT) .attr("rx", CORNER_RADIUS) // Apply corner radius here .attr("ry", CORNER_RADIUS); let context = { updatePageContent, updateButtonStates, updateIndicatorState, svg }; /* updatePageContent(); */ updatePageContent(svg.value.currentIndex); /* -------------------------*/ function update(data) { if (bgImage === "b2") fetchNewImageUrl(svg).then((newImageUrl) => { transitionImages(newImageUrl, getBgColor(svg), gradient); }); highlightSelected(svg); /* applyDataSelection(); */ // sort data data.sort(function (b, a) { return a.Value - b.Value; }); /* -------------------------------------------------------------------------- */ if (isMobile) { container.style("padding-top", "32px"); d3.select("#textContainer").style("column-count", 1); header.style("flex-direction", "column-reverse"); /* dropdownContainer.style("margin", "0 16px 0 16px"); */ /* paginationControls.style("display", "none"); */ title .style("font-size", "20px") .style("line-height", "1.1") .style("font-weight", "bold"); pElement .transition() .duration(750) .textTween(function () { const previous = parseFloat(this.textContent) || 0; const current = hlth_ehis_cd1e_linear.filter( (d) => d.sex === svg.value.selection.sex && d.isced11 === svg.value.selection.isced11 && d.age === svg.value.selection.age && d.geo === svg.value.selection.geo ) || 0; return (t) => d3.interpolateNumber(previous, current[0].OBS_VALUE)(t).toFixed(1) + " %"; }); const catDropdowns = dropdownContainer .selectAll(".dropdown") .data(data, (d) => d[0]) .join("xhtml:div") .attr("class", "dropdown") .attr("id", (d) => d[0]); const dropdownToggle = catDropdowns .selectAll(".dropdown-toggle") .data( (d) => [d[0]], (d) => d[0] ) .join("xhtml:button") .attr("class", "dropdown-toggle") .attr("type", "button") .attr("aria-haspopup", "true") .text((d) => { const firstPart = init_i18n.t(`abbr.${d}_${d}`, { lng: language }); const secondPart = d === "geo" ? init_i18n.t(`abbr.${d}_${svg.value.selection[d]}`, { lng: language }) : init_i18n .t(`abbr.${d}_${svg.value.selection[d]}`, { lng: language }) .toLowerCase(); return `${firstPart}: ${secondPart}`; }); const dropdownMenu = catDropdowns .selectAll(".dropdown-menu") .data( (d) => [d[1]], (d) => [d[0]] ) .join("xhtml:ul") .attr("class", "dropdown-menu") .attr("type", "listbox") .attr("aria-expanded", "false") .style("background", () => d3.color(getBgColor(svg)).brighter(0.1).formatHex() ); const options = dropdownMenu .selectAll(".options") .data( (d) => d, (d) => d.datasetName ) .join("xhtml:li") .attr("class", "options") .attr("role", "option") .attr("tabindex", "0"); /* .text((d) => init_i18n.t(`abbr.${d.datasetName}`, { lng: language })) */ /* options .selectAll(".progress") .data((d) => [d]) .join( (enter) => enter .append("xhtml:progress") .attr("class", "progress") .attr("value", (d) => d.obsValue) .attr("id", (d) => d.category + "_" + d.datasetName) .attr("max", 100) .attr("aria-label", (d) => d.obsValue) .attr("role", "progressbar"), (update) => update .attr("value", (d) => d.obsValue) .attr("aria-label", (d) => d.obsValue), (exit) => exit.remove() ); */ options .selectAll(".progress") .data((d) => [d]) .join( (enter) => enter .append("xhtml:div") .attr("class", "progress") .style( "width", (d) => xMobile(d.obsValue !== null ? d.obsValue : 0) + "px" ) .attr("id", (d) => d.category + "_" + d.datasetName) .attr("aria-label", (d) => (d.obsValue !== null ? d.obsValue : 0)) .attr("role", "progressbar"), (update) => update .style( "width", (d) => xMobile(d.obsValue !== null ? d.obsValue : 0) + "px" ) .attr("aria-label", (d) => d.obsValue !== null ? d.obsValue : 0 ), (exit) => exit.remove() ); options .selectAll(".label") .data((d) => [d]) .join( (enter) => enter .append("xhtml:label") .attr("class", "label") .attr("for", (d) => d.category + "_" + d.datasetName) .text((d) => init_i18n.t(`abbr.${d.category}_${d.datasetName}`, { lng: language }) ) .style("opacity", (d) => (d.obsValue === null ? 0.3 : 1)), (update) => update.style("opacity", (d) => (d.obsValue === null ? 0.3 : 1)), (exit) => exit.remove() ); options .selectAll(".value") .data( (d) => [d], (d) => d.datasetName ) .join( (enter) => enter .append("xhtml:span") .attr("class", "value") .call(configureTextAttributes) .style( "left", (d) => xMobile(d.obsValue !== null ? d.obsValue : 0) + 8 + "px" ) .style("opacity", (d) => (d.obsValue === null ? 0 : 1)) .text((d) => d.obsValue !== null ? d.obsValue.toFixed(1) + " %" : "" ), (update) => update .style("opacity", (d) => (d.obsValue === null ? 0 : 1)) .style( "left", (d) => xMobile(d.obsValue !== null ? d.obsValue : 0) + 8 + "px" ) .text((d) => d.obsValue !== null ? d.obsValue.toFixed(1) + " %" : "" ), (exit) => exit.remove() ); options .selectAll(".no-data") .data( (d) => [d], (d) => d.datasetName ) .join( (enter) => enter .append("xhtml:span") .attr("class", "no-data") .call(configureTextAttributes) .style("opacity", (d) => (d.obsValue !== null ? 0 : 1)) .text(init_i18n.t("noData", { lng: language })), (update) => update.style("opacity", (d) => (d.obsValue !== null ? 0 : 0.3)), (exit) => exit.remove() ); let additionalText = init_i18n.t("summary", { lng: language }) + "
"; initializeDropDowns(catDropdowns, context); highlightDropdown(svg.value.currentIndex); } /* -------------------------------------------------------------------------- */ if (!isMobile) { // Bind categories to 'cat-group' elements, create or update these groups with IDs from data. const catGroups = svgSelection .selectAll(".cat-group") .data(data, (d) => d[0]) .join("g") .attr("class", "cat-group") .attr("font-family", "filosofia-all-small-caps, serif") /* .style("letter-spacing", "0.1em") */ .attr("id", (d) => d[0]) .style("mix-blend-mode", "multiply") .style("opacity", (d) => isHighlight("category", d[0], svg.value.currentIndex) ? 1 : 0.5 ); // Create text elements within each category group, setting their class, position, and localized content. const catText = catGroups .selectAll(".cat-name") .data((d) => [d[0]]) .join("text") .attr("class", "cat-name") .text((d) => init_i18n.t(`abbr.${d}_${d}`, { lng: language })) .attr("dy", -BAR_HEIGHT / 2) .attr("dx", 4) /* .attr("transform", (d, i) => createTransform(d, 0, x0)); */ .attr("transform", (d, i) => getPositionForCategoryItem(d, 0, 17, 3, x0) ); // Bind data to 'b-group' elements, handling enter/update with transformations, styling, and click events. const bGroups = catGroups .selectAll(".b-group") .data( (d) => d[1], (d) => d.datasetName ) .join( (enter) => enter .append("g") .attr("class", "b-group") /* .attr("transform", (d, i) => createTransform(d.category, i, x0) ) */ .attr("transform", (d, i) => getPositionForCategoryItem(d.category, i, 17, 3, x0) ) .attr("clip-path", "url(#rounded-corner-clip)") .style("cursor", "pointer") .on("click", (event, d) => handleClickExternal(d.category, d.datasetName, context) ), (update) => update .transition() .delay(750) .duration(750) /* .attr("transform", (d, i) => createTransform(d.category, i, x0) ) */ .attr("transform", (d, i) => getPositionForCategoryItem(d.category, i, 17, 3, x0) ) ); bGroups .selectAll(".barBg") .data((d) => [d]) // There's one rectangle per data point, so wrap 'd' in an array .join("rect") .attr("class", "barBg") .attr("width", BAR_WIDTH) .attr("height", BAR_HEIGHT) .attr("fill", COLOR_TERTIARY); bGroups .selectAll(".barValue") .data((d) => [d]) .join( (enter) => enter .append("text") .attr("class", "barValue") .call(configureTextAttributes) /* .attr("font-size", "10px") */ .attr("x", (d) => x1(d.obsValue)) .attr("opacity", (d) => d.obsValue === null ? 0 : isHighlight("item", d.datasetName, svg.value.currentIndex) ? 1 : 0.3 ) .text((d) => d.obsValue.toFixed(1) + " %"), (update) => update .transition() .duration(750) .attr("x", (d) => x1(d.obsValue !== null ? d.obsValue : 0)) .textTween(textTween) /* .transition() .duration(750) */ .attr("opacity", (d) => d.obsValue === null ? 0 : isHighlight("item", d.datasetName, svg.value.currentIndex) ? 1 : 0.3 ), (exit) => exit.remove() ); bGroups .selectAll(".barNoData") .data((d) => [d]) .join( (enter) => enter .append("text") .attr("class", "barNoData") .call(configureTextAttributes) .attr("font-family", "filosofia") .attr("font-size", "14px") .attr("x", (d) => x1(d.obsValue)) .attr("opacity", (d) => (d.obsValue !== null ? 0 : 1)) .text(init_i18n.t("noData", { lng: language })), (update) => update .transition() /* .delay(750) */ .duration(750) .attr("x", (d) => x1(d.obsValue !== null ? d.obsValue : 0)) .attr("opacity", (d) => (d.obsValue !== null ? 0 : 0.3)), (exit) => exit.remove() ); bGroups .selectAll(".barName") .data((d) => [d]) .join( (enter) => enter .append("text") .attr("class", "barName") .style("color", "white") /* .style("transition", "750") */ .text((d) => init_i18n.t(`abbr.${d.category}_${d.datasetName}`, { lng: language }) ) .attr("opacity", (d) => d.obsValue === null ? 0.3 : isHighlight("item", d.datasetName, svg.value.currentIndex) ? 1 : 0.3 ), (update) => update .transition() /* .delay(750) */ .duration(750) .attr("opacity", (d) => d.obsValue === null ? 0.3 : isHighlight("item", d.datasetName, svg.value.currentIndex) ? 1 : 0.3 ), (exit) => exit.remove() ) .attr("x", BAR_WIDTH) .attr("y", BAR_HEIGHT / 2) .attr("dx", -12) .attr("text-anchor", "end") .attr("font-family", "filosofia") .attr("dominant-baseline", "middle") .attr("font-size", "14px") .attr("font-weight", "normal") .attr("fill", "black"); bGroups .selectAll(".bar") .data((d) => [d]) .join( (enter) => enter .append("rect") .attr("class", "bar") .attr("width", (d) => x1(d.obsValue)), (update) => update .transition() .duration(750) .attr("width", (d) => x1(d.obsValue !== null ? d.obsValue : 0)), (exit) => exit.remove() ) .attr("height", BAR_HEIGHT) .attr("fill", COLOR_SECONDARY) .style("mix-blend-mode", "multiply"); } } svg.update = update; // Return the SVG node to render it in the notebook return svg; }30:T15e4,31:T962,function DropDown(dropDown, context) { const [toggler, menu] = dropDown.children; const handleClickOut = (e) => { if (!dropDown) { return document.removeEventListener("click", handleClickOut); } if (!dropDown.contains(e.target)) { this.toggle(false); } }; const setValue = (item) => { const val = item.textContent; const category = d3.select(item).datum().category; const name = d3.select(item).datum().datasetName; handleClickExternal(category, name, context); toggler.textContent = val; this.value = d3.select(item).datum().datasetName; this.toggle(false); dropDown.dispatchEvent(new Event("change"), { bubbles: true }); toggler.focus(); }; const handleItemKeyDown = (e) => { e.preventDefault(); if (e.keyCode === 38 && e.target.previousElementSibling) { // up e.target.previousElementSibling.focus(); } else if (e.keyCode === 40 && e.target.nextElementSibling) { // down e.target.nextElementSibling.focus(); } else if (e.keyCode === 27) { // escape key this.toggle(false); } else if (e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key setValue(e.target); } }; const handleToggleKeyPress = (e) => { e.preventDefault(); if (e.keyCode === 27) { // escape key this.toggle(false); } else if (e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key this.toggle(true); } }; toggler.addEventListener("keydown", handleToggleKeyPress); toggler.addEventListener("click", () => this.toggle()); [...menu.children].forEach((item) => { item.addEventListener("keydown", handleItemKeyDown); item.addEventListener("click", () => setValue(item)); }); this.element = dropDown; this.value = toggler.textContent; this.toggle = (expand = null) => { expand = expand === null ? menu.getAttribute("aria-expanded") !== "true" : expand; menu.setAttribute("aria-expanded", expand); if (expand) { toggler.classList.add("active"); menu.children[0].focus(); document.addEventListener("click", handleClickOut); dropDown.dispatchEvent(new Event("opened")); } else { toggler.classList.remove("active"); dropDown.dispatchEvent(new Event("closed")); document.removeEventListener("click", handleClickOut); } }; }32:T4d4,function transitionImages(newImageUrl, newBgColor, gradient) { // Update the gradient to match the new background color d3.selectAll("stop") .transition() .delay(750) .duration(750) .attr("stop-color", newBgColor); // Set the new image URL to nextImage but keep it invisible d3.select("#nextImage").attr("xlink:href", newImageUrl).style("opacity", 0); // After a delay, transition nextImage to visible d3.select("#nextImage") .transition() .delay(750) .duration(750) .style("opacity", 1) .on("end", () => { // After nextImage is fully visible, update currentImage with new URL d3.select("#currentImage") .attr("xlink:href", newImageUrl) .style("opacity", 0); // Introduce a slight delay before making currentImage visible // This allows time for the image to load and render, reducing flicker setTimeout(() => { d3.select("#currentImage").style("opacity", 1); // Reset nextImage's opacity after a slight delay setTimeout(() => { d3.select("#nextImage").style("opacity", 0); }, 50); // Delay for resetting nextImage's opacity }, 50); // Delay for updating currentImage's visibility }); }33:T88f,function updatePageContent(index) { const title = d3.select("#title"); const textContainer = d3.select("#textContainer"); d3.select("#pageIndex").text(`${index + 1} / ${paragraphsLength}`); const containerElement = d3.select("#container").node(); if (containerElement) { const currentContainerHeight = containerElement.getBoundingClientRect().height; // Fade out the current title title .transition() .duration(750) .style("opacity", 0) .on("end", () => { // Update the text content to the new paragraph title.html(() => init_i18n.t(`headlines.p${index}`, { lng: language }) ); // Fade in the new text title .transition() .duration(750) .style("opacity", 1) .on("end", () => { // Call applyDataSelection after the new text has faded in applyDataSelection(); }); }); // Fade out the current text textContainer .transition() .duration(750) .style("opacity", 0) .on("end", () => { // Update the text content to the new paragraph textContainer.html(() => getContentForDisplay(index)); if (d3.select("#container").node()) { // Measure the new container height after the transition const nextContainerHeight = d3 .select("#container") .node() .getBoundingClientRect().height; const dy = currentContainerHeight - nextContainerHeight; const dropdownContainer = d3 .select("#dropdownContainer") .style("position", "absolute") .style("transform", `translateY(${dy}px)`) .transition() .duration(750) .style("transform", "translateY(0)") .style("position", "static"); } // Fade in the new text textContainer .transition() .duration(750) .style("opacity", 1) .on("end", () => { // Call applyDataSelection after the new text has faded in applyDataSelection(); }); }); } }34:Tf4b,bgColors = ({ "T_ED5-8_Y_GE75_EU27_2020": "#E8E8E8", "M_ED3_4_Y45-54_EU27_2020": "#9DA4A6", "T_ED0-2_Y_GE75_EU27_2020": "#F6F7F7", "F_ED5-8_Y15-24_EU27_2020": "#DCDDD6", "T_ED3_4_Y35-44_EU27_2020": "#AEB3B5", "F_ED0-2_Y15-24_EU27_2020": "#AFB1AD", "F_TOTAL_Y65-74_EU27_2020": "#C5C6C5", "T_ED5-8_Y65-74_EU27_2020": "#E5E7E4", F_TOTAL_Y_GE75_EU27_2020: "#F1F2F2", F_TOTAL_TOTAL_EU27_2020: "#DCDDDD", "F_ED3_4_Y55-64_EU27_2020": "#B7B9B4", "T_TOTAL_Y55-64_EU27_2020": "#DDDFE1", "M_TOTAL_Y55-64_EU27_2020": "#C7CCCF", "M_ED0-2_Y_GE75_EU27_2020": "#EFF0F2", "F_TOTAL_Y55-64_EU27_2020": "#EBEBE9", "F_ED0-2_Y25-34_EU27_2020": "#B7BDC1", "T_ED3_4_Y45-54_EU27_2020": "#C2C7C8", "M_ED3_4_Y35-44_EU27_2020": "#C5C6C1", "M_ED5-8_Y65-74_EU27_2020": "#E7E8E3", "T_ED0-2_Y65-74_EU27_2020": "#DEE0DD", "M_ED5-8_TOTAL_EU27_2020": "#C7CBCE", "T_ED0-2_TOTAL_EU27_2020": "#D2D3CE", "M_ED0-2_Y15-24_EU27_2020": "#C7C7C5", "F_ED5-8_Y_GE75_EU27_2020": "#CFCFCA", "F_ED3_4_Y45-54_EU27_2020": "#B1B7B8", "M_TOTAL_Y45-54_EU27_2020": "#B4B9BA", "T_ED5-8_Y55-64_EU27_2020": "#CCCFCE", "T_TOTAL_Y65-74_EU27_2020": "#D2D2CD", "F_ED3_4_Y35-44_EU27_2020": "#C9CDC7", M_ED3_4_TOTAL_EU27_2020: "#B4B9BC", "T_ED3_4_Y55-64_EU27_2020": "#EBEEEC", "M_ED0-2_Y25-34_EU27_2020": "#C0C4C7", "F_ED0-2_Y_GE75_EU27_2020": "#DEDFDE", "F_ED0-2_Y35-44_EU27_2020": "#A0A3A3", "F_ED0-2_Y65-74_EU27_2020": "#ABB1AC", "F_TOTAL_Y15-24_EU27_2020": "#C4C8CB", T_TOTAL_Y_GE75_EU27_2020: "#EBEEED", "T_TOTAL_Y35-44_EU27_2020": "#A3A59F", M_TOTAL_TOTAL_EU27_2020: "#CFD0CC", "M_ED3_4_Y25-34_EU27_2020": "#B0B4B6", "M_TOTAL_Y35-44_EU27_2020": "#C0C8CB", "M_ED0-2_Y55-64_EU27_2020": "#BDC2C2", "T_ED3_4_Y25-34_EU27_2020": "#BEC2C3", "M_ED3_4_Y55-64_EU27_2020": "#BCC0C2", "F_ED5-8_Y25-34_EU27_2020": "#D0D3D4", "M_TOTAL_Y65-74_EU27_2020": "#C8CCCE", "M_ED5-8_Y15-24_EU27_2020": "#D1D2D2", M_ED3_4_Y_GE75_EU27_2020: "#EBEAE8", "T_ED0-2_Y45-54_EU27_2020": "#C6C7C7", T_ED3_4_TOTAL_EU27_2020: "#C6C7C5", "F_ED3_4_Y65-74_EU27_2020": "#CCCDC8", "T_ED0-2_Y15-24_EU27_2020": "#D8D9D8", "T_ED5-8_TOTAL_EU27_2020": "#A7AEAF", "F_TOTAL_Y45-54_EU27_2020": "#DBDCDB", "T_TOTAL_Y15-24_EU27_2020": "#D0D4D6", "T_ED5-8_Y35-44_EU27_2020": "#ADB3B4", "T_ED0-2_Y35-44_EU27_2020": "#DFE0DA", "M_ED0-2_Y45-54_EU27_2020": "#9C9E9E", T_ED3_4_Y_GE75_EU27_2020: "#F6F7F5", "F_ED3_4_Y15-24_EU27_2020": "#DDDEDD", "M_TOTAL_Y25-34_EU27_2020": "#D3D4D3", "F_ED0-2_Y55-64_EU27_2020": "#9CA4A5", "F_ED5-8_Y45-54_EU27_2020": "#D5D7D8", "M_ED5-8_Y45-54_EU27_2020": "#BEC3C7", "F_TOTAL_Y35-44_EU27_2020": "#C2C4C2", "M_TOTAL_Y15-24_EU27_2020": "#BDC1C2", "T_TOTAL_Y25-34_EU27_2020": "#B6BBBC", "F_ED5-8_Y55-64_EU27_2020": "#E0E1E1", "T_ED5-8_Y25-34_EU27_2020": "#D1D6D7", "M_ED3_4_Y65-74_EU27_2020": "#C9CCCA", "F_TOTAL_Y25-34_EU27_2020": "#DEDEDC", "M_ED5-8_Y35-44_EU27_2020": "#B6BDC2", "T_ED3_4_Y15-24_EU27_2020": "#C3C5C3", "F_ED0-2_TOTAL_EU27_2020": "#BDC7C8", "M_ED0-2_TOTAL_EU27_2020": "#A5AAB1", F_ED3_4_Y_GE75_EU27_2020: "#EAECEE", "M_ED5-8_Y25-34_EU27_2020": "#D6D5D2", "F_ED5-8_Y65-74_EU27_2020": "#DEE0DD", "T_ED0-2_Y55-64_EU27_2020": "#C7C8C4", M_TOTAL_Y_GE75_EU27_2020: "#E5E6E1", "T_ED5-8_Y15-24_EU27_2020": "#C7CCCF", "T_ED0-2_Y25-34_EU27_2020": "#C2C4C1", "T_ED5-8_Y45-54_EU27_2020": "#D4D8D7", "M_ED5-8_Y_GE75_EU27_2020": "#F6F6F7", "F_ED5-8_TOTAL_EU27_2020": "#C2C1B9", "F_ED3_4_Y25-34_EU27_2020": "#ACB1B3", T_TOTAL_TOTAL_EU27_2020: "#D8D9D2", "M_ED0-2_Y35-44_EU27_2020": "#C3C9CD", "M_ED3_4_Y15-24_EU27_2020": "#D4D4D4", "T_TOTAL_Y45-54_EU27_2020": "#B6BBBC", F_ED3_4_TOTAL_EU27_2020: "#A7B1B3", "M_ED5-8_Y55-64_EU27_2020": "#BFC7CB", "F_ED5-8_Y35-44_EU27_2020": "#D7D6D0", "F_ED0-2_Y45-54_EU27_2020": "#A8AEB0", "M_ED0-2_Y65-74_EU27_2020": "#C1C4C5", "T_ED3_4_Y65-74_EU27_2020": "#D7D8D2" })35:Tea9,lookupArray = [ { abbr: "AT", cat: "geo", name_en: "Austria", name_de: "Österreich" }, { abbr: "BE", cat: "geo", name_en: "Belgium", name_de: "Belgien" }, { abbr: "BG", cat: "geo", name_en: "Bulgaria", name_de: "Bulgarien" }, { abbr: "CY", cat: "geo", name_en: "Cyprus", name_de: "Zypern" }, { abbr: "CZ", cat: "geo", name_en: "Czechia", name_de: "Tschechien" }, { abbr: "DE", cat: "geo", name_en: "Germany", name_de: "Deutschland" }, { abbr: "DK", cat: "geo", name_en: "Denmark", name_de: "Dänemark" }, { abbr: "EE", cat: "geo", name_en: "Estonia", name_de: "Estland" }, { abbr: "EL", cat: "geo", name_en: "Greece", name_de: "Griechenland" }, { abbr: "ES", cat: "geo", name_en: "Spain", name_de: "Spanien" }, { abbr: "EU27_2020", cat: "geo", name_en: "all", name_de: "alle" }, { abbr: "FI", cat: "geo", name_en: "Finland", name_de: "Finnland" }, { abbr: "FR", cat: "geo", name_en: "France", name_de: "Frankreich" }, { abbr: "HR", cat: "geo", name_en: "Croatia", name_de: "Kroatien" }, { abbr: "HU", cat: "geo", name_en: "Hungary", name_de: "Ungarn" }, { abbr: "IE", cat: "geo", name_en: "Ireland", name_de: "Irland" }, { abbr: "IS", cat: "geo", name_en: "Iceland", name_de: "Island" }, { abbr: "IT", cat: "geo", name_en: "Italy", name_de: "Italien" }, { abbr: "LT", cat: "geo", name_en: "Lithuania", name_de: "Litauen" }, { abbr: "LU", cat: "geo", name_en: "Luxembourg", name_de: "Luxemburg" }, { abbr: "LV", cat: "geo", name_en: "Latvia", name_de: "Lettland" }, { abbr: "MT", cat: "geo", name_en: "Malta", name_de: "Malta" }, { abbr: "NL", cat: "geo", name_en: "Netherlands", name_de: "Niederlande" }, { abbr: "NO", cat: "geo", name_en: "Norway", name_de: "Norwegen" }, { abbr: "PL", cat: "geo", name_en: "Poland", name_de: "Polen" }, { abbr: "PT", cat: "geo", name_en: "Portugal", name_de: "Portugal" }, { abbr: "RO", cat: "geo", name_en: "Romania", name_de: "Rumänien" }, { abbr: "RS", cat: "geo", name_en: "Serbia", name_de: "Serbien" }, { abbr: "SE", cat: "geo", name_en: "Sweden", name_de: "Schweden" }, { abbr: "SI", cat: "geo", name_en: "Slovenia", name_de: "Slowenien" }, { abbr: "SK", cat: "geo", name_en: "Slovakia", name_de: "Slowakei" }, { abbr: "TR", cat: "geo", name_en: "Turkey", name_de: "Türkei" }, { abbr: "F", cat: "sex", name_en: "Female", name_de: "Weiblich" }, { abbr: "M", cat: "sex", name_en: "Male", name_de: "Männlich" }, { abbr: "T", cat: "sex", name_en: "all", name_de: "alle" }, { abbr: "ED0-2", cat: "isced11", name_en: "Primary", name_de: "Primär" }, { abbr: "ED3_4", cat: "isced11", name_en: "Secondary", name_de: "Sekundär" }, { abbr: "ED5-8", cat: "isced11", name_en: "Tertiary", name_de: "Tertiär" }, { abbr: "TOTAL", cat: "isced11", name_en: "all", name_de: "alle" }, { abbr: "TOTAL", cat: "age", name_en: "all", name_de: "alle" }, { abbr: "Y15-24", cat: "age", name_en: "15 to 24", name_de: "15 bis 24" }, { abbr: "Y25-34", cat: "age", name_en: "25 to 34", name_de: "25 bis 34" }, { abbr: "Y35-44", cat: "age", name_en: "35 to 44", name_de: "35 bis 44" }, { abbr: "Y45-54", cat: "age", name_en: "45 to 54", name_de: "45 bis 54" }, { abbr: "Y55-64", cat: "age", name_en: "55 to 64", name_de: "55 bis 64" }, { abbr: "Y65-74", cat: "age", name_en: "65 to 74", name_de: "65 bis 74" }, { abbr: "Y_GE75", cat: "age", name_en: "from 75", name_de: "ab 75" }, { abbr: "sex", cat: "sex", name_en: "Gender", name_de: "Geschlecht" }, { abbr: "age", cat: "age", name_en: "Age", name_de: "Alter" }, { abbr: "isced11", cat: "isced11", name_en: "Education*", name_de: "Bildung*" }, { abbr: "geo", cat: "geo", name_en: "Country", name_de: "Land" } ]36:T2cf3,contentDiff = ({ s0: { p5: { headline: { de: "Nun sind Sie dran: Entdecken Sie die Grafik selbst!", en: "Now it's your turn: Discover the graphics for yourself!" }, paragraph: { de: "Anleitung: Klicken Sie auf die Schaltflächen, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on the buttons to filter the data according to your characteristics. Each bar shows the depression prevalence depending on your selection for the respective characteristic. For example, to see age differences in Germany, select the button 'Germany' under 'Countries'. Your selection criteria will not be stored by us." }, mobileParagraph: { de: "Anleitung: Klicken Sie auf ein Aufklappmenü und wählen Sie eine Schaltfläche aus, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Alle Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on a drop-down menu and select a button to filter the data according to your characteristics. Each bar shows the frequency of depression for the respective characteristic depending on your selection. For example, for age differences in Germany, select the »Germany« button under »All countries«. Your selection criteria will not be saved by us." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [ ...uniqueValuesByCategory.sex, ...uniqueValuesByCategory.age, ...uniqueValuesByCategory.isced11, ...uniqueValuesByCategory.geo ], highlightsCategory: [] } }, s1: { p5: { headline: { de: "Nun sind Sie dran: Denken Sie an eine Ihnen nahestehende Person und finden Sie die Prävalenz!", en: "Now it's your turn: Think of someone close to you and find the prevalence!" }, paragraph: { de: "Anleitung: Klicken Sie auf die Schaltflächen, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on the buttons to filter the data according to your characteristics. Each bar shows the depression prevalence depending on your selection for the respective characteristic. For example, to see age differences in Germany, select the button 'Germany' under 'Countries'. Your selection criteria will not be stored by us." }, mobileParagraph: { de: "Anleitung: Klicken Sie auf ein Aufklappmenü und wählen Sie eine Schaltfläche aus, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Alle Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on a drop-down menu and select a button to filter the data according to your characteristics. Each bar shows the frequency of depression for the respective characteristic depending on your selection. For example, for age differences in Germany, select the »Germany« button under »All countries«. Your selection criteria will not be saved by us." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [ ...uniqueValuesByCategory.sex, ...uniqueValuesByCategory.age, ...uniqueValuesByCategory.isced11, ...uniqueValuesByCategory.geo ], highlightsCategory: [] }, p6: { headline: { de: "Gibt es Unterschiede zu Ihrer eigenen Gruppe?", en: "Are there differences compared to your own group?" }, paragraph: { de: "Anleitung: Klicken Sie auf die Schaltflächen, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on the buttons to filter the data according to your characteristics. Each bar shows the depression prevalence depending on your selection for the respective characteristic. For example, to see age differences in Germany, select the button 'Germany' under 'Countries'. Your selection criteria will not be stored by us." }, mobileParagraph: { de: "Anleitung: Klicken Sie auf ein Aufklappmenü und wählen Sie eine Schaltfläche aus, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Alle Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on a drop-down menu and select a button to filter the data according to your characteristics. Each bar shows the frequency of depression for the respective characteristic depending on your selection. For example, for age differences in Germany, select the »Germany« button under »All countries«. Your selection criteria will not be saved by us." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [ ...uniqueValuesByCategory.sex, ...uniqueValuesByCategory.age, ...uniqueValuesByCategory.isced11, ...uniqueValuesByCategory.geo ], highlightsCategory: [] } }, s2: { p5: { headline: { de: "Nun sind Sie dran: Wie verändert sich die Prävalenz in den Altersgruppen abhängig vom Land?", en: "Now it's your turn: How does prevalence vary by age group depending on the country?" }, paragraph: { de: "Anleitung: Klicken Sie auf die Schaltflächen, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on the buttons to filter the data according to your characteristics. Each bar shows the depression prevalence depending on your selection for the respective characteristic. For example, to see age differences in Germany, select the button 'Germany' under 'Countries'. Your selection criteria will not be stored by us." }, mobileParagraph: { de: "Anleitung: Klicken Sie auf ein Aufklappmenü und wählen Sie eine Schaltfläche aus, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Alle Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on a drop-down menu and select a button to filter the data according to your characteristics. Each bar shows the frequency of depression for the respective characteristic depending on your selection. For example, for age differences in Germany, select the »Germany« button under »All countries«. Your selection criteria will not be saved by us." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [ ...uniqueValuesByCategory.sex, ...uniqueValuesByCategory.age, ...uniqueValuesByCategory.isced11, ...uniqueValuesByCategory.geo ], highlightsCategory: [] }, p6: { headline: { de: "Lassen sich Alterstrends in verschiedenen Regionen Europas erkennen?", en: "Can age trends be identified in different regions?" }, paragraph: { de: "Anleitung: Klicken Sie auf die Schaltflächen, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on the buttons to filter the data according to your characteristics. Each bar shows the depression prevalence depending on your selection for the respective characteristic. For example, to see age differences in Germany, select the button 'Germany' under 'Countries'. Your selection criteria will not be stored by us." }, mobileParagraph: { de: "Anleitung: Klicken Sie auf ein Aufklappmenü und wählen Sie eine Schaltfläche aus, um die Daten nach Ihren Merkmalen zu filtern. Jeder Balken zeigt dabei die von Ihrer Auswahl abhängige Depressionshäufigkeit für das jeweilige Merkmal an. Um zum Beispiel Altersunterschiede in Deutschland sichtbar zu machen, wählen Sie die Schaltfläche »Deutschland« unter »Alle Länder«. Ihre Auswahlkriterien werden dabei nicht von uns gespeichert.", en: "Instructions: Click on a drop-down menu and select a button to filter the data according to your characteristics. Each bar shows the frequency of depression for the respective characteristic depending on your selection. For example, for age differences in Germany, select the »Germany« button under »All countries«. Your selection criteria will not be saved by us." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [ ...uniqueValuesByCategory.sex, ...uniqueValuesByCategory.age, ...uniqueValuesByCategory.isced11, ...uniqueValuesByCategory.geo ], highlightsCategory: [] } } })37:T1c6d,contentBase = ({ p0: { headline: { de: "Prävalenz von Depressionen in Europa", en: "Prevalence of depression in Europe" }, paragraph: { de: "Eine Depression ist eine komplexe Erkrankung, die durch ein Zusammenspiel von biologischen, biografischen und gesellschaftlichen Faktoren begünstigt wird. Einige davon – aber längst nicht alle – sind das Geschlecht, das Alter, der Bildungsgrad und das Herkunftsland einer Person. Die unten stehende Grafik zeigt, wie diese Faktoren die Prävalenz von Depressionen beeinflussen. Die Prävalenz gibt die Zahl der Krankheitsfälle in der betrachteten Gruppe zu einem bestimmten Zeitpunkt oder während eines bestimmten Zeitraums an (in Prozent).", en: "Depression is a complex illness that is promoted by a combination of biological, biographical and social factors. Some of these – but not all – are a person's gender, age, level of educational attainment and country of origin. The chart below shows how these factors influence the prevalence of depression. The prevalence is the proportion of a population who have a specific characteristic in a given time period (in percent)." }, mobileParagraph: { de: "Eine Depression ist eine komplexe Erkrankung, die durch ein Zusammenspiel verschiedener Faktoren begünstigt wird. Einige davon sind Geschlecht, Alter, Bildungsgrad und Herkunftsland einer Person. Die unten stehende Grafik zeigt, wie diese Faktoren die Prävalenz von Depressionen beeinflussen. Die Prävalenz gibt die Zahl der Krankheitsfälle in der betrachteten Gruppe zu einem bestimmten Zeitpunkt oder während eines bestimmten Zeitraums an (in Prozent).", en: "Depression is a complex illness that is favored by a combination of different factors. Some of these are a person's gender, age, level of education and country of origin. The chart below shows how these factors influence the prevalence of depression. The prevalence indicates the number of cases of illness in the group under consideration at a certain point in time or during a certain period (as a percentage)." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [ ...uniqueValuesByCategory.sex, ...uniqueValuesByCategory.age, ...uniqueValuesByCategory.isced11, ...uniqueValuesByCategory.geo ], highlightsCategory: [] }, p1: { headline: { de: "Frauen erkranken häufiger als Männer", en: "Women are affected more frequently than men" }, paragraph: { de: "Weiblich zu sein ist – salopp gesagt – ein Risikofaktor für eine Depression. Zumindest entwickeln Frauen die Krankheit im Durchschnitt häufiger als Männer. Dieser Trend zeigt sich auch in den Daten aus Europa: Während 5,5 Prozent der befragten Männer im Jahr 2019 von depressiven Symptomen in den vergangenen 12 Monaten berichteten, waren es bei den Frauen 8,7 Prozent.", en: "To put it bluntly, being female is a risk factor for depression. On average, women develop the illness more frequently than men. This trend is also reflected in the data from Europe: while 5,5 percent of men surveyed in 2019 reported depressive symptoms in the past 12 months, the equivalent for women was 8,7 percent." }, selection: { sex: "T", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [...uniqueValuesByCategory.sex], highlightsCategory: ["sex"] }, p2: { headline: { de: "Eine Frage des Alters", en: "A matter of age" }, paragraph: { de: "Auch das Alter einer Person beeinflusst, wie wahrscheinlich es ist, dass sie eine Depression entwickeln wird. Stellen wir uns eine Durchschnittsfrau vor und nennen sie Anna. Wenn Anna noch jung ist, ist die Prävalenz für Depressionen in ihrer Altersgruppe vergleichsweise niedrig. Sie steigt aber an, wenn Anna älter wird. Am höchsten ist die Prävalenz bei Frauen in der Altersgruppe über 75 Jahre, dicht gefolgt von der Gruppe 55 bis 64 Jahre.", en: "A person's age also influences how likely it is that they will develop depression. Let's imagine an average woman and call her Anna. When Anna is young, the prevalence of depression in her age group is comparatively low. However, it increases as Anna gets older. The prevalence is highest among women in the 75 and older age group, closely followed by the 55 to 64 age group." }, selection: { sex: "F", isced11: "TOTAL", age: "TOTAL", geo: "EU27_2020" }, highlightsItems: [...uniqueValuesByCategory.age, "F"], highlightsCategory: ["age"] }, p3: { headline: { de: "Weniger Bildung, mehr Depressionen", en: "Less education, more depression" }, paragraph: { de: "Je weniger Zeit Menschen im Bildungssystem verbringen, desto höher ist ihr Risiko, eine Depression zu entwickeln. Sagen wir, Anna ist 40 Jahre und hat eine primäre Bildung, zum Beispiel einen Haupt- oder Realschulabschluss. Dann liegt die Prävalenz in ihrer Gruppe bei zehn Prozent. Hätte Anna hingegen eine sekundäre Bildung, also etwa ein Abitur, wären es 6,9 Prozent, bei einer tertiären Bildung wie einem abgeschlossenen Studium oder einer Meisterausbildung sogar nur 5,1 Prozent.", en: "The less time people spend in the education system, the higher their risk of developing depression. Let's say Anna is 40 years old and has a primary education, in which case the prevalence in her group is around ten percent. If, on the other hand, Anna had a secondary education, it would be 6,9 percent, and if she had a tertiary education, it would be just 5,1 percent." }, selection: { sex: "F", isced11: "TOTAL", age: "Y35-44", geo: "EU27_2020" }, highlightsItems: [...uniqueValuesByCategory.isced11, "F", "Y35-44"], highlightsCategory: ["isced11"] }, p4: { headline: { de: "Depressions-Hotspot Island", en: "Iceland – a hotspot for depression" }, paragraph: { de: "Im EU-Durchschnitt berichteten rund sieben Prozent der Befragten von depressiven Symptomen. Die Unterschiede zwischen den einzelnen Ländern sind aber groß. Für unsere Durchschnittsfrau Anna, die 40 Jahre alt ist und ein Fachabi hat, ist das Risiko, eine Depression zu entwickeln, in Island am größten. In der entsprechenden Gruppe berichtete hier fast jede Vierte (23,6 Prozent) von depressiven Symptomen! In Deutschland liegt die Prävalenz hingegen bei 11,4 Prozent.", en: "On average in the EU, around seven percent of respondents reported depressive symptoms. However, the differences between the individual countries are large. For our average woman, Anna, who is 40 years old and has a secondary education, the risk of developing depression is highest in Iceland. In this group, almost one in four (23,6 percent) reported depressive symptoms! In Germany, on the other hand, the prevalence is 11,4 percent." }, selection: { sex: "F", isced11: "ED3_4", age: "Y35-44", geo: "EU27_2020" }, highlightsItems: [...uniqueValuesByCategory.geo, "F", "Y35-44", "ED3_4"], highlightsCategory: ["geo"] } })38:T13fc,translation = { // Define the translation object let translation = { en: { translation: { h1md: "# Prevalence of depression", noData: "no data", summary: "The prevalence for you selection is: ", caption: 'All information is based on data from the »European Health Interview Survey« (EHIS), a health survey conducted in all EU member states and some other European countries in 2019. Respondents indicated whether they had suffered from depression in the past 12 months or had observed various symptoms of the illness. * Data on educational levels were classified according to ISCED 2011 (International Standard Classification of Education). Primary corresponds to ISCED 01–02, secondary corresponds to ISCED 03–04, and tertiary corresponds to ISCED 05–08; Source: Eurostat (hlth_ehis_cd1e) © KielSCN ' + (bgImage !== "b0" ? "(Images created with Midjourney), " : "") + 'CC BY 4.0' } }, de: { translation: { h1md: "# Prävalenz der Depression", noData: "keine Daten", summary: "Die Prävalenz für Ihre Auswahl beträgt: ", caption: 'Alle Angaben beruhen auf den Daten des »European Health Interview Survey« (EHIS), einer Gesundheitsumfrage in allen Mitgliedsstaaten der EU sowie einigen weiteren europäischen Ländern aus dem Jahr 2019. Die Befragten gaben darin an, ob sie in den vergangenen 12 Monaten an einer Depression gelitten oder verschiedene Symptome der Krankheit bei sich beobachtet hatten. * Daten zu Bildungsstufen wurden klassifiert nach ISCED 2011 (Internationale Standardklassifikation des Bildungswesens). Primär entspricht ISCED 01–02, sekundär entspricht ISCED 03–04 und tertiär entspricht ISCED 05–08; Datenquelle: Eurostat (hlth_ehis_cd1e) © KielSCN ' + (bgImage !== "b0" ? "(Bildmotive erstellt mit Midjourney), " : "") + 'CC BY 4.0' } } }; // Define the populateTranslate function function populateTranslate() { // Helper function for conditional assignment const assignIfAvailable = (parent, targetKey, key, content) => { if (!parent[targetKey]) { parent[targetKey] = {}; // Create target if it doesn't exist } if (content) { parent[targetKey][key] = content; // Assign content to the target's key } }; lookupArray.forEach((item) => { assignIfAvailable( translation.en.translation, "abbr", item.cat + "_" + item.abbr, item.name_en ); assignIfAvailable( translation.de.translation, "abbr", item.cat + "_" + item.abbr, item.name_de ); }); // Loop through contentBase and contentDiff for each language ["en", "de"].forEach((lang) => { for (let key in contentBase) { assignIfAvailable( translation[lang].translation, "headlines", key, contentBase[key].headline[lang] ); assignIfAvailable( translation[lang].translation, "paragraphs", key, contentBase[key].paragraph[lang] ); if (contentBase[key].mobileParagraph) { assignIfAvailable( translation[lang].translation, "mobileParagraphs", key, contentBase[key].mobileParagraph[lang] ); } } const v = version; for (let key in contentDiff[v]) { assignIfAvailable( translation[lang].translation, "headlines", key, contentDiff[v][key].headline[lang] ); assignIfAvailable( translation[lang].translation, "paragraphs", key, contentDiff[v][key].paragraph[lang] ); if (contentDiff[v][key].mobileParagraph) { assignIfAvailable( translation[lang].translation, "mobileParagraphs", key, contentDiff[v][key].mobileParagraph[lang] ); } } }); } // Execute the function to populate the translation object populateTranslate(); // Return the updated translation object return translation; }39:[{"id":"0b21b1461a25b7992053a98708dad80c15df3182ce47cae08ab88c368426e919af201af51ac5627b782c2933a530b30b65e9302a1bce3119c90aabb1852128f4","href":"https://static.observableusercontent.com/files/0b21b1461a25b7992053a98708dad80c15df3182ce47cae08ab88c368426e919af201af51ac5627b782c2933a530b30b65e9302a1bce3119c90aabb1852128f4","name":"Lookup_Table_prevalence_of_depression_2023_11_13_b.csv","type":"text/csv","lastModified":1701169851200.928,"size":1364},{"id":"84fc22d09e95b5142c8be1a142341d4489c1c22de8d5c406fe2019f92ad1a263ea43abd4444f99e763facbdc2034b41e81e88487ff9decde782c104b1d8b34cc","href":"https://static.observableusercontent.com/files/84fc22d09e95b5142c8be1a142341d4489c1c22de8d5c406fe2019f92ad1a263ea43abd4444f99e763facbdc2034b41e81e88487ff9decde782c104b1d8b34cc","name":"Lookup_Table_prevalence_of_depression_2023_12_20_a.csv","type":"text/csv","lastModified":1703064864597.483,"size":1199},{"id":"e26533716e1a6c7c501d92a79d9ef554b3a79e63d18c2477e8d89a66759a98d1b41f9f0ec09ef59f3ee70a1b479dc70e457b272a844e5135aeff60c5538fa815","href":"https://static.observableusercontent.com/files/e26533716e1a6c7c501d92a79d9ef554b3a79e63d18c2477e8d89a66759a98d1b41f9f0ec09ef59f3ee70a1b479dc70e457b272a844e5135aeff60c5538fa815","name":"hlth_ehis_cd1e_linear.csv","type":"text/csv","lastModified":1697720973167.71,"size":13256567},{"id":"f11dd10a4a3963e7914ca4daa568e9b26842228fe2e5782a3edd1fc682c65c57349405494c13162e77a4e6c9338f74e4145d77d787bc8590ae6e5f4ada94b34c","href":"https://static.observableusercontent.com/files/f11dd10a4a3963e7914ca4daa568e9b26842228fe2e5782a3edd1fc682c65c57349405494c13162e77a4e6c9338f74e4145d77d787bc8590ae6e5f4ada94b34c","name":"Lookup_Table_prevalence_of_depression_2023_12_18_a.csv","type":"text/csv","lastModified":1702893379787.038,"size":1300},{"id":"0e1e56bcc72b9f733701ac7da3e3e0846542a5603147b7e53e6fb92e551d6be8f053453aae79820bc01016a95d395f65a9e1197253c8639d74446cd18551799b","href":"https://static.observableusercontent.com/files/0e1e56bcc72b9f733701ac7da3e3e0846542a5603147b7e53e6fb92e551d6be8f053453aae79820bc01016a95d395f65a9e1197253c8639d74446cd18551799b","name":"Lookup_Table_prevalence_of_depression_2023_12_18_b.csv","type":"text/csv","lastModified":1702893528007.852,"size":1215},{"id":"fac0c7aed47a46c0e1737cb2a4553bec004dc4ed19e711ec4415086a600d2989b7b05f5274f6a0604cb10a78abe509eeac8222dd9a2470fb0b42f5ff8c701cc8","href":"https://static.observableusercontent.com/files/fac0c7aed47a46c0e1737cb2a4553bec004dc4ed19e711ec4415086a600d2989b7b05f5274f6a0604cb10a78abe509eeac8222dd9a2470fb0b42f5ff8c701cc8","name":"Lookup_Table_prevalence_of_depression_2023_12_18_c.csv","type":"text/csv","lastModified":1702893649318.013,"size":1197},{"id":"0e1e56bcc72b9f733701ac7da3e3e0846542a5603147b7e53e6fb92e551d6be8f053453aae79820bc01016a95d395f65a9e1197253c8639d74446cd18551799b","href":"https://static.observableusercontent.com/files/0e1e56bcc72b9f733701ac7da3e3e0846542a5603147b7e53e6fb92e551d6be8f053453aae79820bc01016a95d395f65a9e1197253c8639d74446cd18551799b","name":"Lookup_Table_prevalence_of_depression_2023_12_18_b@1.csv","type":"text/csv","lastModified":1702893700280.015,"size":1215},{"id":"26b815f802349c4d62d67d466da4d93d86df2c77932a7850428893824724374630ceffa7dd12c583c792353b69b22aeeb8c615f90300aff44675fff915d37ee1","href":"https://static.observableusercontent.com/files/26b815f802349c4d62d67d466da4d93d86df2c77932a7850428893824724374630ceffa7dd12c583c792353b69b22aeeb8c615f90300aff44675fff915d37ee1","name":"Lookup_Table_prevalence_of_depression_2023_12_18_d.csv","type":"text/csv","lastModified":1702911278259.524,"size":1201},{"id":"a2ff19132598097ad495f677e0e1da5be901d0e5dc6e3053926175237511a8fc5398fb44ac515e564566d97922f0835c349961d01711db11e05888c815496211","href":"https://static.observableusercontent.com/files/a2ff19132598097ad495f677e0e1da5be901d0e5dc6e3053926175237511a8fc5398fb44ac515e564566d97922f0835c349961d01711db11e05888c815496211","name":"Lookup_Table_prevalence_of_depression_2023_12_18_e.csv","type":"text/csv","lastModified":1702911352650.338,"size":1199},{"id":"4d5743ac1dca4a2a1e8acca99ad3dfd4a0a2c93f56967c3e5b1aa2f50c6a164edc28d4b97ef6e71478079e917c0009eeefa78bf5ecb8a2ba5dc9edcee8870b06","href":"https://static.observableusercontent.com/files/4d5743ac1dca4a2a1e8acca99ad3dfd4a0a2c93f56967c3e5b1aa2f50c6a164edc28d4b97ef6e71478079e917c0009eeefa78bf5ecb8a2ba5dc9edcee8870b06","name":"Lookup_Table_prevalence_of_depression_2023_12_18_f.csv","type":"text/csv","lastModified":1702916990907.446,"size":1217},{"id":"cebb040ff4548732a10b70b21b2fb0c2ff3172771f5fe8e232d52c097ee235321660dae9cf17a119b42dd737a869caa2e73f5773eb16bf22acea23e788969cfe","href":"https://static.observableusercontent.com/files/cebb040ff4548732a10b70b21b2fb0c2ff3172771f5fe8e232d52c097ee235321660dae9cf17a119b42dd737a869caa2e73f5773eb16bf22acea23e788969cfe","name":"Lookup_Table_prevalence_of_depression_2024_01_11_a.csv","type":"text/csv","lastModified":1704968897223.135,"size":1233}] 2d:{"id":"9f15b8e88bf26fed","slug":null,"title":"Prevalence of depression","thumbnail":"3dedcd7f671d542b3e72658f0e1bc9174204d1173af6031782fd4048d698c719","access_level":"public","create_time":"$D2023-10-19T13:08:19.278Z","update_time":"$D2025-06-20T15:46:10.211Z","view_time":null,"first_public_time":"$D2023-12-15T08:07:05.084Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9c9093a3d6001885","login":"kielscn-spektrum-living-lab","name":"KielSCN Spektrum Living Lab","avatar_url":"https://avatars-next.observableusercontent.com/1cdf082064d7bfeb48cb6e3b15cbc1df63bb57fa109cf82d122ee8ba22e489d0","tier":"starter_2024"},"version":2710,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa6fcb579fb87ef9","login":"kielscn","name":"KielSCN","avatar_url":"https://avatars-next.observableusercontent.com/ad62e3391f954b60f9d7eed4fdb0ebaf6c2b018bc6ed85e6d47421082969c99d","tier":null}],"members":[{"type":"individual","id":"aa6fcb579fb87ef9","login":"kielscn","name":"KielSCN","avatar_url":"https://avatars-next.observableusercontent.com/ad62e3391f954b60f9d7eed4fdb0ebaf6c2b018bc6ed85e6d47421082969c99d","tier":null,"role":"editor"},{"type":"team","id":"9c9093a3d6001885","login":"kielscn-spektrum-living-lab","name":"KielSCN Spektrum Living Lab","avatar_url":"https://avatars-next.observableusercontent.com/1cdf082064d7bfeb48cb6e3b15cbc1df63bb57fa109cf82d122ee8ba22e489d0","tier":"starter_2024","role":"editor"},{"type":"individual","id":"0741e3977115256e","login":"carolin-wagener","name":"Carolin Wagener","avatar_url":"https://avatars-next.observableusercontent.com/ffc91cd0c67837a363744dfa136d6ca799a9da3c9ffe2937ff0a2040bd3fa592","tier":null,"role":"viewer"},{"type":"individual","id":"b134778bab382f43","login":"dennis-dirdjaja","name":"Dennis Dirdjaja","avatar_url":"https://avatars-next.observableusercontent.com/1a00aa4a02a2c789315f7382ccd0265f9996f5b532504d4da18100f848a088b1","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Prevalence of depression","cells":[{"id":953,"value":"md`${init_i18n.t(\"h1md\", {\n lng: language\n})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"viewof language = Inputs.radio(\n new Map([\n [\"English\", \"en\"],\n [\"Deutsch\", \"de\"]\n ]),\n { value: \"de\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2222,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1844,"value":"viewof version = Inputs.radio([\"s0\", \"s1\", \"s2\"], {\n label: \"Select text version\",\n value: \"s0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2292,"value":"viewof bgImage = Inputs.radio([\"b0\", \"b1\", \"b2\"], {\n label: \"Select image version\",\n value: \"b2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2387,"value":"viewof mobile = Inputs.toggle({ label: \"mobile Version\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"update = viewof chart.update(categoryGroups)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"groupOrder = ({\n sex: 0,\n age: 1,\n isced11: 2,\n geo: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1045,"value":"---\n### Utility functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2279,"value":"// Helper function to parse URL parameters\nfunction getURLParameter(name) {\n const params = new URLSearchParams(window.location.search);\n return params.get(name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2288,"value":"// Observable cell to override 'version' and 'bgImage' based on URL parameters\nversionSwitch = {\n // Attempt to get values from URL parameters\n const versionFromURL = getURLParameter(\"s\");\n const bgImageFromURL = getURLParameter(\"b\");\n const languageFromURL = getURLParameter(\"l\");\n\n // Set the cell values, using URL parameters if available, otherwise default values\n // Set the cell values, using URL parameters if available, otherwise default values\n set(viewof version, versionFromURL || \"s0\");\n set(viewof bgImage, bgImageFromURL || \"b2\");\n set(viewof language, languageFromURL || \"de\");\n\n // Returning something to satisfy Observable's requirement for cell body\n return \"Cell values initialized based on URL parameters\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2214,"value":"function handleClickExternal(category, name, context) {\n const { updatePageContent, updateButtonStates, updateIndicatorState, svg } =\n context;\n\n const baseLength = Object.keys(contentBase).length;\n\n // switching to last page if user explores\n if (svg.value.currentIndex < baseLength) {\n svg.value.currentIndex = baseLength;\n updatePageContent(svg.value.currentIndex);\n updateButtonStates();\n updateIndicatorState();\n }\n // Update the value for the category and dispatch the custom event\n svg.value.selection[category] =\n name !== svg.value.selection[category] ? name : defaultValues[category];\n svg.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2213,"value":"function initializeDropDowns(selection, context) {\n selection.each(function (d) {\n // 'this' refers to the individual dropdown div\n const dropdownElement = d3.select(this);\n\n // Check if the dropdown has already been initialized\n if (!dropdownElement.attr(\"data-initialized\")) {\n // Initialize the dropdown and store the instance\n const instance = new DropDown(this, context);\n this.dropdownInstance = instance; // Store the instance on the DOM element\n\n // Set a data attribute indicating the dropdown is initialized\n dropdownElement.attr(\"data-initialized\", \"true\");\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2212,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"function createTransform(category, i, x0) {\n const column = i % 3;\n const columnOffset = Math.floor(i / 11);\n const xPos = x0(column + columnOffset);\n\n const row = Math.floor(i / 3);\n const rowOffset = row * 6 * (BAR_HEIGHT + BAR_MARGIN.bottom);\n const yPos =\n (i % 11) * (BAR_HEIGHT + BAR_MARGIN.bottom) +\n SVG_MARGIN.top +\n row * BAR_HEIGHT +\n rowOffset;\n\n return `translate(${xPos},${yPos})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2290,"value":"function getPositionForCategoryItem(\n category,\n index,\n totalRows,\n totalColumns,\n xScale\n) {\n // Starting rows for each category\n const categoryStartRows = {\n sex: 0,\n age: 4,\n isced11: 13,\n geo: 1 // 'geo' spans multiple columns\n };\n\n // Determine the column and starting row for the category\n let column = category === \"geo\" ? 1 : 0; // 'geo' spans columns 1 and 2\n let startRow = categoryStartRows[category];\n\n // Calculate the row, adjusting for the title row\n let row = startRow + (category === \"geo\" ? index : index + 1);\n\n // For 'geo', adjust column based on the index\n if (category === \"geo\" && index >= totalRows - 1) {\n column = 2;\n row -= totalRows - 1;\n }\n\n // Calculate x and y positions\n const xPos = xScale(column);\n const yPos = row * (BAR_HEIGHT + BAR_MARGIN.top) + SVG_MARGIN.top;\n\n return `translate(${xPos},${yPos})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1524,"value":"function fetchNewImageUrl(svg) {\n // Replace this with actual logic to fetch new image URL\n const url = `https://res.cloudinary.com/dt2gsbmrj/image/upload/w_${\n IMG_WIDTH * 2\n }/q_auto:best/f_auto/2023_12_15_a/${svg.value.selection.sex}_${\n svg.value.selection.isced11\n }_${svg.value.selection.age}_EU27_2020.png`;\n /* const url = `https://www.spektrum.de/pix/interactive/kielscn_depression/${svg.value.selection.sex}_${svg.value.selection.isced11}_${svg.value.selection.age}_EU27_2020.png`; */\n return Promise.resolve(url);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1624,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"function calcStopPercentage(absOffset, elementHeight) {\n return (absOffset / elementHeight) * 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1860,"value":"function applyButtonStyles(selection) {\n selection\n .style(\"border\", \"none\")\n .style(\"background\", \"transparent\")\n .style(\"cursor\", \"pointer\")\n .style(\"width\", SVG_MARGIN.left)\n .style(\"font\", \"32px 'filosofia'\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2145,"value":"applyStyles = (selection, styles) => {\n Object.entries(styles).forEach(([key, value]) => {\n selection.style(key, value);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1786,"value":"function applyDataSelection() {\n // Select all elements with a data attribute\n d3.selectAll(\"u[data-selection]\").each(function () {\n const uElem = d3.select(this);\n const uData = JSON.parse(uElem.attr(\"data-selection\") || \"{}\"); // Safely parse the data\n\n const uSelection = d3\n .selectAll(\".b-group\")\n .filter((data) => uData.includes(data.datasetName));\n\n // Define the action for hover\n uElem\n .on(\"mouseover\", () => {\n d3.selectAll(\".b-group .barName, .b-group .barValue\").attr(\n \"opacity\",\n \"0.3\"\n );\n uSelection.selectAll(\".barName, .barValue\").attr(\"opacity\", \"1\");\n })\n .on(\"mouseout\", () => {\n d3.selectAll(\".b-group .barName, .b-group .barValue\").attr(\n \"opacity\",\n \"1\"\n );\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2454,"value":"function highlightDropdown(pageIndex) {\n let highlightData = [];\n const baseLength = Object.keys(contentBase).length;\n const contentSource =\n pageIndex < baseLength ? contentBase : contentDiff[version];\n const highlightKey = \"highlightsCategory\";\n\n try {\n highlightData = [...contentSource[`p${pageIndex}`][highlightKey]];\n } catch (error) {\n console.error(\"Error retrieving highlight data:\", error);\n return;\n }\n\n // Close all dropdowns immediately\n d3.selectAll(\".dropdown\").each(function () {\n if (this.dropdownInstance) {\n this.dropdownInstance.toggle(false);\n }\n });\n\n // Only proceed if highlightData is not empty\n if (highlightData.length > 0) {\n // Delay opening the specific dropdown\n setTimeout(() => {\n d3.selectAll(\".dropdown\")\n .filter((d, i) => d[0] === highlightData[0])\n .each(function () {\n if (this.dropdownInstance) {\n this.dropdownInstance.toggle(true);\n }\n });\n }, 750); // Delay in milliseconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2453,"value":"function isHighlight(type, name, pageIndex) {\n let highlightData = [];\n const baseLength = Object.keys(contentBase).length;\n const contentSource =\n pageIndex < baseLength ? contentBase : contentDiff[version];\n const highlightKey =\n type === \"item\" ? \"highlightsItems\" : \"highlightsCategory\";\n\n // Safely accessing the highlight data with error handling\n try {\n highlightData = [...contentSource[`p${pageIndex}`][highlightKey]];\n } catch (error) {\n console.error(\"Error retrieving highlight data:\", error);\n // If there's an error (e.g., undefined data), treat it as empty highlightData\n return true;\n }\n\n // Return true if highlightData is empty or it includes the name\n return highlightData.length === 0 || highlightData.includes(name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2144,"value":"function highlightSelected(svg) {\n // Reset all bars and progress bars to default color or class\n d3.selectAll(\".bar\").style(\"fill\", COLOR_SECONDARY);\n d3.selectAll(\".progress\").classed(\"active\", false);\n\n // Iterate over each category in svg.value and update styles\n Object.keys(svg.value.selection).forEach((category) => {\n const datasetName = svg.value.selection[category];\n\n // Update desktop bars\n d3.selectAll(\".bar\")\n .filter((d) => d.category === category && d.datasetName === datasetName)\n .style(\"fill\", COLOR_PRIMARY);\n\n // Update mobile progress bars\n d3.selectAll(\".progress\")\n .filter((d) => d.category === category && d.datasetName === datasetName)\n .classed(\"active\", true);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1543,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2448,"value":"function getContentForDisplay(index) {\n const baseLength = Object.keys(contentBase).length;\n const contentSource = index < baseLength ? contentBase : contentDiff[version];\n\n if (isMobile && contentSource[`p${index}`].mobileParagraph) {\n return init_i18n.t(`mobileParagraphs.p${index}`, { lng: language });\n } else {\n return init_i18n.t(`paragraphs.p${index}`, { lng: language });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":815,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"function customDescendingSort(a, b) {\n // Treat null as the smallest value\n if (a === null) return 1;\n if (b === null) return -1;\n // Use d3.descending for non-null values\n return d3.descending(a, b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"// Function to sort a subset of an array by a property\nfunction sortSubset(array, filterFunction, sortFunction) {\n // Separate the items you want to sort from those you don't\n let itemsToSort = array.filter(filterFunction);\n let itemsNotToSort = array.filter((d) => !filterFunction(d));\n\n // Sort the items you want to sort\n itemsToSort.sort(sortFunction);\n\n // Now, you need to recombine the sorted items with the unsorted ones\n // This step is application-specific and depends on how you want to\n // integrate them back into the original array\n let sortedArray = [...itemsToSort, ...itemsNotToSort];\n\n return sortedArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"function filterDataByCategory(\n catSexValue,\n catIsced11Value,\n catAgeValue,\n catGeoValue\n) {\n const currentCatSexValue = catSexValue || chart.selection.sex;\n const currentCatIsced11Value = catIsced11Value || chart.selection.isced11;\n const currentCatAgeValue = catAgeValue || chart.selection.age;\n const currentCatGeoValue = catGeoValue || chart.selection.geo;\n\n return hlth_ehis_cd1e_linear.filter(\n (d) =>\n d.sex === currentCatSexValue &&\n d.isced11 === currentCatIsced11Value &&\n d.age === currentCatAgeValue &&\n d.geo === currentCatGeoValue\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2083,"value":"// Function to convert hex to RGB\nfunction hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ]\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"function calculateDifferenceColor(rgbBackground) {\n // Calculate the difference color with white text [255, 255, 255]\n return rgbBackground.map((c) => 255 - c);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2081,"value":"function luminance(r, g, b) {\n var a = [r, g, b].map(function (v) {\n v /= 255;\n return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n });\n return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2080,"value":"function contrast(rgb1, rgb2) {\n var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);\n var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);\n var brightest = Math.max(lum1, lum2);\n var darkest = Math.min(lum1, lum2);\n return (brightest + 0.05) / (darkest + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2079,"value":"function adjustBackgroundColor(hexColor, threshold) {\n var originalColor = hexToRgb(hexColor);\n var k = 0; // Starting value of k\n var originalD3Color = d3.rgb(\n originalColor[0],\n originalColor[1],\n originalColor[2]\n );\n var differenceColor = calculateDifferenceColor(originalColor);\n var contrastRatio = contrast(differenceColor, originalColor);\n\n while (contrastRatio < threshold) {\n k += 0.05; // Gradually increase k\n var brightenedColor = originalD3Color.brighter(k);\n differenceColor = calculateDifferenceColor([\n brightenedColor.r,\n brightenedColor.g,\n brightenedColor.b\n ]);\n contrastRatio = contrast(differenceColor, [\n brightenedColor.r,\n brightenedColor.g,\n brightenedColor.b\n ]);\n }\n return originalD3Color.brighter(k).formatHex();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1932,"value":"function getBgColor(svg) {\n const key = `${svg.value.selection.sex}_${svg.value.selection.isced11}_${svg.value.selection.age}_EU27_2020`;\n return bgColorsAdjusted[key];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2447,"value":"isMobile = SVG_WIDTH < THRESHOLD","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"---\n### Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2421,"value":"x0 = d3\n .scaleBand()\n .domain([0, 1, 2])\n .range([SVG_MARGIN.left, SVG_WIDTH - SVG_MARGIN.right])\n .paddingInner(0.05)\n .paddingOuter(0)\n .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2420,"value":"x1 = d3.scaleLinear().domain([0, 100]).range([CORNER_RADIUS, BAR_WIDTH])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2419,"value":"xMobile = d3\n .scaleLinear()\n .domain([0, 100])\n .range([\n 0,\n SVG_WIDTH -\n SVG_MARGIN.left -\n SVG_MARGIN.right -\n BAR_MARGIN.left -\n BAR_MARGIN.right\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2142,"value":"xPage = d3\n .scaleBand()\n .domain(d3.range(paragraphsLength))\n .range([SVG_MARGIN.left, SVG_WIDTH - SVG_MARGIN.right])\n .paddingInner(0)\n .paddingOuter(0)\n .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1037,"value":"---\n### Config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1526,"value":"/* SVG_WIDTH = 968 */\nSVG_WIDTH = Math.min(640, width - 30)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1530,"value":"/* SVG_HEIGHT = 1210 */\n/* SVG_HEIGHT = bgImage === \"b0\" ? 740 : 880 */\nSVG_HEIGHT = Math.max((SVG_WIDTH * 11) / 8, 660)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"/* SVG_MARGIN = ({ top: 340, right: 91, bottom: 20, left: 91 }) */\nSVG_MARGIN = ({\n top: 260,\n right: width < THRESHOLD ? 16 : 22,\n bottom: 32,\n left: width < THRESHOLD ? 16 : 22\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1534,"value":"/* IMG_WIDTH = 968 */\nIMG_WIDTH = SVG_WIDTH","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1539,"value":"IMG_HEIGHT = Math.round((IMG_WIDTH * 9) / 21) // 21:9 aspect ratio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"/* BAR_WIDTH = 246 */\n/* BAR_WIDTH = 212 */\nBAR_WIDTH = x0.bandwidth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"BAR_HEIGHT = width < THRESHOLD ? 32 : 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"BAR_MARGIN = ({ top: 2, right: 8, bottom: 2, left: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2333,"value":"COLOR_PRIMARY = {\n /* const rgbArray = calculateDifferenceColor(hexToRgb(getBgColor(viewof chart)));\n const hex = d3.rgb(rgbArray[0], rgbArray[1], rgbArray[2]).formatHex();\n return hex; */\n return \"#303030\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2121,"value":"COLOR_SECONDARY = {\n const rgbArray = calculateDifferenceColor(hexToRgb(\"#141414\"));\n const hex = d3.rgb(rgbArray[0], rgbArray[1], rgbArray[2]).formatHex();\n return hex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2120,"value":"COLOR_TERTIARY = \"#f6f6f6\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"CORNER_RADIUS = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2413,"value":"THRESHOLD = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2223,"value":"COLUMN_GAP = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2128,"value":"GRADIENT_SIZE = Math.max((SVG_HEIGHT * 160) / 880, 120)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"function configureTextAttributes(selection) {\n return (\n selection\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-family\", \"filosofia-unicase\")\n /* .style(\"font-variant-caps\", \"all-small-caps\") */\n /* .style(\"font-variant\", \"tabular-nums\") */\n .attr(\"dominant-baseline\", \"middle\")\n .attr(\"font-size\", \"12px\")\n .attr(\"font-weight\", \"normal\")\n .attr(\"fill\", \"black\")\n .attr(\"dx\", 12)\n .attr(\"y\", BAR_HEIGHT / 2)\n );\n /* .attr(\"opacity\", (d) => (d.obsValue !== null ? 1 : 0)); */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1128,"value":"function textTween(d) {\n const previous = parseFloat(this.textContent) || 0;\n const current = d.obsValue;\n return (t) => d3.interpolateNumber(previous, current)(t).toFixed(1) + \" %\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2078,"value":"bgColorsAdjusted = {\n var threshold = 7; // Minimum contrast ratio; 4.5 for level AA compliance, 7 for level AAA compliance\n var adjustedColorObject = {};\n\n // Iterate over the keys and adjust the colors\n Object.keys(bgColors).forEach((key) => {\n adjustedColorObject[key] = adjustBackgroundColor(bgColors[key], threshold);\n });\n return adjustedColorObject;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1056,"value":"---\n### Layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":289,"value":"facetHeights = categorySizes.map(([category, count]) => {\n // perform your calculations here\n let barsHeight = count * BAR_HEIGHT + (count - 1) * BAR_MARGIN.bottom;\n let facetHeight = SVG_MARGIN.top + barsHeight + SVG_MARGIN.bottom;\n return { category, barsHeight };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"// Group data by category\ncategorySizes = d3.rollups(\n vals,\n (v) => v.length,\n (d) => d.category\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"---\n### Processed data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2412,"value":"sortOrder = [\"sex\", \"age\", \"isced11\", \"geo\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"// Group data by category\ncategoryGroups = d3\n .groups(sortedVals, (d) => d.category)\n .sort((a, b) => sortOrder.indexOf(a[0]) - sortOrder.indexOf(b[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"sortedVals = sortSubset(\n vals,\n (d) => d.category === \"geo\" /* && d.obsValue !== null */,\n (a, b) => customDescendingSort(a.obsValue, b.obsValue)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"vals = {\n const values = [];\n\n for (const [category, uniqueValues] of Object.entries(\n uniqueValuesByCategory\n )) {\n values[category] = {};\n for (const value of uniqueValues) {\n const datasetName = value.replace(/ /g, \"_\"); // Replace spaces with underscores for valid variable names\n\n // Initialize all categories to null\n const filters = {\n sex: null,\n isced11: null,\n age: null,\n geo: null\n };\n\n // Assign the current value to its corresponding category\n filters[category] = value;\n\n const filteredData = filterDataByCategory(\n filters.sex,\n filters.isced11,\n filters.age,\n filters.geo\n );\n\n // Assuming filteredData is an array with one object\n\n values.push({\n category: category,\n datasetName: datasetName,\n obsValue: filteredData.length > 0 ? filteredData[0][\"OBS_VALUE\"] : null\n });\n }\n }\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"uniqueValuesByCategory = ({\n sex: [\n ...new Set(\n hlth_ehis_cd1e_linear\n .filter((d) => d.sex !== defaultValues[\"sex\"])\n .map((d) => d.sex)\n )\n ],\n isced11: [\n ...new Set(\n hlth_ehis_cd1e_linear\n .filter((d) => d.isced11 !== defaultValues[\"isced11\"])\n .map((d) => d.isced11)\n )\n ],\n age: [\n ...new Set(\n hlth_ehis_cd1e_linear\n .filter((d) => d.age !== defaultValues[\"age\"])\n .map((d) => d.age)\n )\n ].sort(),\n geo: [\n ...new Set(\n hlth_ehis_cd1e_linear\n .filter((d) => d.geo !== defaultValues[\"geo\"])\n .map((d) => d.geo)\n )\n ]\n // ... add more categories as needed\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":884,"value":"defaultValues = ({\n sex: \"T\",\n isced11: \"TOTAL\",\n age: \"TOTAL\",\n geo: \"EU27_2020\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1080,"value":"---\n### Raw data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"hlth_ehis_cd1e_linear = await FileAttachment(\"hlth_ehis_cd1e_linear.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2245,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"---\n### Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2140,"value":"buttonStyles = ({\n font: \"32px 'filosofia'\",\n /* margin: \"16px 0\", */\n border: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n width: SVG_MARGIN.left\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1458,"value":"---\n### Content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1552,"value":"// Data: Array of paragraphs\nparagraphsLength = Object.keys(translation.en.translation.paragraphs).length // Define the length of the array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1737,"value":"hoverSelection = ({\n v0: {\n p0: {\n sex: uniqueValuesByCategory.sex,\n age: uniqueValuesByCategory.age,\n isced11: uniqueValuesByCategory.isced11,\n geo: uniqueValuesByCategory.geo\n },\n p2: {\n sex: [...uniqueValuesByCategory.sex, \"DE\"],\n isced11: [...uniqueValuesByCategory.isced11, \"DE\"]\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2033,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2032,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":926,"value":"---\n### i18n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":927,"value":"languageValue = init_i18n.changeLanguage(language)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"// Initialize i18next\ninit_i18n = {\n await i18next.init({\n debug: false,\n fallbackLng: \"en\",\n lng: \"en\", // default language\n resources: translation\n });\n return i18next;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2441,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":919,"value":"i18next = import(\"https://cdn.skypack.dev/i18next@latest\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"