31:T447,# #682 Backlog in asylum applications in the European Union as of December 2021 **Article published in Civio (04/04/22):** - English version: [Europe welcomes Ukrainian refugees with an asylum system that averages more than 15 months of delay](https://civio.es/2022/04/04/europe-welcomes-ukrainian-refugees-with-an-asylum-system-that-averages-more-than-15-months-of-delay/). - Spanish version: [Europa afronta una nueva crisis de refugiados con más de 15 meses de retraso medio en las solicitudes de asilo](https://civio.es/2022/04/04/europa-afronta-una-nueva-crisis-de-refugiados-con-mas-de-15-meses-de-retraso-medio-en-las-solicitudes-de-asilo/). **References**: - [D3 Chart Updates in Observable](https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable) by [Mike Freeman](https://observablehq.com/@mkfreeman) 🙌🏻 >> how to integrate the d3 update pattern in Observable cells. - [Refugees line interactive](https://observablehq.com/@sandraviz/refugees_line) by [Sandraviz](https://sandraviz.com/) 🙌🏻 >> how to nicely add tooltip interactions on a d3 line chart. ---32:T2cc2,viewof chart = { let myCountry = defaultCountry; // Map const svg = d3 .create("svg") .attr("width", mapWidth) .attr("height", mapHeight); // MAP VALUE const element = svg.node(); element.value = myCountry; // EU27 totals/ES by default, depending on the article const patternSize = 3; const patternWidth = 3; const patternAngle = 30; const patternColor = colorPostLight; // DEFS elements: const defs = svg.append("defs"); // Hatch const hatchStripes = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "hatchStripes"); hatchStripes .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", patternColor) .style("stroke-width", patternWidth); // Main viz map/cartogram const mapViz = svg.append("g").attr("id", "asylumRequests-map"); // Country paths const map = mapViz.append("g").attr("class", "eu-map"); const mapAux = map .append("rect") .attr("class", "aux") .attr("x", 0) .attr("y", 0) .attr("width", mapWidth) .attr("height", mapHeight) .style("fill", "transparent") .style("pointer-events", "all") .on("click", onResetMap); const context = map .append("g") .attr("class", "countries-context2") .selectAll("path") .data(land.features) .join("path") .attr("d", path) .style("fill", "url(#hatchStripes)") .style("pointer-events", "none"); const countries = map .append("g") .attr("class", "countries") .selectAll("path") .data(dataset) .join("path") .attr("id", (d) => `country-${d.properties.id}`) .attr("class", (d) => d.properties.id) .attr("d", path) .style("fill", countryColorFill) .style("stroke", countryColorStrokeBase) // Make small countries bigger so they are easy to interact with .style("stroke-width", (d) => d.properties.id === "MT" || d.properties.id === "LU" || d.properties.id === "CY" ? 10 : 1.5 ) .style("fill-opacity", countryFillOpacityBase); const EU = map .append("g") .attr("class", "eu-boundary") .selectAll("path") .data(euBoundaryTopojson.features) .join("path") .attr("id", "EU27") .attr("d", path) .style("fill-opacity", euFillOpacityBase) .style("fill", "transparent") .style("pointer-events", "none"); // Map Title const title = mapViz .append("g") .attr("class", "map-title") .attr("transform", `translate(${myWidth / 2},40)`) .style("text-anchor", "middle") .style( "font-size", languageSelector === "it" || languageSelector === "de" ? "1rem" : "1.15rem" ) .style("font-weight", 700); if (isMobile) { title.append("text").text(dataLocale[languageSelector].mapTitleMobile1); title .append("text") .attr("dy", 25) .text(dataLocale[languageSelector].mapTitleMobile2); title .append("text") .attr("dy", 50) .text(dataLocale[languageSelector].mapTitleMobile3); } else { title.append("text").text(dataLocale[languageSelector].mapTitleDesktop1); title .append("text") .attr("dy", 25) .text(dataLocale[languageSelector].mapTitleDesktop2); } // Interaction countries .style("cursor", "pointer") .on("mouseover", onMouseOverCountry) .on("mouseout", onMouseOutCountry) .on("click", onClickCountry); // Higlitht "EU27" / different country for different embeds. if (myCountry === "EU27") { map.select(`#EU27`).classed("myCountry", true); } else { const myCountryPath = map .select(`#country-${myCountry}`) .raise() .classed("myCountry", true); } // Bubbles // Size according to TOTAL APPLICATIONS map .append("g") .attr("class", "bubbles") .selectAll("circle") .data(dataset) .join("circle") .attr("class", (d) => d.properties.id) .attr("id", (d) => `bubble-${d.properties.id}`) .attr("r", function (d) { const myData = d.properties.asylumTotalRequests.filter( (d) => d.period.getTime() == dateTimeline.getTime() )[0]; return myData ? radiusScale(myData["total applications"]) : 0; }) .attr("cx", (d) => projection(d.properties.centroid)[0]) .attr("cy", (d) => projection(d.properties.centroid)[1]) .style("fill", function (d) { const myData = d.properties.monthlyBacklog; if (myData == 0) return 0; else return colorScale(myData[datasetSelector]); }) .attr("fill-opacity", bubbleFillOpacityBase) .attr("stroke", colorNeutral(300)) .attr("stroke-width", 0.5) .style("pointer-events", "none"); // Map Labels map .append("g") .attr("class", "labels") .selectAll("text") .data(dataset) .join("text") .attr("class", (d) => d.properties.id) .attr("x", (d) => projection(d.properties.centroid)[0]) .attr("y", (d) => projection(d.properties.centroid)[1]) .attr("dx", (d) => d.properties.id === "IE" || d.properties.id === "CY" ? -20 : 0 ) .attr("dy", (d) => d.properties.id === "FI" || d.properties.id === "MT" ? 15 : 0 ) .text((d) => d.properties.id) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("fill", "black") .attr("font-size", "0.65rem") .attr("opacity", function (d) { const myData = d.properties.monthlyBacklog; if (myData == 0) return 0.1; else return fontOpacityScale(myData[datasetSelector]); }) .style("pointer-events", "none"); // DETAILED INFO - HTML const offset = mapMargin.left; const detailedInfoHeight = isMobile ? 590 : 300; const detailedInfoWidth = isMobile ? 220 : myWidth > detailedInfoBreakPoint ? 210 : 180; const detailedInfoX = isMobile ? myWidth / 2 - detailedInfoWidth / 2 : offset; const detailedInfo = mapViz.append("g").attr("class", "detailedInfo"); // Foreign object method // https://observablehq.com/@bumbeishvili/foreignobject-typical-usage const fo = detailedInfo .append("foreignObject") // Append for d3.v4 .attr("transform", `translate(${detailedInfoX},${detailedInfoHeight})`) .classed("legend-fo", true) .attr("width", detailedInfoWidth) .attr("height", 500) .style("padding-top", "5px") .style("padding-bottom", "5px") .style("pointer-events", "none"); fo.append("xhtml:div") // Append for d3.v4 .classed("legend-div", true) .style("text-align", isMobile ? "center" : "left") .html(fillDetailedInfo(myCountry, languageSelector)); // Interaction notes const colorInteractionNotes = colorPostPrimary; const interactionNoteHeight = isMobile ? 280 : 260; const interactionNoteX = isMobile ? myWidth / 2 : offset; const interactionNotes = mapViz .append("g") .attr("class", "interaction-notes") .style("text-anchor", isMobile ? "middle" : "start") .attr( "transform", `translate(${interactionNoteX},${interactionNoteHeight})` ); const backToEU = interactionNotes .append("g") .attr("class", "backToEU") .style("opacity", 0) .style("fill", colorInteractionNotes) .append("text") .text(dataLocale[languageSelector].backNote) .style("font-size", "0.8rem") .style("pointer-events", "all") .style("color", "inherit") .on("click", onResetMap) .style("cursor", "pointer"); const exploreCountries = interactionNotes .append("g") .attr("class", "interactionNote") .style("fill", colorInteractionNotes) .style("font-size", "0.8rem") .style("pointer-events", "none") .style("opacity", 1); exploreCountries .append("text") .text(dataLocale[languageSelector].interactNote1); exploreCountries .append("text") .attr("dy", 20) .text(dataLocale[languageSelector].interactNote2); //// INTERACTIONS function onClickCountry(event, d, i) { const myCountryId = d.properties.id; // Update this map and the rest too d3.selectAll(".myCountry").classed("myCountry", false); d3.select(this).classed("myCountry", true).raise(); // Foreign object tooltip d3.select(".legend-fo") .select(".legend-div") .html(fillDetailedInfo(myCountryId, languageSelector)); // Interaction notes d3.select(".backToEU").style("opacity", 1); d3.select(".interactionNote").style("opacity", 0); element.value = myCountryId; element.dispatchEvent(new CustomEvent("input")); } function onResetMap(event, d, i) { const myCountryId = "EU27"; // Update this map and the rest too d3.selectAll(".myCountry").classed("myCountry", false); // Higlight EU map.select(`#EU27`).classed("myCountry", true); // Foreign object tooltip d3.select(".legend-fo") .select(".legend-div") .html(fillDetailedInfo(myCountryId, languageSelector)); // Interaction notes d3.select(".backToEU").style("opacity", 0); d3.select(".interactionNote").style("opacity", 1); element.value = myCountryId; element.dispatchEvent(new CustomEvent("input")); } // LEGEND const legendRadius = [1000, 5000, 15000]; const legendHeight = isMobile ? mapMargin.top + 140 : mapMargin.top + 100; const legendX = isMobile ? myWidth / 2 - 70 : mapMargin.left + maxRadius / 2; const legend = mapViz .append("g") .attr("class", "legend") .attr("transform", `translate(${legendX},${legendHeight})`); const legendBubbles = legend .append("g") .attr("fill", "#777") .selectAll("g") .data(legendRadius) .join("g") //.attr("transform", `translate(0,150)`) .style("fill", colorNeutral(500)); legendBubbles .append("circle") .attr("fill", "none") .attr("stroke", "#bbb") .attr("cy", (d) => -radiusScale(d)) .attr("r", radiusScale); legendBubbles .append("text") .attr("y", (d) => -2 * radiusScale(d)) .attr("dy", (d, i) => (i == 0 ? "2.5em" : "1.2em")) .style("font-size", "0.6rem") .attr("text-anchor", "middle") .text(formatIntegersShort2); const legendBubbleTitle = legendBubbles .append("g") .attr("class", "legend-title") .style("text-anchor", "middle") .style("font-size", languageSelector === "de" ? "0.6rem" : "0.7rem") // For German long translations 😅 .attr("transform", "translate(0,30)"); legendBubbleTitle .append("text") .text(dataLocale[languageSelector].legendBubble1); legendBubbleTitle .append("text") .text(dataLocale[languageSelector].legendBubble2) .attr("dy", 15); legendBubbleTitle .append("text") .text(dataLocale[languageSelector].legendBubble3) .attr("dy", 30); const legendRampLegend = legend .append("g") .attr("class", "legend-ramp") .attr( "transform", `translate(${isMobile ? maxRadius - 5 : maxRadius - 20},20)` ) .append(createRampLegend); // SOURCES NOTE const sources = mapViz .append("g") .attr("id", "sources") .attr("transform", `translate(${mapMargin.left},25)`) .style("font-size", "0.7rem") .style("fill", colorNeutral(400)); const marginBottom = 30; sources .append("text") .attr("x", 0) .attr("y", mapHeight - marginBottom) .text(dataLocale[languageSelector].source); return svg.node(); }33:T3bed,detailedChart_updatePattern = { // https://observablehq.com/@observablehq/visibility await visibility(); const isEurope = selectedCountry === "EU27"; const svg = d3 .create("svg") .attr("width", myWidth) .attr("height", detailedChartHeight); // Prepare Chart elements const asylumTimeline = svg .append("g") .attr("id", `asylumApplications-timeline`); const rectsGroup = asylumTimeline .append("g") .attr("id", `asylumApplications-rects`); const pathGroup = asylumTimeline .append("g") .attr("id", `asylumApplications-path`); // Prepare chart Axis const axes = asylumTimeline.append("g").attr("id", "asylumPending-axes"); axes.append("g").call(xAxis); axes.append("g").call(yAxis); axes.append("g").call(yAxis2); // Prepare chart Title const chartTitle = asylumTimeline .append("g") .attr("id", `asylumApplications-title`) .style("font-size", "0.9rem") .style("font-weight", 700) .attr( "transform", isMobile ? `translate(${myWidth / 2},${20})` : `translate(10,${detailedChartMargin.top - 20})` ); chartTitle .append("text") .text("") .style("text-anchor", isMobile ? "middle" : "start"); // Prepare legend const legend = asylumTimeline .append("g") .attr("id", "asylumPending-legend") .style( "font-size", languageSelector === "fr" || languageSelector === "de" ? "0.65rem" : "0.7rem" ); // Smaller font-size for some long translations const legendPending = legend .append("g") .attr("id", "legend-pending") .style("font-weight", 700) .style("fill", colorBasePending); const legendTotals = legend .append("g") .attr("id", "legend-totals") .style("text-anchor", isMobile ? "end" : "start") // https://github.com/d3/d3-color#color_darker .style("fill", d3.color(colorBaseTotals).darker(1)); // Prepare interactions tooltips const tooltip = asylumTimeline .append("g") .attr("id", "asylumPending-tooltip"); const tooltipPending = tooltip.append("g").attr("id", "tooltip-pending"); const tooltipTotals = tooltip.append("g").attr("id", "tooltip-totals"); ///// // DATA UPDATE PATTERN ///// // https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable // When the data changes, do the following svg.node().drawData = function (myCountry) { // DATASETS // Pick and Filter data let datasetPending, datasetTotals, datumBacklog; if (isEurope) { // General EU27 datasetPending = data_pendingEU27; datasetTotals = data_totalsEU27; datumBacklog = data_monthlyBacklog.filter((d) => d.country === "EU27"); } else { // By country datasetPending = data_pendingByCountry.filter( (d) => d.country === myCountry ); datasetTotals = data_totalsByCountry.filter( (d) => d.country === myCountry ); datumBacklog = data_monthlyBacklog.filter((d) => d.country === myCountry); } // console.log(`is Europe? ${isEurope}`, datasetPending, datasetTotals); // Max values for y-scale const maxValuePending = d3.max(datasetPending.map((d) => d.pending)); const maxValueTotals = d3.max( datasetTotals.map((d) => d["total applications"]) ); const maxValueY = d3.max([maxValuePending, maxValueTotals]); // Last values for tooltips const isLT = myCountry === "LT"; const lastPendingValue = datasetPending[datasetPending.length - 1].pending; const lastTotalValue = datasetTotals[datasetTotals.length - 1]["total applications"]; // Update Scales yScaleApplications.domain([0, maxValueY]); // Update line generator (depends on y-scale) line.y((d) => yScaleApplications(+d.pending)); // Update y-Axis (depends on y-scale) asylumTimeline .select(".y-axis") .transition() .duration(durationTransitAxis) .call(d3.axisLeft(yScaleApplications).tickFormat(formatIntegersShort)); asylumTimeline .select(".y-axis2") .transition() .duration(durationTransitAxis) .call( d3 .axisLeft(yScaleApplications) .tickSize( -myWidth + detailedChartMargin.left + detailedChartMargin.right ) .tickValues(d3.range(0, maxValueY, 50000)) ); // Update Bars - totals applications const totalsBars = rectsGroup .selectAll("rect") .data(datasetTotals, (d) => d.period); // Enter/Update/Exit pattern // https://observablehq.com/@d3/selection-join totalsBars.join( (enter) => enter .append("rect") .attr("data-date", (d) => formatTime(d.period)) .attr("data-value", (d) => d["total applications"]) .classed("bar-totals", true) .attr("x", (d) => xScaleTimeBand(d.period)) .attr("width", xScaleTimeBand.bandwidth()) .style("fill", colorBaseTotals) // Transition .attr("y", (d) => yScaleApplications(0)) .attr("height", 0) .transition() .duration(durationTransitBars) .delay((d, i) => i * delayTransitBars) .attr("y", (d) => yScaleApplications(d["total applications"])) .attr( "height", (d) => yScaleApplications(0) - yScaleApplications(d["total applications"]) ), (update) => update .transition() .duration(durationTransitBars) .attr("y", (d) => yScaleApplications(d["total applications"])) .attr( "height", (d) => yScaleApplications(0) - yScaleApplications(d["total applications"]) ) ); // Update Path - pending applications const pendingPath = pathGroup.selectAll("path").data([datasetPending]); // Enter/Update/Exit pattern pendingPath.join( (enter) => enter .append("path") .attr("class", "line") .attr("d", line) .style("fill", "none") .style("stroke", colorBasePending) .style("stroke-width", "2px") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") // Line animation .attr("stroke-dasharray", function () { const l = d3.select(this).node().getTotalLength(); d3.select(this).attr("stroke-dashoffset", l); return `${l} ${l}`; }) //.interrupt() .transition() .duration(durationTimeSerie) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0), (update) => update .attr("d", line) .attr("stroke-dasharray", function () { const l = d3.select(this).node().getTotalLength(); d3.select(this).attr("stroke-dashoffset", l); return `${l} ${l}`; }) .interrupt() .transition() .duration(durationTimeSerie) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) ); // Update title (depends on country) if (isEurope) { chartTitle .select("text") .text(dataLocale[languageSelector].detailedChartTitleEU); } else { chartTitle.select("text").text(function () { if (languageSelector === "en") { return `${localeCountries[languageSelector][myCountry]} ${dataLocale[languageSelector].detailedChartTitleCountries}`; } else if (languageSelector === "fr") { return `${dataLocale[languageSelector].detailedChartTitleCountries} ${localeCountries[languageSelector]["prepositions1"][myCountry]} `; } else { return `${dataLocale[languageSelector].detailedChartTitleCountries} ${localeCountries[languageSelector][myCountry]}`; } }); } // Update legend const offsetLegend = 10; const tooClose = yScaleApplications(0) - yScaleApplications(lastPendingValue) <= 50; const extraOffset = tooClose ? 60 : 0; const legendPendingX = isMobile ? xScaleTime(timeDomain[0]) + offsetLegend : xScaleTime(timeRangeMax) + offsetLegend; const legendPendingY = isMobile ? yScaleApplications(maxValueY) + 20 : yScaleApplications(lastPendingValue) - extraOffset; legendPending.attr( "transform", `translate(${legendPendingX},${legendPendingY})` ); const lineHeight = 11; legendPending .append("text") .text(dataLocale[languageSelector].legendDetailedPending1); legendPending .append("text") .attr("dy", lineHeight) .text(dataLocale[languageSelector].legendDetailedPending2); legendPending .append("text") .attr("dy", lineHeight * 2) .text(dataLocale[languageSelector].legendDetailedPending3); legendPending .append("text") .attr("dy", lineHeight * 3) .text(dataLocale[languageSelector].legendDetailedPending4); const legendTotalX = isMobile ? xScaleTime(timeRangeMax) : xScaleTime(timeRangeMax) + offsetLegend; const legendTotalY = isMobile ? yScaleApplications(0) + 45 : yScaleApplications(0) - 20; legendTotals.attr( "transform", `translate(${legendTotalX},${legendTotalY})` ); legendTotals .append("text") .text(dataLocale[languageSelector].legendDetailedTotal1); legendTotals .append("text") .attr("dy", lineHeight) .text(dataLocale[languageSelector].legendDetailedTotal2); legendTotals .append("text") .attr("dy", lineHeight * 2) .text(dataLocale[languageSelector].legendDetailedTotal3); // TODO: Refactor!! // Interactions // Set default state mouseDefaultStateTransition(); // Mouse move and mouseleave svg.on("touchmove mousemove", mouseInteract); svg.on("touchend mouseleave", mouseDefaultState); function mouseDefaultStateTransition(event) { // Reset totals bars asylumTimeline.selectAll(".bar-totals").style("fill", colorBaseTotals); // Higlight one bar asylumTimeline .selectAll(".bar-totals") .filter(function (d) { return d3.select(this).attr("data-date") === formatTime(timeRangeMax); }) .style("fill", colorHighlightedTotals); // For improving readibility const checkYDistance = Math.abs( yScaleApplications(lastPendingValue) - yScaleApplications(lastTotalValue) ); let isTooClose = checkYDistance <= 50; let isPT = myCountry === "PT"; // Tooltips tooltipPending .style("opacity", 0) .attr( "transform", `translate(${xScaleTime(timeRangeMax)},${yScaleApplications( lastPendingValue )})` ) .call( callout, `${formatIntegers(lastPendingValue)}&${formatTime(timeRangeMax)}` ) .transition() .delay(durationTimeSerie) .style("opacity", 1); tooltipTotals .style("opacity", 0) .attr( "transform", `translate(${xScaleTime(timeRangeMax)},${yScaleApplications( lastTotalValue )})` ) .attr( "transform", `translate(${xScaleTime(timeRangeMax)},${ isTooClose || isPT ? yScaleApplications(0) + 50 : yScaleApplications(lastTotalValue) })` ) .call( calloutTotals, `${formatIntegers(lastTotalValue)}&${formatTime(timeRangeMax)}` ) .transition() .delay(durationTimeSerie) .style("opacity", 1); } function mouseDefaultState(event) { // Reset totals bars asylumTimeline.selectAll(".bar-totals").style("fill", colorBaseTotals); // Higlight one bar asylumTimeline .selectAll(".bar-totals") .filter(function (d) { return d3.select(this).attr("data-date") === formatTime(timeRangeMax); }) .style("fill", colorHighlightedTotals); // For improving readibility const checkYDistance = Math.abs( yScaleApplications(lastPendingValue) - yScaleApplications(lastTotalValue) ); let isTooClose = checkYDistance <= 50; let isPT = myCountry === "PT"; // Tooltips tooltipPending .attr( "transform", `translate(${xScaleTime(timeRangeMax)},${yScaleApplications( lastPendingValue )})` ) .call( callout, `${formatIntegers(lastPendingValue)}&${formatTime(timeRangeMax)}` ); tooltipTotals .attr( "transform", `translate(${xScaleTime(timeRangeMax)},${yScaleApplications( lastTotalValue )})` ) .attr( "transform", `translate(${xScaleTime(timeRangeMax)},${ isTooClose || isPT ? yScaleApplications(0) + 50 : yScaleApplications(lastTotalValue) })` ) .call( calloutTotals, `${formatIntegers(lastTotalValue)}&${formatTime(timeRangeMax)}` ); } function mouseInteract(event) { /*const { period, pending } = calculateBisect(datasetPending)( d3.pointer(event, this)[0] );*/ const bisectPending = calculateBisect(datasetPending)( d3.pointer(event, this)[0] ); const bisectTotals = calculateBisect(datasetTotals)( d3.pointer(event, this)[0] ); // If outside the range, break if (!bisectPending && !bisectTotals) return; const periodPending = bisectPending.period; const pending = bisectPending.pending; const periodTotal = bisectTotals.period; const totals = bisectTotals["total applications"]; // Reset totals bars asylumTimeline.selectAll(".bar-totals").style("fill", colorBaseTotals); // Higlight one bar asylumTimeline .selectAll(".bar-totals") .filter(function (d) { return d3.select(this).attr("data-date") === formatTime(periodTotal); }) .style("fill", colorHighlightedTotals); // For improving readibility const checkYDistance = Math.abs( yScaleApplications(pending) - yScaleApplications(totals) ); let isTooClose = checkYDistance <= 50; let isPT = myCountry === "PT"; // Tooltips tooltipPending .attr( "transform", `translate(${xScaleTime(periodPending)},${yScaleApplications( pending )})` ) .call( callout, `${formatIntegers(pending)}&${formatTime(periodPending)}` ); tooltipTotals .attr( "transform", `translate(${xScaleTime(periodTotal)},${yScaleApplications(totals)})` ) .attr( "transform", `translate(${xScaleTime(periodTotal)},${ isTooClose || isPT ? yScaleApplications(0) + 50 : yScaleApplications(totals) })` ) .call( calloutTotals, `${formatIntegers(totals)}&${formatTime(periodTotal)}` ); } }; return svg.node(); }34:T537,callout = (g, value) => { if (!value) return g.style("display", "none"); const myDate = value.split("&")[1].split("-")[1]; const onTheLeftExtreme = myDate < 2009; const onTheRightExtreme = myDate >= 2021; g.style("display", null) .style("pointer-events", "none") .style("font-size", "0.75rem"); const text = g .selectAll("text") .data([null]) .join("text") .call((text) => text .selectAll("tspan") .data((value + "").split("&").reverse()) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.2}em`) .style("font-weight", (_, i) => (i ? "bold" : null)) .style( "text-anchor", onTheLeftExtreme ? "start" : onTheRightExtreme ? "end" : "middle" ) .style("fill", "none") .style("stroke", "white") .style("stroke-width", 4) .style("stroke-linejoin", "round") .text((d) => d) .clone(true) .style("fill", "black") .style("stroke", "none") .style("pointer-events", "none") ); const circle = g .selectAll("circle") .data([null]) .join("circle") .attr("x", 0) .attr("y", 0) .attr("r", 2.5); const { x, y, width: w, height: h } = text.node().getBBox(); text.attr("transform", `translate(0,${y - 20})`); }35:T496,calloutTotals = (g, value) => { if (!value) return g.style("display", "none"); const myDate = value.split("&")[1].split("-")[1]; const onTheLeftExtreme = myDate < 2009; const onTheRightExtreme = myDate >= 2021; const myData = value.split("&")[0]; g.style("display", null) .style("pointer-events", "none") .style("font-size", "0.75rem"); const text = g .selectAll("text") .data([null]) .join("text") .call((text) => text .selectAll("tspan") .data([myData]) .join("tspan") .attr("x", 0) .attr("y", "0.6em") .style("font-weight", "bold") .style( "text-anchor", onTheLeftExtreme ? "start" : onTheRightExtreme ? "end" : "middle" ) .style("fill", "none") .style("stroke", "white") .style("stroke-width", 4) .style("stroke-linejoin", "round") .text((d) => d) .clone(true) .style("fill", "black") .style("stroke", "none") .style("pointer-events", "none") ); const { x, y, width: w, height: h } = text.node().getBBox(); text.attr("transform", `translate(0,${y - 20})`); }36:T18e2,localeCountries = ({ en: { AL: "Albania", AT: "Austria", AM: "Armenia", BY: "Belarus", BE: "Belgium", BA: "Bosnia and Herzegovina", BG: "Bulgaria", HR: "Croatia", CY: "Cyprus", CZ: "Czech Republic", DK: "Denmark", EE: "Estonia", FI: "Finland", FR: "France", GE: "Georgia", DE: "Germany", EL: "Greece", HU: "Hungary", IS: "Iceland", IE: "Ireland", IT: "Italy", KZ: "Kazakhstan", LV: "Latvia", LT: "Lithuania", LU: "Luxemburg", MK: "Macedonia", MT: "Malta", MD: "Moldova", ME: "Montenegro", NO: "Norway", NL: "The Netherlands", PL: "Poland", PT: "Portugal", RO: "Romania", RS: "Serbia", RU: "Russia", SK: "Slovakia", SI: "Slovenia", ES: "Spain", SE: "Sweden", CH: "Switzerland", TR: "Turkey", UA: "Ukraine", UK: "United Kingdom", EU27: "the EU" }, es: { AL: "Albania", AT: "Austria", AM: "Armenia", BY: "Bielorrusia", BE: "Bélgica", BA: "Bosnia y Herzegovina", BG: "Bulgaria", HR: "Croacia", CY: "Chipre", CZ: "República Checa", DK: "Dinamarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", GE: "Georgia", DE: "Alemania", EL: "Grecia", HU: "Hungría", IS: "Islandia", IE: "Irlanda", KZ: "Kazajistán", IT: "Italia", LV: "Letonia", LT: "Lituania", LU: "Luxemburgo", MK: "Macedonia", MT: "Malta", MD: "Moldavia", ME: "Montenegro", NO: "Noruega", NL: "Países Bajos", PL: "Polonia", PT: "Portugal", RO: "Rumanía", RS: "Serbia", RU: "Rusia", SK: "Eslovaquia", SI: "Eslovenia", ES: "España", SE: "Suecia", CH: "Suiza", TR: "Turquía", UA: "Ucrania", UK: "Reino Unido", EU27: "la Unión Europea" }, it: { AT: "Austria", BE: "Belgio", BG: "Bulgaria", HR: "Croazia", CZ: "Cechia", DK: "Danimarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", DE: "Germania", EL: "Grecia", HU: "Ungheria", IE: "Irlanda", IT: "Italia", LV: "Lettonia", LT: "Lituania", MT: "Malta", NL: "Paesi Bassi", PL: "Polonia", PT: "Portogallo", RO: "Romania", SK: "Slovacchia", SI: "Slovenia", ES: "Spagna", SE: "Svezia", EU27: "EU" }, fr: { AT: "Autriche", BE: "Belgique", BG: "Bulgarie", HR: "Croatie", CY: "République de Chypre", CZ: "République tchèque", DK: "Danemark", EE: "Estonie", FI: "Finlande", FR: "France", DE: "Allemagne", EL: "Grèce", HU: "Hongrie", IE: "Irlande", IT: "Italie", LV: "Lettonie", LT: "Lituanie", LU: "Luxembourg", MT: "Malte", NL: "Pays-Bas", PL: "Pologne", PT: "Portugal", RO: "Roumanie", SK: "Slovaquie", SI: "Slovénie", ES: "Espagne", SE: "Suède", EU27: "UE", prepositions1: { AT: "de l'Autriche", BE: "de la Belgique", BG: "de la Bulgarie", HR: "de la Croatie", CY: "de la République de Chypre", CZ: "de la République tchèque", DK: "du Danemark", EE: "de l'Estonie", FI: "de la Finlande", FR: "de la France", DE: "de l'Allemagne", EL: "de la Grèce", HU: "de la Hongrie", IE: "de l'Irlande", IT: "de l'Italie", LV: "de la Lettonie", LT: "de la Lituanie", LU: "du Luxembourg", MT: "de Malte", NL: "des Pays-Bas", PL: "de la Pologne", PT: "du Portugal", RO: "de la Roumanie", SK: "de la Slovaquie", SI: "de la Slovénie", ES: "de l'Espagne", SE: "de la Suède", EU27: "de l'UE" }, prepositions2: { AT: "en Autriche", BE: "eb Belgique", BG: "en Bulgarie", HR: "en Croatie", CY: "en République de Chypre", CZ: "en République tchèque", DK: "au Danemark", EE: "en Estonie", FI: "en Finlande", FR: "en France", DE: "en Allemagne", EL: "en Grèce", HU: "en Hongrie", IE: "en Irlande", IT: "en Italie", LV: "en Lettonie", LT: "en Lituanie", LU: "au Luxembourg", MT: "à Malte", NL: "aux Pays-Bas", PL: "en Pologne", PT: "au Portugal", RO: "en Roumanie", SK: "en Slovaquie", SI: "en Slovénie", ES: "en Espagne", SE: "en Suède", EU27: "dans l'UE" } }, de: { AT: "Österreich", BE: "Belgien", BG: "Bulgarien", HR: "Kroatien", CY: "de la République de Chypre", CZ: "Tschechische Republik", DK: "Dänemark", EE: "Estland", FI: "Finnland", FR: "Frankreich", DE: "Deutschland", EL: "Griechenland", HU: "Ungarn", IE: "Irland", IT: "Italien", LV: "Lettland", LT: "Litauen", LU: "Luxemburg", MT: "Malta", NL: "Niederlande", PL: "Polen", PT: "Portugal", RO: "Rumänien", SK: "Slowakei", SI: "Slowenien", ES: "Spanien", SE: "Schweden" }, el: { UK: "Ηνωμένο Βασίλειο", SE: "Σουηδία", ES: "Ισπανία", SI: "Σλοβενία", SK: "Σλοβακία", RO: "Ρουμανία", PT: "Πορτογαλία", PL: "Πολωνία", NL: "Κάτω Χώρες", MT: "Μάλτα", LT: "Λιθουανία", LV: "Λετονία", IT: "Ιταλία", IE: "Ιρλανδία", HU: "Ουγγαρία", EL: "Ελλάδα", DE: "Γερμανία", FR: "Γαλλία", FI: "Φινλανδία", EE: "Εσθονία", DK: "Δανία", CZ: "Τσεχία", HR: "Κροατία", BG: "Βουλγαρία", BE: "Βέλγιο", AT: "Αυστρία", AL: "Αλβανία", AM: "Αρμενία", BY: "Λευκορωσία", BA: "Βοσνία και Ερζεγοβίνη", CY: "Κύπρος", GE: "Γεωργία", IS: "Ισλανδία", KZ: "Καζακστάν", LU: "Λουξεμβούργο", MK: "Βόρεια Μακεδονία", MD: "Μολδαβία", ME: "Μαυροβούνιο", NO: "Νορβηγία", RS: "Σερβία", RU: "Ρωσία", CH: "Ελβετία", TR: "Τουρκία", UA: "Ουκρανία", EU27: "EU27" } })37:T1e17,function fillDetailedInfo(countryCode, language) { let dataTotals, dataPending, dataBacklog; if (countryCode === "EU27") { dataTotals = data_totalsEU27; dataPending = data_pendingEU27; dataBacklog = data_monthlyBacklog.filter((d) => d.country === "EU27")[0]; } else { dataTotals = data_totalsByCountry.filter((d) => d.country === countryCode); dataPending = data_pendingByCountry.filter( (d) => d.country === countryCode ); dataBacklog = data_monthlyBacklog.filter( (d) => d.country === countryCode )[0]; } const colorBacklog = d3.rgb(colorScale(dataBacklog[datasetSelector])); colorBacklog.opacity = bubbleFillOpacityBase; if (language === "es") { return `

