30:T45e,Plot.plot({ width: 1000, height: 500, x: { label: null, tickFormat: d3.format("d") }, y: { tickFormat: "s", tickSpacing: 50, grid: true }, color: { legend: true, width: 500, label: "Country", range: categorical_color_scheme_countries }, marks: [ Plot.barY( barPlotData.filter((obj) => obj.year !== "NaN"), { x: (obj) => parseInt(obj.year), y: "count", fill: "country", sort: "year", title: (d) => `${d.country} \n count: ${d.count}` } ), Plot.text( barPlotData .filter((obj) => obj.year !== "NaN") .reduce((result, item) => { const existingItem = result.find((entry) => entry.year === item.year); if (existingItem) { existingItem.count = existingItem.count + item.count; } else { result.push({ year: item.year, count: item.count }); } return result; }, []), { x: (obj) => parseInt(obj.year), y: "count", text: "count", dy: -6, lineAnchor: "bottom" } ) ] })31:T1062,heatmap = { const margin = { top: 0, left: 250, right: 20, bottom: 150 }; const height = 600; const width = 800; const minRadius = 5; const maxRadius = 35; const heatmapData = getHeatMapData(1); var maxValue = heatmapData.reduce( (maxValue, obj) => Math.max(maxValue, obj.value), -Infinity ); const x_scale = d3 .scalePoint() .domain(getLabels(true, 1)) .range([0, width]) .padding(0.5); const y_scale = d3 .scalePoint() .domain(getLabels(false, 1)) .range([height, 0]) .padding(0.5); const color_scale = d3.scaleLinear([0, 3, 6], continious_color_scheme_1); const valRange = [0, maxValue]; const values = [...Array(9).keys()].map((x) => d3.quantile(valRange, x * 0.1) ); const linearScale = d3.scaleLinear().domain(values).range(valRange); linearScale.nice(); const LegendValues = linearScale.ticks(7).map((value) => Math.round(value)); const svg = d3.select(DOM.svg(width + margin.left, height)); const g = svg .attr("width", width) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + -125 + " )"); const axisTip = d3tip() .attr("class", "d3-tip") .style("background-color", "black") .style("color", "white") .style("padding", "10px") .style("width", "250px") .style("text-align", "center") .style("font-size", "12px") .offset([-10, -10]) .html((d) => { const hoveredElement = d3.event.target; return `${getCodebookDescriptions(hoveredElement.textContent)}`; }); svg.call(axisTip); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x_scale)) .selectAll("text") .attr("transform", "rotate(-90)") .attr("text-anchor", "end") .attr("dy", "-0.5em") .attr("dx", "-0.5em") .style("font-size", "14px") .on("mouseover", axisTip.show) .on("mouseout", axisTip.hide); g.append("text") .attr("x", width / 2) .attr("y", height + margin.bottom) .style("text-anchor", "middle") .style("font-size", "16px") .text("Theme"); g.append("g") .call(d3.axisLeft(y_scale)) .style("font-size", "14px") .selectAll("text") .on("mouseover", axisTip.show) .on("mouseout", axisTip.hide); g.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -margin.left + 20) .style("text-anchor", "middle") .style("font-size", "16px") .text("Gender Concepts"); const tip = d3tip() .attr("class", "d3-tip") .style("background-color", "black") .style("color", "white") .style("padding", "10px") .style("width", "auto") .style("text-align", "center") .style("font-size", "12px") .html( (d) => `${d.genderConcept} & ${d.theme}
${d.countries}
${d.value}` ); svg.call(tip); svg .selectAll() .data(heatmapData) .enter() .append("circle") .attr("cx", (d) => x_scale(d.theme) + margin.left) .attr("cy", (d) => y_scale(d.genderConcept) + 25 - margin.bottom) .attr("r", (d) => { const scaledRadius = (d.value / maxValue) * (maxRadius - minRadius) + minRadius; return Math.min(maxRadius, scaledRadius); }) .attr("fill", (d) => color_scale(d.value)) .on("mouseover", tip.show) .on("mouseout", tip.hide); const legend = svg .append("g") .attr("transform", (d) => `translate(${margin.left}, 125)`); legend .selectAll("circle") .data(LegendValues) .enter() .append("circle") .attr("cx", (d, i) => 80 * i + 50) .attr("cy", height - 2 * 20 + 50) .attr("r", (d) => { const scaledRadius = (d / maxValue) * (maxRadius - minRadius) + minRadius; return Math.min(maxRadius, scaledRadius); }) .style("fill", (d) => color_scale(d)); legend .selectAll("text") .data(LegendValues) .enter() .append("text") .text((d) => d + 1) .attr("x", (d, i) => 80 * i + 45) .attr("y", height - 20 / 2 + 75) .style("font-size", "12pt") .style("font-family", "Consolas, courier") .style("fill", "#aaa"); return svg.node(); }32:T4a1,{ let final = html`

Gender Concepts

`; let button; let htmlItems = []; let previousNavItem = []; // If a filter is active, allow resetting to 'all' if (genderConceptsFilter.length !== 0) { button = html`

all

`; button.onclick = () => { mutable genderConceptsFilter = []; }; } else { button = html`

all

`; } for (let i = 0; i < genderConceptsFilter.length - 1; i++) { const navButton = html`

${genderConceptsFilter[i]}

`; previousNavItem.push(genderConceptsFilter[i]); navButton.onclick = () => { mutable genderConceptsFilter = [...previousNavItem]; }; htmlItems.push(navButton); } if (genderConceptsFilter.length !== 0) { const navButton = html`

${ genderConceptsFilter[genderConceptsFilter.length - 1] }

`; htmlItems.push(navButton); } // Render the breadcrumb navigation return html`

${final} ${button} ${htmlItems.map( (item) => html`

${item}

` )}

`; }33:T444,{ let final = html`

Themes

`; let button; let htmlItems = []; let previousNavItem = []; // If a filter is active, allow resetting to 'all' if (themesFilter.length !== 0) { button = html`

all

`; button.onclick = () => { mutable themesFilter = []; }; } else { button = html`

all

`; } for (let i = 0; i < themesFilter.length - 1; i++) { const navButton = html`

${themesFilter[i]}

`; previousNavItem.push(themesFilter[i]); navButton.onclick = () => { mutable themesFilter = [...previousNavItem]; }; htmlItems.push(navButton); } if (themesFilter.length !== 0) { const navButton = html`

${themesFilter[themesFilter.length - 1]}

`; htmlItems.push(navButton); } // Render the breadcrumb navigation return html`

${final} ${button} ${htmlItems.map( (item) => html`

${item}

` )}

`; }34:T16cd,sankeyChart = { const sankeyData = getSankeyStructure( years_interval, sankeyCountry, genderConceptsFilter, themesFilter ); // Specify the dimensions of the chart. const linkColor = "source-target"; const nodeAlign = "sankeyJustify"; const width = 1000; const height = 750; const format = d3sankey.format(",.0f"); // Create a SVG container. const svg = d3sankey .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width + 200, height]) .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;"); // Constructs and configures a Sankey generator. const sankey = d3sankey .sankey() .nodeId((d) => d.name) .nodeAlign(d3sankey[nodeAlign]) .nodeWidth(15) .nodePadding(10) .extent([ [1, 5], [width - 1, height - 5] ]); if (sankeyData.nodes.length === 0 || sankeyData.links.length === 0) return html`

No connections

`; const { nodes, links } = sankey({ nodes: sankeyData.nodes.map((d) => Object.assign({}, d)), links: sankeyData.links.map((d) => Object.assign({}, d)) }); // Defines a color scale. const color = d3.scaleOrdinal(categorical_color_scheme); // Creates the rects that represent the nodes. const rect = svg .append("g") .attr("stroke", "#000") .selectAll() .data(nodes) .join("rect") .attr("x", (d) => d.x0) .attr("y", (d) => d.y0) .attr("height", (d) => d.y1 - d.y0) .attr("width", (d) => d.x1 - d.x0) .attr("fill", (d) => color(d.category)) .on("click", handleClick) .on("mouseover", nodeMouseOver) .on("mouseout", nodeMouseOut); // Function to handle click event function handleClick(d) { const data = d.target.__data__; var isGC = data.name[0] === "G"; if (isGC) { mutable genderConceptsFilter = updateSankeyNavigation( genderConcepts, data.path, genderConceptsFilter ); } else { mutable themesFilter = updateSankeyNavigation( themes, data.path, themesFilter ); } } function nodeMouseOver(d) { const data = d.target.__data__; d3.select(this) .style("cursor", "pointer") .attr("stroke-width", 3) .style("stroke", "#FFF"); } function nodeMouseOut(d) { const data = d.target.__data__; d3.select(this) .style("cursor", "default") .attr("stroke-width", 1) .style("stroke", "#000"); } // Creates the paths that represent the links. const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); // Creates a gradient, if necessary, for the source-target color option. if (linkColor === "source-target") { const gradient = link .append("linearGradient") .attr("id", (d) => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", (d) => color(d.source.category)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", (d) => color(d.target.category)); } link .append("path") .attr("d", d3sankey.sankeyLinkHorizontal()) .attr( "stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor ) .attr("stroke-width", (d) => Math.max(1, d.width)) .on("mouseover", linkMouseOver) .on("mouseout", linkMouseOut); function linkMouseOver(d) { const data = d.target.__data__; d3.select(this).style("stroke", "#000"); if (data.source.name[0] === "G" && data.target.name[0] === "T") { const tooltip = tooltipSVG( svg, [ `${data.source.name} → ${data.target.name}:`, `${format(data.value)} references` ], data.source.x0, data.source.y0 ); } } function tooltipSVG(svg, text_array, x0, y0) { var tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("font", "13px Times New Roman"); let start_x = x0 + 25; let start_y = y0 + 25; let width = 100 + text_array.reduce((res, obj) => { return obj.length > res ? obj.length : res; }, 0) * 4.5; let height = text_array.length * 15; tooltip .append("rect") .attr("fill", "black") .attr("x", start_x) .attr("y", start_y) .attr("width", width) .attr("height", height + 30); for (let i = 0; i < text_array.length; i++) { tooltip .append("text") .attr("fill", "white") .attr("x", start_x + 15) .attr("y", start_y + (height / text_array.length) * (i + 1) + 10) .text(text_array[i]); } return tooltip; } function linkMouseOut() { d3.select(this).style( "stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor ); d3.select(".tooltip").remove(); } // Adds labels on the nodes. svg .append("g") .selectAll() .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name); return svg.node(); }35:T107e,heatmapExplorer = { const margin = { top: 0, left: 450, right: 0, bottom: 100 }; var height = 1000; const minRadius = 5; const maxRadius = 15; var maxValue = 6; const x_scale = d3 .scalePoint() .domain(getLabels(true, levelSelected.value, filteredTheme)) .range([0, width]) .padding(0.5); const y_scale = d3 .scalePoint() .domain(getLabels(false, levelSelected.value, filteredGender)) .range([height, 0]) .padding(0.5); const color_scale = d3.scaleLinear([0, 3, 6], continious_color_scheme_1); const valRange = [0, maxValue]; const values = [...Array(9).keys()].map((x) => d3.quantile(valRange, x * 0.1) ); const linearScale = d3.scaleLinear().domain(values).range(valRange); linearScale.nice(); const LegendValues = linearScale.ticks(7).map((value) => Math.round(value)); const svg = d3.select(DOM.svg(width + margin.left, height)); const g = svg .attr("width", width) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + -200 + " )"); const axisTip = d3tip() .attr("class", "d3-tip") .style("background-color", "black") .style("color", "white") .style("padding", "10px") .style("width", "250px") .style("text-align", "center") .style("font-size", "12px") .offset([-10, -10]) .html((d) => { const hoveredElement = d3.event.target; return `${getCodebookDescriptions(hoveredElement.textContent)}`; }); svg.call(axisTip); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x_scale)) .selectAll("text") .attr("transform", "rotate(-90)") .attr("text-anchor", "end") .attr("dy", "-0.5em") .attr("dx", "-0.5em") .style("font-size", "14px") .on("mouseover", axisTip.show) .on("mouseout", axisTip.hide); g.append("text") .attr("x", width / 2) .attr("y", height + 450) .style("text-anchor", "middle") .style("font-size", "16px") .text("Themes"); g.append("g") .call(d3.axisLeft(y_scale)) .style("font-size", "14px") .selectAll("text") .on("mouseover", axisTip.show) .on("mouseout", axisTip.hide); g.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -margin.left + 20) .style("text-anchor", "middle") .style("font-size", "16px") .text("Gender Concepts"); const tip = d3tip() .attr("class", "d3-tip") .style("background-color", "black") .style("color", "white") .style("padding", "10px") .style("width", "auto") .style("text-align", "center") .style("font-size", "12px") .html( (d) => `${d.genderConcept} & ${d.theme}
${d.value} countries: ${d.countries}` ); svg.call(tip); svg .selectAll() .data( getHeatMapData( levelSelected.value, filteredTheme, filteredGender, filteredCountry, filteredYears ) ) .enter() .append("circle") .attr("cx", (d) => x_scale(d.theme) + margin.left) .attr("cy", (d) => y_scale(d.genderConcept) - 200) .attr("r", (d) => { const scaledRadius = (d.value / maxValue) * (maxRadius - minRadius) + minRadius; return Math.min(maxRadius, scaledRadius); }) .attr("fill", (d) => color_scale(d.value)) .on("mouseover", tip.show) .on("mouseout", tip.hide); const legend = svg.append("g").attr("transform", (d) => `translate(0, 270)`); legend .selectAll("circle") .data(LegendValues) .enter() .append("circle") .attr("cx", (d, i) => 80 * i + 50) .attr("cy", height - 2 * 20 + 50) .attr("r", (d) => { const scaledRadius = (d / maxValue) * (maxRadius - minRadius) + minRadius; return Math.min(maxRadius, scaledRadius); }) .style("fill", (d) => color_scale(d)); legend .selectAll("text") .data(LegendValues) .enter() .append("text") .text((d) => d + 1) .attr("x", (d, i) => 80 * i + 45) .attr("y", height - 20 / 2 + 75) .style("font-size", "12pt") .style("font-family", "Consolas, courier") .style("fill", "#aaa"); return svg.node(); }36:T1e4a,function MultiSelectImpl(data, config = {}) { const elemNative = html`

`; const elem = d3 .select(elemNative) .select("select") .style("width", "300px") .property("multiple", "true"); let choice = null; setTimeout(() => { choice = new Choices(elem.node(), { allowHTML: true, placeholder: true, placeholderValue: "Choose values", delimiter: ",", editItems: true, removeItemButton: true, duplicateItemsAllowed: false, ...config }); const values = choice.getValue().map((d) => d.value); elemNative.value = values; elemNative.dispatchEvent(new CustomEvent("input")); }); const node = elem.node(); elem.on("change", function (e) { const values = choice.getValue().map((d) => d.value); console.log("Selected values 1:", values); elemNative.value = values; elemNative.dispatchEvent(new CustomEvent("input")); }); return elemNative; }37:[{"id":"8984f1864bb902a1170caf772b025e7bc45749423edaa722461a82277784b584194d171845b301ff2910741c3aaa79cd2aeec173e0bb940ed6ba11cc48904682","href":"https://static.observableusercontent.com/files/8984f1864bb902a1170caf772b025e7bc45749423edaa722461a82277784b584194d171845b301ff2910741c3aaa79cd2aeec173e0bb940ed6ba11cc48904682","name":"Untitled(1).png","type":"image/png","lastModified":1715323870116.329,"size":8371},{"id":"d6183fdf5d93ed7aa419d163348ee3acfa5bbf61ea42fdbaa3664c3d4a11fe527a6c10bc8c311ae6e61528b258ccb972edfe98f19f16570f320e295d690c36a3","href":"https://static.observableusercontent.com/files/d6183fdf5d93ed7aa419d163348ee3acfa5bbf61ea42fdbaa3664c3d4a11fe527a6c10bc8c311ae6e61528b258ccb972edfe98f19f16570f320e295d690c36a3","name":"1200px-UK_Research_and_Innovation_logo.svg.png","type":"image/png","lastModified":1715323870174.624,"size":39506},{"id":"be7ec27dc84ac8bfad818abf7a6136317000ebb1830e674d0f89734e6c76b816d50690a4134911b4e1dc58da292f35231237e5f3c38df8d0f1942355717d4c70","href":"https://static.observableusercontent.com/files/be7ec27dc84ac8bfad818abf7a6136317000ebb1830e674d0f89734e6c76b816d50690a4134911b4e1dc58da292f35231237e5f3c38df8d0f1942355717d4c70","name":"eu_funded_en.jpg","type":"image/jpeg","lastModified":1715323870384.634,"size":119930}] 2e:{"title":"A Typology of Gender-Based Needs (WP1)","cells":[{"id":0,"value":"# A Typology of Gender-Based Needs (WP1)\nAs first part of the empirical data analysis of UNTWIST, the project team conducted a cross national meta-literature review of an interdisciplinary collection of 406 articles from feminist, queer and masculinity studies. The selection was based on a theoretical sampling of different types of gender-based needs‘ discussed in the literature in the different country-contexts. Based on an inductive analysis, UNTWIST developed a typology of 24 types of gender-based needs, which are located in different policy areas and are accessible through different gender perspectives (concepts). ","pinned":false,"hidden":false,"mode":"md"},{"id":1763,"value":"Explore the codes: [Code book](https://observablehq.com/d/2b3bac415a670ace)","pinned":false,"hidden":false,"mode":"md"},{"id":1857,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"toc({\n title: \"Index\",\n headers: \"h2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"## General overview of the database","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"### Number of papers analysed, by country and publication date","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"⚠ *Three papers from Switzerland have been removed from \nthis chart since they don't have a publication year*","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"### Heatmap: Overview of the co-occurence between gender concept/perspective and policy area across country contexts\n\nEach bubble of the map indicates the number of countries that address the specific intersection between a gender concept/perspective and a policy theme. The darker the color of the cell and the larger the circle, the greater the number of countries associated with that intersection. The graph shows that there are 15 ideal types of gender-based needs which are present across all six country-contexts.","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"## Explore sublevel data","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"### Sankey Diagram on co-occurences of specific policy areas and gender-concepts","pinned":false,"hidden":false,"mode":"md"},{"id":1780,"value":"This diagram facilitates exploration through categories to observe correlations between them. \n\n**Nodes:** *Each node on the left represents a gender concept and each node on the right represents a theme.*\n\n**Select a node:** *Clicking a node reveals or conceals the sub-levels of the gender concept or category. Nodes representing gender norms and values also serve as filters when expanded, hiding the other gender concepts, to provide a more accurate overview.*\n\n*Hovering over a node also displays the number of references each node has, and hovering over a link reveals the number of references for each correlation.*\n\n**Filters: ** *The diagram can be filtered by a range of years or by country. Breadcrumbs or nodes can be used to navigate backwards.*","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"viewof years_interval = interval(yearInterval, {\n step: 1,\n value: yearInterval\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"viewof sankeyCountry = Inputs.select([null].concat(countries), {\n label: \"Select a country\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2056,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"### Interactive tool \nHeatmap allowing to explore the intersections from Graph 1 by including sub-level codes for both policy areas and gender concepts as well as filtering for countries or themes. This graph allows for a more fine-grained understanding of the characteristics of gender-based needs.","pinned":false,"hidden":false,"mode":"md"},{"id":1652,"value":"*Each cell of the map indicates the number of countries that address the specific intersection between a gender concept and a theme. The darker the color of the cell and the larger the circle, the greater the number of countries associated with that combination.*","pinned":false,"hidden":false,"mode":"md"},{"id":1783,"value":"**Select a Level:**\n*The lower levels allow you to explore more detailed subcategories within the main GenderConcept and Theme categories. This provides the ability to drill down into specific areas of interest and obtain more detailed information on particular gender topics and concepts.*\n","pinned":false,"hidden":false,"mode":"md"},{"id":1789,"value":"**Theme and GenderConcept filters:**\n*Provide the ability to customise the visualization, allowing users to select specific gender topics and concepts to focus on particular areas of interest. By applying these filters, users can adjust the heatmap presentation according to their specific research needs and objectives.*","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"viewof filteredYears = interval([yearInterval[0], yearInterval[1]], {\n step: 1,\n value: [yearInterval[0], yearInterval[1]]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"viewof filteredCountry = Inputs.select([null].concat(countries), {\n label: \"Select a country\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"viewof levelSelected = Inputs.select(\n [\n { name: \"Level 2 subcodes\", value: 2 },\n { name: \"Level 3 subcodes\", value: 3 }\n ],\n {\n label: \"Select a level\",\n format: (x) => x.name\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"viewof filteredGender = Inputs.select(\n [null].concat(genderConcepts.map((o) => o.level)),\n {\n label: \"Select a gender concept\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof filteredTheme = Inputs.select(\n [null].concat(themes.map((o) => o.level)),\n {\n label: \"Select a theme\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"## Paper finder","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"viewof papersResult = Inputs.search(allData, { placeholder: \"Search...\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"*Each selection in the multiselect acts as a filter. When users choose specific topics and genre concepts, the system automatically filters the data and presents only scientific papers related to those selections.*","pinned":false,"hidden":false,"mode":"md"},{"id":1801,"value":"*Below is the list of filtered papers with more detailed information, with the option to browse through them by clicking on the buttons*","pinned":false,"hidden":false,"mode":"md"},{"id":802,"value":"viewof selected = MultiSelectImpl(columnNames)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof selection = Inputs.table(selectedRows, {\n columns: [\"id\", \"country\", \"author\", \"originial_title\", \"year\"],\n format: {\n year: d3.format(\"d\")\n },\n required: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"buttonsHTML = html`\n

\n ${buttonPrev} ${buttonNext} \n \n ${(paperIndex + 1).toString() + \"/\" + getRange().length.toString()}\n \n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"papersSelected = finderUpdateSearchAndDescription(\n papersResult,\n selection.length === 0 ? selectedRows : selection,\n getIndex(paperIndex)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"notebookSectionAuthors(\n [\n \"Ann-Kathrin Rothermel\",\n \"Valentina Nerino\",\n \"Leandra Bias\",\n \"Michèle Amacker\"\n ],\n \"Antonia María Ruiz Jiménez\",\n [\n \"Judith Acsády\",\n \"Lidia Balogh\",\n \"Veronika Paski\",\n \"Alexandra Sipos\",\n \"Katalin Tardos\",\n \"Anna Ujlaki\",\n \"Colm Flaherty\",\n \"Laura Horn\",\n \"Valeria Pisani\",\n \"Edurne Bartolomé-Peral\",\n \"Steffen Bay Rasmussen\",\n \"Vincent Druliolle\",\n \"Ayuxhan Kamatayeva\",\n \"Carlos Nagore\",\n \"Mariana Sendra\",\n \"Giuseppe Cartey\"\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"notebookSectionCite(\n \"UntwistPapersOverview\",\n \"A Typology of Gender-Based Needs\",\n \"UNTWIST Project\",\n \"Tool to overview and search the different papers analysed for the EU Untwist project\",\n \"https://observablehq.com/@untwist/wp1\",\n 2024,\n \"en\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"notebookSectionHowToExport()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2039,"value":"notebookSectionLicense()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2037,"value":"notebookSectionFundingDisclaimer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1868,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2035,"value":"notebookSectionContactUs()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"notebookSectionExploreWP()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"notebookSectionDivider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"## Data acquisition and functionality","pinned":false,"hidden":false,"mode":"md"},{"id":1014,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"#### Sankey","pinned":false,"hidden":false,"mode":"md"},{"id":1126,"value":"mutable themesFilter = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"mutable genderConceptsFilter = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"#### Finder","pinned":false,"hidden":false,"mode":"md"},{"id":2029,"value":"##### Variables","pinned":false,"hidden":false,"mode":"md"},{"id":1415,"value":"mutable paperIndex = 0\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"rows = papersResult.map((item) => {\n return {\n id: item.id,\n ...item\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"columnsSelected = {\n const allOptions = columnNames.slice(1);\n console.log(\"columns selected\", selected);\n if (selected.includes(\"Seleccionar Todos\")) {\n // més d'un valor seleccionat\n if (selected.length > 1) {\n //si es selecciona un altre valor, eliminar el \"Seleccionar Todos\"\n if (selected.indexOf(\"Seleccionar Todos\") !== selected.length - 1) {\n selected.splice(selected.indexOf(\"Seleccionar Todos\"), 1);\n return selected;\n }\n\n selected.length = 0;\n Array.prototype.push.apply(selected, allOptions);\n return selected;\n } else {\n selected.length = 0;\n Array.prototype.push.apply(selected, allOptions);\n return selected;\n }\n } else if (selected.length === 0) {\n selected.length = 0;\n Array.prototype.push.apply(selected, allOptions);\n return selected;\n }\n\n return selected;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"columnNames = getLabels(false, 2).concat(getLabels(true, 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"selectedRows = {\n if (columnsSelected.length === columnNames.length - 1) return rows;\n else\n return rows.filter((row) => {\n const codes = getAllPaths(row.themes, 2, \"T\").concat(\n getAllPaths(row.gender_concepts, 2, \"GC\")\n );\n return columnsSelected.every((selected) => {\n return codes.some((code) => code.includes(selected));\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2020,"value":"##### HTML Elements","pinned":false,"hidden":false,"mode":"md"},{"id":1432,"value":"buttonNext = {\n const button = html`\n `;\n // button.onclick = () => a.push(mutable x++);\n button.onclick = () => {\n updatePaperIndex(1);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"buttonPrev = {\n const button = html`\n `;\n // button.onclick = () => a.push(mutable x++);\n button.onclick = () => {\n updatePaperIndex(-1);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"##### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1548,"value":"function getRange() {\n var length = selection.length !== 0 ? selection.length : selectedRows.length;\n return Array.from({ length: length }, (_, index) => index);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"function updatePaperIndex(sum) {\n var range = getRange();\n if (range.find((id) => paperIndex + sum === id) === undefined) {\n if (range.length < paperIndex) {\n mutable paperIndex = range[0];\n }\n } else mutable paperIndex = paperIndex + sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"function getIndex(paperIndex) {\n var range = getRange();\n if (range.find((id) => paperIndex === id) === undefined) {\n if (range.length < paperIndex) {\n mutable paperIndex = range[0];\n }\n }\n return paperIndex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"function updateSelectedColumns(columns) {\n if (columns.includes(\"Seleccionar Todos\")) {\n // més d'un valor seleccionat\n if (columns.length > 1) {\n //si es selecciona un altre valor, eliminar el \"Seleccionar Todos\"\n if (columns.indexOf(\"Seleccionar Todos\") !== columns.length - 1) {\n columns.splice(columns.indexOf(\"Seleccionar Todos\"), 1);\n return columns;\n }\n\n columns = [\"Seleccionar Todos\"];\n return columns;\n } else {\n columns = [\"Seleccionar Todos\"];\n return columns;\n }\n } else if (columns.length === 0) {\n columns = [\"Seleccionar Todos\"];\n return columns;\n }\n\n return columns;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1205,"value":"Choices = require(\"choices.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"d3tip = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"d3sankey = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import { interval } from \"@mootari/range-slider@1781\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"import { MultiSelect } from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"import {\n barPlotData,\n allData,\n getHeatMapData,\n getLabels,\n getAllPaths,\n getSankeyStructure,\n updateSankeyNavigation,\n finderUpdateSearchAndDescription,\n getCodebookDescriptions,\n yearInterval,\n countries,\n genderConcepts,\n themes\n} from \"@untwist/wp1-data-management\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import {\n categorical_color_scheme,\n categorical_color_scheme_countries,\n continious_color_scheme_1,\n continious_color_scheme_2,\n continious_color_scheme_3\n} from \"@untwist/project-color-schemes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2001,"value":"import {\n notebookSectionDivider,\n notebookSectionContactUs,\n notebookSectionFundingDisclaimer,\n notebookSectionLicense,\n notebookSectionHowToExport,\n notebookSectionCite,\n notebookSectionAuthors,\n notebookSectionExploreWP\n} from \"@untwist/section-blocks\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}