En ${ localeCountries[languageSelector][countryCode] } se recibieron ${formatIntegers( dataTotals.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0]["total applications"] )} peticiones de asilo durante diciembre de 2021.

${ countryCode === "EU27" ? `A final de año había acumuladas ${formatIntegers( dataBacklog.pending )} peticiones pendientes de resolver, lo que al ritmo reciente del conjunto de la UE supone ` : `A final de año había acumuladas ${formatIntegers( dataPending.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0].pending )} peticiones pendientes de resolver, lo que al ritmo reciente de este país supone ` } ${formatDecimal( dataBacklog[datasetSelector] )} meses de retrasos.

`; } if (language === "en") { return `

${formatIntegers( dataTotals.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0]["total applications"] )} people applied for asylum in ${ localeCountries[languageSelector][countryCode] } during December 2021.

At the end of that month, there were ${ countryCode === "EU27" ? ` ${formatIntegers( dataBacklog.pending )} pending applications, ` : `${formatIntegers( dataPending.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0].pending )} pending applications, ` } equivalent to ${formatDecimal( dataBacklog[datasetSelector] )} months of applications at recent rates.

`; } if (language === "it") { return `

${formatIntegers( dataTotals.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0]["total applications"] )} persone hanno presentato domanda di asilo ${ countryCode === "EU27" ? `nell'` : `in` } ${ localeCountries[languageSelector][countryCode] } nel mese di dicembre 2021.

Alla fine di quel mese c'erano ${ countryCode === "EU27" ? ` ${formatIntegers( dataBacklog.pending )} domande in sospeso, ` : `${formatIntegers( dataPending.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0].pending )} domande in sospeso, ` } equivalenti a ${formatDecimal(dataBacklog[datasetSelector])} mesi di domande.

`; } if (language === "fr") { return `

En décember 2021, ${formatIntegers( dataTotals.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0]["total applications"] )} personnes ont sollicité l'asile ${ localeCountries[languageSelector]["prepositions2"][countryCode] }.

${ countryCode === "EU27" ? `Fin décembre 2021, ${formatIntegers( dataBacklog.pending )} demandes étaient en attente d’une décision,` : `Fin décembre 2021, ${formatIntegers( dataPending.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0].pending )} demandes étaient en attente d’une décision,` } soit un retard de ${formatDecimal( dataBacklog[datasetSelector] )} mois suivant les taux de réception récents.

`; } if (language === "de") { return `

In ${ localeCountries[languageSelector][countryCode] } haben im Dezember 2021 ${formatIntegers( dataTotals.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0]["total applications"] )} Menschen einen Asylantrag gestellt.

${ countryCode === "EU27" ? `Am Ende des Monats warteten ${formatIntegers( dataBacklog.pending )} ` : `Am Ende des Monats warteten ${formatIntegers( dataPending.filter(function (d) { const myDate = d.period.getTime(); const timelineDate = dateTimeline.getTime(); return myDate === timelineDate; })[0].pending )} ` } Anträge auf Bearbeitung, was angesichts der aktuellsten monatlichen Antragszahlen den Antragstellungen von ${formatDecimal( dataBacklog[datasetSelector] )} Monaten entspricht.

`; } }38:T13d8,dataLocale = ({ es: { mapTitleDesktop1: "Atrasos en las solicitudes de asilo", mapTitleDesktop2: "recibidas en la UE a 31 de diciembre de 2021", mapTitleMobile1: "Atrasos en las solicitudes", mapTitleMobile2: "de asilo recibidas en la UE", mapTitleMobile3: "a 31 de diciembre de 2021", source: "Fuente: Eurostat", legendBubble1: "Solicitudes", legendBubble2: "recibidas en", legendBubble3: "diciembre 2021", legendBacklog: "Meses de retraso", interactNote1: "Haz clic en cualquier país para", interactNote2: "ver sus datos en detalle >>", backNote: "<< Volver a UE-27", detailedChartTitleEU: "Serie temporal completa de la UE", detailedChartTitleCountries: "Serie temporal de", legendDetailedPending1: "Solicitudes", legendDetailedPending2: "pendientes", legendDetailedPending3: "de resolver a", legendDetailedPending4: "final de mes", legendDetailedTotal1: "Solicitudes", legendDetailedTotal2: "mensuales", legendDetailedTotal3: "recibidas" }, en: { mapTitleDesktop1: "Backlog in asylum applications", mapTitleDesktop2: "in the EU as of December 2021", mapTitleMobile1: "Backlog in asylum", mapTitleMobile2: "applications in the EU", mapTitleMobile3: "as of December 2021", source: "Source: Eurostat", legendBubble1: "Applications", legendBubble2: "received in", legendBubble3: "Dec-2021", legendBacklog: "Months of delay", interactNote1: "Click on any country to", interactNote2: "see its data in more detail >>", backNote: "<< Return to EU27", detailedChartTitleEU: "Complete EU time series", detailedChartTitleCountries: "time series", legendDetailedPending1: "Pending", legendDetailedPending2: "applications", legendDetailedPending3: "at the end", legendDetailedPending4: "of the month", legendDetailedTotal1: "Monthly", legendDetailedTotal2: "applications", legendDetailedTotal3: "received" }, it: { mapTitleDesktop1: "Domande di asilo in attesa di risposta", mapTitleDesktop2: "accumulate nei paesi UE fino a dicembre 2021", mapTitleMobile1: "Domande di asilo in attesa", mapTitleMobile2: "di risposta accumulate nei", mapTitleMobile3: "paesi UE fino a dicembre 2021", source: "Fonte: Eurostat", legendBubble1: "Domande", legendBubble2: "ricevute nel", legendBubble3: "dicembre 2021", legendBacklog: "mesi di ritardo", interactNote1: "Clicca su un paese", interactNote2: "per visualizzare i dati >>", backNote: "<< Torna all'UE", // To be confirmed detailedChartTitleEU: "Serie storica UE", detailedChartTitleCountries: "Serie storica ", legendDetailedPending1: "Domande in", legendDetailedPending2: "attesa di", legendDetailedPending3: "risposta alla", legendDetailedPending4: "fine del mese", legendDetailedTotal1: "Domande", legendDetailedTotal2: "ricevute", legendDetailedTotal3: "al mese" }, fr: { mapTitleDesktop1: "Retard dans les demandes d’asile au", mapTitleDesktop2: "sein de l’UE en date de décembre 2021", mapTitleMobile1: "Retard dans les demandes", mapTitleMobile2: "d’asile au sein de l’UE ", mapTitleMobile3: "en date de décembre 2021", source: "Source: Eurostat", legendBubble1: "Demandes", legendBubble2: "reçues en", legendBubble3: "décembre 2021", legendBacklog: "Mois de retard", interactNote1: "Cliquez sur chacun des pays pour", interactNote2: "avoir accès aux données détaillées >>", backNote: "<< Retour dans l’UE-27", detailedChartTitleEU: "Séries chronologiques complètes de l’UE", detailedChartTitleCountries: "Séries chronologiques", legendDetailedPending1: "Demandes en", legendDetailedPending2: "attente d’une ", legendDetailedPending3: "décision à la", legendDetailedPending4: "fin du mois", legendDetailedTotal1: "Demandes", legendDetailedTotal2: "mensuelles", legendDetailedTotal3: "reçues" }, de: { mapTitleDesktop1: "Rückstand bei der Bearbeitung der", mapTitleDesktop2: "Asylanträge in der EU im Dezember 2021", mapTitleMobile1: "Rückstand bei der Bearbeitung", mapTitleMobile2: "der Asylanträge in der EU", mapTitleMobile3: "im Dezember 2021", source: "Quelle: Eurostat", legendBubble1: "Im Dezember 2021", legendBubble2: "eingegangene", legendBubble3: "Anträge", legendBacklog: "Verzug in Monaten", interactNote1: "Für detaillierte Daten zu einem Land", interactNote2: "das betreffende Land anklicken >>", backNote: "<< Rückkehr in die EU27", detailedChartTitleEU: "Vollständige Zeitreihe EU", detailedChartTitleCountries: "Zeitreihe", legendDetailedPending1: "In Bearbeitung", legendDetailedPending2: "befindliche", legendDetailedPending3: "Anträge zum", legendDetailedPending4: "Monatsende", legendDetailedTotal1: "Monatlich", legendDetailedTotal2: "eingegangene", legendDetailedTotal3: "Anträge" } })39:[{"id":"4b2acf85eae0d3a9846159e2a82208c3d6a802d58116e504163648d0417d5679b8077dc69ec5493ee33e41217e02039e706bf9e5e91d879541a6ffba3560b2ed","href":"https://static.observableusercontent.com/files/4b2acf85eae0d3a9846159e2a82208c3d6a802d58116e504163648d0417d5679b8077dc69ec5493ee33e41217e02039e706bf9e5e91d879541a6ffba3560b2ed","name":"0.json","type":"application/json","lastModified":1705668610710.438,"size":212567},{"id":"2b6f58eede24da3de0a4447249f6362a4f5c129a334f5b30b426e218bd5a4660b2c6e17993d63c47ec60544bcdfc1277013e6ea381346c74fa7b85a3aac766cc","href":"https://static.observableusercontent.com/files/2b6f58eede24da3de0a4447249f6362a4f5c129a334f5b30b426e218bd5a4660b2c6e17993d63c47ec60544bcdfc1277013e6ea381346c74fa7b85a3aac766cc","name":"eu-boundary.json","type":"application/json","lastModified":1648539738476.19,"size":10045}] 2f:{"title":"#682 Backlog in asylum applications in the European Union as of December 2021","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":5006,"value":"_**New!** Translations available in Spanish, English, Italian, French and German._","pinned":false,"hidden":false,"mode":"md"},{"id":541,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"en\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3280,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3142,"value":"---\n\n### Styles cell","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"\n","pinned":false,"hidden":false,"mode":"html"},{"id":51,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":3282,"value":"//https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable // this cell is what fires the transition!\nupdatePatternCell = detailedChart_updatePattern.drawData(selectedCountry)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1902,"value":"defaultCountry = \"EU27\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3287,"value":"durationTimeSerie = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":3289,"value":"durationTransitBars = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":3291,"value":"delayTransitBars = durationTransitBars / datesArray.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":3300,"value":"durationTransitAxis = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":3302,"value":"delay = durationTimeSerie / datesArray.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"function onMouseOverCountry(event, d, i) {\n d3.select(this).style(\"fill-opacity\", bubbleFillOpacityActive);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"function onMouseOutCountry(event, d, i) {\n d3.select(this).style(\"fill-opacity\", bubbleFillOpacityBase);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2767,"value":"---\n\n### Other handful functions","pinned":false,"hidden":false,"mode":"md"},{"id":2055,"value":"dateTimeline = new Date(\"2021-12-01\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2717,"value":"function createRampLegend() {\n // Legend properties:\n /*title,\n tickSize = 6,\n width = 320, \n height = 44 + tickSize,\n marginTop = 18,\n marginRight = 0,\n marginBottom = 16 + tickSize,\n marginLeft = 0,\n ticks = width / 64,\n tickFormat,\n tickValues*/\n\n return Legend(colorScale, {\n title: dataLocale[languageSelector].legendBacklog,\n tickSize: 5,\n width: 120,\n tickValues: [0, 15, 30]\n //marginLeft: margin.left\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3372,"value":"function calculateBisect(dataset) {\n let bisect = d3.bisector((d) => d.period).right;\n return (mx) => {\n let xValue = xScaleTime.invert(mx);\n let index = bisect(dataset, xValue);\n return dataset[index];\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3373,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3375,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"// https://observablehq.com/@observablehq/introduction-to-mutable-state\n//mutable mutableCountry = myIPCountry\nselectedCountry = chart\n//selectedCountry = \"ES\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2988,"value":"isEurope = selectedCountry === \"EU27\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"---\n\n### Translations & formatting","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"// es-ES format\nes_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4846,"value":"// en-US format\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"formatPercent = d3.formatLocale(locale).format(\",.1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4024,"value":"formatDecimal = d3.formatLocale(locale).format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2503,"value":"formatIntegersShort = d3.format(\".2s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4033,"value":"formatIntegersShort2 = d3.format(\"~s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3370,"value":"//formatTime = d3.timeFormat(\"%Y\")\nformatTime = d3.timeFormat(\"%m-%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2091,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"---\n \n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":3168,"value":"#### A. Stats:","pinned":false,"hidden":false,"mode":"md"},{"id":3175,"value":"dataURL_totalsByCountry = \"https://data.civio.es/posts/refugees-asylum-applications/totalApplications_byCountry.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3176,"value":"dataURL_totalsEU27 = \"https://data.civio.es/posts/refugees-asylum-applications/totalApplications_EU27.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3178,"value":"dataURL_pendingByCountry = \"https://data.civio.es/posts/refugees-asylum-applications/pendingApplications_byCountry.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3180,"value":"dataURL_pendingEU27 = \"https://data.civio.es/posts/refugees-asylum-applications/pendingApplications_EU27.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3182,"value":"dataURL_monthlyBacklog = \"https://data.civio.es/posts/refugees-asylum-applications/monthlyBacklog.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3190,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3194,"value":"dataRaw_totalsByCountry = await d3.csv(dataURL_totalsByCountry, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3199,"value":"dataRaw_totalsEU27 = await d3.csv(dataURL_totalsEU27, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3207,"value":"dataRaw_pendingByCountry = await d3.csv(dataURL_pendingByCountry, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3209,"value":"dataRaw_pendingEU27 = await d3.csv(dataURL_pendingEU27, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3213,"value":"dataRaw_monthlyBacklog = await d3.csv(dataURL_monthlyBacklog, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"viewof datasetSelector = Inputs.radio(\n [\"Backlog (2021 average requests / month)\", \"Backlog (actual months)\"],\n {\n label: \"Pick a dataset\",\n value: \"Backlog (actual months)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3216,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3220,"value":"dataModif_totalsByCountry = {\n const datasetByCountry = dataRaw_totalsByCountry;\n //const dataCleaning = datasetByCountry.map((d) => ({\n //source: d.citizens,\n //target: d.geo,\n //date: d.TIME_PERIOD,\n //}));\n //.sort((a, b) => d3.descending(a.noSentencedPercent, b.noSentencedPercent));\n\n const dataCleaning = datasetByCountry.filter(\n (d) => d.period <= new Date(\"2021-12\")\n );\n // Filtering data until 31/12/2021\n //.filter((d) => d.period <= new Date(\"2021-12\"));\n\n return dataCleaning;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3223,"value":"dataModif_pendingByCountry = {\n const datasetByCountry = dataRaw_pendingByCountry;\n\n // Filtering data until 31/12/2021\n const dataCleaning = datasetByCountry.filter(\n (d) => d.period <= new Date(\"2021-12\")\n );\n\n return dataCleaning;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3226,"value":"---\n**Final datasets**","pinned":false,"hidden":false,"mode":"md"},{"id":3231,"value":"data_totalsEU27 = dataRaw_totalsEU27","pinned":false,"hidden":false,"mode":"ojs"},{"id":3235,"value":"data_totalsByCountry = dataModif_totalsByCountry","pinned":false,"hidden":false,"mode":"ojs"},{"id":3236,"value":"data_pendingEU27 = dataRaw_pendingEU27","pinned":false,"hidden":false,"mode":"ojs"},{"id":3238,"value":"data_pendingByCountry = dataModif_pendingByCountry","pinned":false,"hidden":false,"mode":"ojs"},{"id":3240,"value":"data_monthlyBacklog = dataRaw_monthlyBacklog","pinned":false,"hidden":false,"mode":"ojs"},{"id":3203,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1148,"value":"#### B. Geographical:","pinned":false,"hidden":false,"mode":"md"},{"id":1153,"value":"#### Geographical dataset merged with pending requests one","pinned":false,"hidden":false,"mode":"md"},{"id":969,"value":"datesArray = Array.from(new Set(data_pendingByCountry.map((d) => d.period)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"countriesWithAsylumInfo = Array.from(\n new Set(data_pendingByCountry.map((d) => d.country))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5033,"value":"countries","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"dataMerge = {\n const statsDataset1 = data_totalsByCountry;\n const statsDataset2 = data_pendingByCountry;\n const statsDataset3 = data_monthlyBacklog;\n\n const geoDataset = countries;\n\n const dataMerged = geoDataset\n //.filter((e) => e.properties.id !== \"UK\")\n //.filter((e) => e.properties.id !== \"LT\")\n .filter((e) => countriesWithAsylumInfo.includes(e.properties.id))\n .map((d) => ({\n ...d,\n // TODO: clean target (not needed)\n properties: {\n ...d.properties,\n asylumTotalRequests: statsDataset1.filter(\n (e) => e.country === d.properties.id\n ),\n asylumPendingRequests: statsDataset2.filter(\n (e) => e.country === d.properties.id\n ),\n monthlyBacklog:\n statsDataset3.filter((e) => e.country === d.properties.id)[0] || 0\n }\n }));\n //.sort((a, b) => d3.descending(a.noSentencedPercent, b.noSentencedPercent));\n\n return dataMerged;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2612,"value":"contextCountries = {\n const dataMerged = countries\n //.filter((e) => e.properties.id !== \"UK\")\n //.filter((e) => e.properties.id !== \"LT\")\n .filter((e) => !countriesWithAsylumInfo.includes(e.properties.id));\n\n return dataMerged;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"dataset = dataMerge","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":3304,"value":"#### A. Map","pinned":false,"hidden":false,"mode":"md"},{"id":822,"value":"//maxMonths = d3.max(dataset, (d) => d.properties.monthlyBacklog[datasetSelector])\nmaxMonths = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"maxTotalRequests = d3.max(dataset, (d) =>\n d3.max(d.properties.asylumTotalRequests.map((d) => d[\"total applications\"]))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2570,"value":"totalRequestsDic2021 = dataset.map(\n (d) =>\n d.properties.asylumTotalRequests.filter(\n (d) => d.period.getTime() == dateTimeline.getTime()\n )[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2532,"value":"maxTotalRequestsDic2021 = d3.max(\n totalRequestsDic2021,\n (d) => d[\"total applications\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2514,"value":"maxPendingRequests = d3.max(dataset, (d) =>\n d3.max(d.properties.asylumPendingRequests.map((d) => d[\"pending\"]))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"viewof maxRadius = Inputs.range([1, 100], {\n value: isMobile ? 60 : 75,\n step: 1,\n label: \"Circles scaling\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"radiusScale = d3.scaleSqrt().domain([0, maxTotalRequests]).range([0, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"fontOpacityScale = d3.scaleSqrt().domain([0, maxTotalRequests]).range([0.4, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"viewof colorScheme = Inputs.select(\n [\n \"Viridis\",\n \"Magma\",\n \"Plasma\",\n \"Inferno\",\n \"Cividis\",\n \"Greys\",\n \"YlOrBr\",\n \"YlOrRd\"\n ],\n {\n title: \"Color Scheme\",\n description: \"Select the color scheme.\",\n value: \"YlOrRd\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"colorScale = d3\n .scaleSequential()\n .domain([0, maxMonths])\n .interpolator(d3[\"interpolate\" + colorScheme])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3311,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3308,"value":"#### A. Detailed chart","pinned":false,"hidden":false,"mode":"md"},{"id":3316,"value":"timeDomain = d3.extent(data_pendingEU27, (d) => d.period)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3318,"value":"timeRangeMax = timeDomain[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3320,"value":"pendingApplicationsRange = d3.extent(data_pendingEU27, (d) => d.pending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3322,"value":"pendingApplicationsMax = pendingApplicationsRange[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3324,"value":"totalsApplicationsRange = d3.extent(\n data_totalsEU27,\n (d) => d[\"total applications\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3326,"value":"totalsApplicationsMax = totalsApplicationsRange[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3328,"value":"xRange = [detailedChartMargin.left, myWidth - detailedChartMargin.right]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3330,"value":"xScaleTime = d3.scaleTime().domain(timeDomain).range(xRange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3332,"value":"yScaleApplications = d3\n .scaleLinear()\n //.domain([0, maxValueY])\n .range([\n detailedChartHeight - detailedChartMargin.bottom,\n detailedChartMargin.top\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3334,"value":"xScaleTimeBand = d3\n .scaleBand()\n .domain(datesArray)\n .range(xRange)\n .paddingInner(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3338,"value":"---\n\n### Axes","pinned":false,"hidden":false,"mode":"md"},{"id":3341,"value":"xAxis = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .style(\"color\", colorAxis)\n .attr(\n \"transform\",\n `translate(0,${detailedChartHeight - detailedChartMargin.bottom})`\n )\n .call(\n d3.axisBottom(xScaleTime).ticks(isMobile ? 3 : 10)\n //.tickValues([parseDate(1950), parseDate(2020)])\n //.tickFormat(formatTime)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3343,"value":"yAxis = (g) =>\n g\n .attr(\"class\", \"y-axis\")\n .style(\"color\", colorAxis)\n .attr(\"transform\", `translate(${detailedChartMargin.left},0)`)\n .call(\n d3.axisLeft(yScaleApplications).tickFormat(formatIntegersShort)\n )\n//.call((g) => g.select(\".domain\").remove())\n//.call((g) => (g.selection ? g.selection() : g).select(\".domain\").remove()) // Not working, so going through CSS rule instead","pinned":false,"hidden":false,"mode":"ojs"},{"id":3345,"value":"yAxis2 = (g) =>\n g\n .attr(\"class\", \"y-axis2\")\n .style(\"opacity\", 0.3)\n .style(\"color\", colorNeutral(400))\n .attr(\"transform\", `translate(${detailedChartMargin.left},0)`)\n .call(\n d3\n .axisLeft(yScaleApplications)\n .tickFormat(formatIntegersShort)\n .tickSize(\n -myWidth + detailedChartMargin.left + detailedChartMargin.right\n )\n )\n//.call((g) => g.select(\".domain\").remove())\n//.call((g) => (g.selection ? g.selection() : g).select(\".domain\").remove()) // Not working, so going through CSS rule instead","pinned":false,"hidden":false,"mode":"ojs"},{"id":2771,"value":"---\n\n### Generators","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3347,"value":"line = d3.line().x((d) => xScaleTime(d.period))","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"---\n\n### Mapping","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"projectionSpec = \"Natural Earth\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"// To put circles in the largest polygon (from @xangregg/proportional-geographic-scatterplot-by-country)\nlargestPolygon = function (d) {\n var best = {};\n var bestArea = 0;\n d.geometry.coordinates.forEach(function (coords) {\n var poly = { type: \"Polygon\", coordinates: coords };\n var area = d3.geoArea(poly);\n if (area > bestArea) {\n bestArea = area;\n best = poly;\n }\n });\n return best;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"---\n\n### Geographic data","pinned":false,"hidden":false,"mode":"md"},{"id":3690,"value":"countriesFilter = countries.filter((e) =>\n countriesWithAsylumInfo.includes(e.properties.id)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2634,"value":"land","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"//countries = topojson.feature(europeEurostat, europeEurostat.objects.nutsrg)\ncountries = topojson\n .feature(europeEurostat, europeEurostat.objects.nutsrg)\n .features.map((d) => {\n d.properties.centroid = d3.geoCentroid(\n d.geometry.type == \"Polygon\" ? d : largestPolygon(d)\n );\n return d;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2623,"value":"viewof scaleDetail = Inputs.radio(\n new Map([\n [\"Schematic\", \"60M\"],\n [\"Normal\", \"20M\"],\n [\"Detailed\", \"10M\"]\n ]),\n {\n label: \"Map detail\",\n value: \"60M\",\n format: ([name, value]) => `${name} (${value})`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"// https://github.com/eurostat/Nuts2json\n// For TopoJSON format: ////.json\n\n// ERROR, the file has been deleted on the repository as deprecated\n// https://github.com/eurostat/Nuts2json/commits/master/\n/*\neuropeEurostat = (\n await fetch(\n `https://raw.githubusercontent.com/eurostat/Nuts2json/master/2021/4258/${scaleDetail}/0.json`\n )\n).json()*/\neuropeEurostat = FileAttachment(\"0.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3692,"value":"euBoundary = FileAttachment(\"eu-boundary.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3695,"value":"euBoundaryTopojson = topojson.feature(euBoundary, euBoundary.objects.nutsrg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":491,"value":"//projection = d3.geoIdentity().reflectY(true).fitSize([width, height], countries)\nprojection = d3\n .geoAzimuthalEqualArea()\n .rotate([-10, -52])\n .scale(scaleFactor)\n .center([0, 0])\n .translate([translateX, translateY])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2905,"value":"viewof translateX = Inputs.range([0, 1000], {\n //value: isMobile ? 110 : 430,\n //value: isMobile ? 110 : 0.6 * myWidth,\n value: isMobile ? myWidth * 0.43 : 0.62 * myWidth,\n label: \"Translate horizontally\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2907,"value":"viewof translateY = Inputs.range([0, 600], {\n value: isMobile ? 450 : 320,\n label: \"Translate vertically\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4456,"value":"detailedInfoBreakPoint = 580","pinned":false,"hidden":false,"mode":"ojs"},{"id":2887,"value":"viewof scaleFactor = Inputs.range([100, 1000], {\n label: \"Scale factor\",\n //value: isMobile ? 400 : myWidth\n value: isMobile ? 400 : myWidth\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"mapMargin = ({ top: 30, right: 20, bottom: 20, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3387,"value":"detailedChartMargin = ({\n top: isMobile ? 70 : 50,\n right: isMobile ? 0 : 80,\n bottom: isMobile ? 70 : 40,\n left: 35\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2879,"value":"viewof mapHeight = Inputs.range([300, 1000], {\n value: isMobile ? 840 : 600,\n label: \"Map height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3380,"value":"detailedChartHeight = isMobile ? 360 : 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":2884,"value":"minWidth = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":2882,"value":"/*viewof mapWidth = Inputs.range([minWidth, maxWidth], {\n value: isMobile ? minWidth : myWidth,\n label: \"Map width\"\n})*/\nmapWidth = myWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":2662,"value":"maxWidth = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":2654,"value":"mediaQueryLimit = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":2660,"value":"myWidth = +Math.min(width, maxWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2657,"value":"isMobile = myWidth < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":1665,"value":"bubbleFillOpacityBase = 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"bubbleFillOpacityActive = 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"countryFillOpacityBase = 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":3917,"value":"euFillOpacityBase = 0.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"countryFillOpacityActive = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"//countryColorFill = colorNeutral(150)\ncountryColorFill = colorPostLight","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"countryColorStrokeBase = colorNeutral(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3438,"value":"countryColorStrokeHighlight = colorPostPrimary","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"colorMonthlyClogging = \"orange\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"colorHightlight = \"#e04a28\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"colorProjectPrimary = colors.project.elboenuestrodecadadia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"colorProjectSecondary = colors.project.elboenuestrodecadadia.secondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"colorProjectLight = colors.project.elboenuestrodecadadia.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":3365,"value":"colorBaseTotals = colorPostSecondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":3363,"value":"colorHighlightedTotals = colorNeutral(900)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3361,"value":"colorBasePending = colorPostPrimary","pinned":false,"hidden":false,"mode":"ojs"},{"id":3359,"value":"colorBaseBacklog = colorNeutral(800)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3357,"value":"colorAxis = colorNeutral(600)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3355,"value":"colorPostPrimary = colors.project.posts.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":3353,"value":"colorPostSecondary = colors.project.posts.secondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":3351,"value":"colorPostLight = colors.project.posts.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"---\n \n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2631,"value":"import { land } from \"@civio/649-art-tourism-map\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import { projectionInput } from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"// Civio main colors\nimport { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}