31:T327f,gridCartogram01 = { await visibility(); const lateralMargin = widthCartogram - widthModules; const marginCartogram = lateralMargin / 2; const svg = d3 .create("svg") .attr("width", widthCartogram) .attr("height", heightCartogram) .attr("id", "cartogram"); // DEFS FILTERS // Ref: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg const defs = svg.append("defs"); const filter = defs .append("filter") .attr("id", "background01") .attr("x", -0.015) .attr("y", 0) .attr("width", 1.03) .attr("height", 1); const feFlood = filter .append("feFlood") .attr("flood-color", colorPrimary) .attr("result", "bg"); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode").attr("in", "bg"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); const filter2 = defs .append("filter") .attr("id", "background02") .attr("x", 0) .attr("y", 0) .attr("width", 1) .attr("height", 1); const feFlood2 = filter2 .append("feFlood") .attr("flood-color", colorLight) .attr("result", "bg"); const feMerge2 = filter2.append("feMerge"); feMerge2.append("feMergeNode").attr("in", "bg"); feMerge2.append("feMergeNode").attr("in", "SourceGraphic"); // Chart background svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", widthCartogram) .attr("height", heightCartogram) .style("fill", colorMedium); //.style("fill", "transparent"); const regionGroups = svg .selectAll("g") .data(dataModif) .join("g") .attr("id", (d) => d.region_code) .attr("class", "region-group") .attr( "transform", (d) => `translate(${ marginCartogram + d.x * (moduleSize + moduleSeparation) }, ${margin.top + d.y * (moduleSize + moduleSeparation)})` ) .on("click", onMouseClick); const widthEl = moduleSize; const heightEl = widthEl; const unitWidth = widthEl / nDivisions - nPadding; const offsetAux = 4; // Aux area for interactions regionGroups .append("rect") .attr("class", "aux") .attr("x", -offsetAux) .attr("y", -offsetAux) .attr("width", widthEl + offsetAux * 2) .attr("height", heightEl + offsetAux * 2) .style("fill", "transparent") .style("pointer-events", "all") .style("cursor", "pointer"); regionGroups.append("svg:title").text("Click for details"); /// Single charts // 100% all inmates regionGroups .append("g") .attr("class", "base-100") .selectAll("rect") .data(d3.range(nDivisions)) .join("rect") .attr("x", (d, i) => (unitWidth + nPadding) * i) .attr("y", 0) .attr("width", unitWidth) .attr("height", heightEl) .style("fill", colorLight) //.style("fill", colorMedium) .style("pointer-events", "none"); // Preventive bars % regionGroups .append("g") .attr("class", "preventive-ones") .selectAll("rect") .data(d3.range(nDivisions)) .join("rect") .attr("x", (d, i) => (unitWidth + nPadding) * i) .attr("y", 0) .attr("width", function (d, i) { const parentNodeData = d3.select(this.parentNode).datum(); const myDatum = parentNodeData.noSentencedPercentTotalInmates * nDivisions; if (i + 1 < myDatum) return unitWidth; else if (i < myDatum) { let myWidth; if (myDatum < 1) { myWidth = unitWidth * myDatum; } else { const myRemainder = myDatum % i; myWidth = unitWidth * myRemainder; } return myWidth; } else return 0; }) .attr("height", heightEl) .style("fill", colorPrimary) .style("opacity", 0) .transition() .delay((d, i) => 800 + i * 150) .duration(800) .style("opacity", 1) .style("pointer-events", "none"); const medianDashArray = "3 3"; const medianStrokeWidth = 2; // MEDIAN regionGroups .append("line") .attr("x1", widthEl * medianNoSentencedPercent) .attr("x2", widthEl * medianNoSentencedPercent) .attr("y1", 0) .attr("y2", heightEl) .style("stroke", colorHighlight) .style("stroke-width", medianStrokeWidth) .style("stroke-dasharray", medianDashArray); // REGIONS const regionTexts = regionGroups.append("g").attr("class", "texts"); regionTexts .append("text") .attr("class", "code") .attr("x", moduleSize / 2) .attr("y", moduleSize / 2 - 7.5) .style("font-family", "sans-serif") .style("font-size", "0.6rem") .style("text-anchor", "middle") .style("dominant-baseline", "middle") .style("fill", colorNeutral(700)) //.style("opacity", 0) .text((d) => d.region_code) .style("pointer-events", "none") // Text light background .call((text) => text.clone(true)) .attr("fill", "none") .attr("stroke", colorLight) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .style("pointer-events", "none"); regionTexts .append("text") .attr("class", "name") .attr("x", moduleSize / 2) .attr("y", moduleSize + 12) .style("font-family", "sans-serif") .style("font-size", "0.6rem") .style("text-anchor", "middle") .style("dominant-baseline", "middle") .style("fill", colorNeutral(650)) .style("opacity", 0) .text((d) => d.region_name) .style("pointer-events", "none"); // PERCENTS const textPercents = regionGroups.append("g").attr("class", "percents"); textPercents .append("text") //.attr("x", (d) => d.noSentencedPercentTotalInmates * moduleSize + 3) .attr("x", moduleSize / 2) .attr("y", moduleSize / 2 + 7.5) .text((d) => formatPercent(d.noSentencedPercentTotalInmates)) .style("font-size", "0.65rem") //.style("font-weight", 600) .attr("fill", colorPrimary) //.style("text-anchor", "left") .attr("filter", `url(#background02)`) .style("text-anchor", "middle") .style("dominant-baseline", "middle") .style("pointer-events", "none") .style("opacity", 0); // CHART TITLE const title = svg.append("g").attr("class", "legend"); if (isMobile) { title .append("text") .attr("x", widthCartogram / 2) .attr("y", 55) .style("font-size", "1.15rem") .style("font-weight", 700) .style("text-anchor", "middle") .text(dataLocale[languageSelector].titleMobile1) .attr("fill", colorLight) .attr("filter", `url(#background01)`); title .append("text") .attr("x", widthCartogram / 2) .attr("y", 78) .style("font-size", "1.15rem") .style("font-weight", 700) .style("text-anchor", "middle") .text(dataLocale[languageSelector].titleMobile2) .attr("fill", colorLight) .attr("filter", `url(#background01)`); title .append("text") .attr("x", widthCartogram / 2) .attr("y", 101) .style("font-size", "1.15rem") .style("font-weight", 700) .style("text-anchor", "middle") .text(dataLocale[languageSelector].titleMobile3) .attr("fill", colorLight) .attr("filter", `url(#background01)`); // Subtitle title .append("text") .attr("x", widthCartogram / 2) .attr("y", 130) .style("font-size", "0.85rem") .style("font-weight", 600) .style("text-anchor", "middle") .text(dataLocale[languageSelector].subtitleMobile1); title .append("text") .attr("x", widthCartogram / 2) .attr("y", 150) .style("font-size", "0.85rem") .style("font-weight", 600) .style("text-anchor", "middle") .text(dataLocale[languageSelector].subtitleMobile2); } else { title .append("text") .attr("x", widthCartogram / 2) .attr("y", 55) .style("font-size", "1.15rem") .style("font-weight", 700) .style("text-anchor", "middle") .text(dataLocale[languageSelector].titleDesktop1) .attr("fill", colorLight) .attr("filter", `url(#background01)`); title .append("text") .attr("x", widthCartogram / 2) .attr("y", 78) .style("font-size", "1.15rem") .style("font-weight", 700) .style("text-anchor", "middle") .text(dataLocale[languageSelector].titleDesktop2) .attr("fill", colorLight) .attr("filter", `url(#background01)`); title .append("text") .attr("x", widthCartogram / 2) .attr("y", 105) .style("font-size", "0.85rem") .style("font-weight", 600) .style("text-anchor", "middle") .text(dataLocale[languageSelector].subtitleDesktop); } const offset = 50; const source = svg .append("g") .attr("class", "source") .attr("fill", colorNeutral(650)) .style("font-size", "0.7rem"); if (isMobile) { source .append("text") .style("text-anchor", "middle") .attr("x", widthCartogram / 2) .attr("y", heightCartogram - 60) .text(dataLocale[languageSelector].sourceMobile1); source .append("text") .style("text-anchor", "middle") .attr("x", widthCartogram / 2) .attr("y", heightCartogram - 45) .text(dataLocale[languageSelector].sourceMobile2); source .append("text") .style("text-anchor", "middle") .attr("x", widthCartogram / 2) .attr("y", heightCartogram - 30) .text(dataLocale[languageSelector].sourceMobile3); } else { source .append("text") .attr("x", offset) .attr("y", heightCartogram - 50) .text(dataLocale[languageSelector].sourceDesktop1); source .append("text") .attr("x", offset) .attr("y", heightCartogram - 35) .text(dataLocale[languageSelector].sourceDesktop2); } // Interaction note. const interactionNoteX = isMobile ? widthCartogram / 2 : offset; const interactionNoteY = isMobile ? 180 : margin.top + 8; const interactionNotes = svg .append("g") .attr("class", "interaction-notes") .style("text-anchor", isMobile ? "middle" : "start") .style("fill", colorNeutral(800)) .attr("transform", `translate(${interactionNoteX},${interactionNoteY})`); interactionNotes .append("text") .text( isMobile ? dataLocale[languageSelector].interactionNoteMobile1 : dataLocale[languageSelector].interactionNoteDesktop1 ) .style("font-size", "0.7rem"); interactionNotes .append("text") .attr("dy", 15) .text( isMobile ? dataLocale[languageSelector].interactionNoteMobile2 : dataLocale[languageSelector].interactionNoteDesktop2 ) .style("font-size", "0.7rem"); // Median legend const median = svg.append("g").attr("class", "median"); const medianLegendX = isMobile ? widthCartogram / 2 : offset; const lineOffset = languageSelector === "el" ? 110 : 70; // EN and ES need less space than EL const medianLegendXLine = isMobile ? medianLegendX - lineOffset : medianLegendX; const medianLegendY = isMobile ? margin.top + heightAllModules + 230 : heightCartogram - margin.bottom - 30; median .append("text") .attr("x", medianLegendX + 10) .attr("y", medianLegendY) .style("text-anchor", isMobile ? "middle" : "start") .style("font-size", "0.7rem") .style("font-weight", 600) .text( `${dataLocale[languageSelector].legendMedian} ${formatPercent( medianNoSentencedPercent )}` ) .attr("fill", colorPrimary); median .append("line") .attr("x1", medianLegendXLine) .attr("x2", medianLegendXLine) .attr("y1", medianLegendY + 5) .attr("y2", medianLegendY - 15) .style("stroke", colorHighlight) .style("stroke-width", medianStrokeWidth) .style("stroke-dasharray", medianDashArray); // GEOLOCATION const myCountryGroup = svg .select(`g#${myIPCountry}`) //.raise() // don't know if necessary .classed("myCountry", true); // DETAILED INFO - HTML const detailedInfo = svg .append("g") .attr("class", "detailedInfo") .style("pointer-events", "none"); const detailedInfoY = isMobile ? margin.top + heightAllModules : margin.top + 30; // Foreign object method // https://observablehq.com/@bumbeishvili/foreignobject-typical-usage const fo = detailedInfo .append("foreignObject") // Append for d3.v4 .attr( "transform", `translate(${ isMobile ? widthCartogram / 2 - 230 / 2 : offset },${detailedInfoY})` ) .classed("legend-fo", true) .attr("width", 230) .attr("height", 250) .style("text-align", isMobile ? "center" : "left") .style("color", colorPrimary) .style("padding-top", "1rem") .style("padding-bottom", "5px"); const myCountryData = dataModif.filter( (d) => d.region_code === myIPCountry )[0]; fo.append("xhtml:div") // Append for d3.v4 .classed("legend-div", true) .html(fillDetailedInfo(myCountryData, languageSelector)); return svg.node(); }32:T1572,localeCountries = ({ en: { countries: { 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" } }, es: { countries: { 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" } }, it: { countries: { 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", UK: "Regno Unito", CY: "Cipro", AL: "Albania", AM: "Armenia", BY: "Bielorussia", BA: "Bosnia Erzegovina", GE: "Georgia", IS: "Islanda", KZ: "Kazakistan", LU: "Lussemburgo", MK: "Macedonia", MD: "Moldova", ME: "Montenegro", NO: "Norvegia", RS: "Serbia", RU: "Russia", CH: "Svizzera", TR: "Tacchino", UA: "Ucraina" } }, fr: { countries: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaïdjan", AL: "Albanie", AM: "Armènie", BY: "Biélorussie", BA: "Bosnie Herzégovine", IS: "Islande", KZ: "Kazakhstan", MD: "Moldavie", ME: "Monténégro", RU: "Russie", RS: "Serbie", MK: "Macédoine", GE: "Géorgie", UA: "Ukraine", AT: "L'Autriche", BE: "Belgique", BG: "Bulgarie", HR: "Croatie", CZ: "Tchéquie", 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", UK: "Royaume-Uni", CY: "Chypre", NO: "Norvège", CH: "Suisse", TR: "Turquie" } }, el: { countries: { 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: "Ουκρανία" } } })33:Tcb5,dataLocale = ({ es: { titleDesktop1: "Porcentaje de personas presas", titleDesktop2: "en prisión provisional en 2021 (UE)", subtitleDesktop: "- Números relativos: % del total de presos -", titleMobile1: "Porcentaje de personas", titleMobile2: "presas en prisión", titleMobile3: "provisional en 2021 (UE)", subtitleMobile1: "- Números relativos:", subtitleMobile2: "% del total de presos -", sourceDesktop1: "Fuente: Consejo de Europa", sourceDesktop2: "Estadísticas penales anuales - Informe SPACE I 2021", sourceMobile1: "Fuente: Consejo de Europa", sourceMobile2: "Estadísticas penales anuales", sourceMobile3: "Informe SPACE I 2021", interactionNoteDesktop1: "Haz clic en cualquier país para", interactionNoteDesktop2: "ver sus datos en detalle >>", interactionNoteMobile1: "Toca sobre cualquier país para", interactionNoteMobile2: "ver sus datos en detalle >>", legendMedian: `Mediana europea: ` }, en: { titleDesktop1: "Percentage of prisoners", titleDesktop2: "in pretrial detention in 2021 (EU)", subtitleDesktop: "- Relative numbers: % of total prisoners -", titleMobile1: "Percentage of", titleMobile2: "prisoners in pretrial", titleMobile3: "detention in 2021 (EU)", subtitleMobile1: "- Relative numbers:", subtitleMobile2: "% of total prisoners -", sourceDesktop1: "Source: Council of Europe", sourceDesktop2: "Annual Crime Statistics - SPACE I Report 2021", sourceMobile1: "Source: Council of Europe", sourceMobile2: "Annual Crime Statistics", sourceMobile3: "SPACE I Report 2021", interactionNoteDesktop1: "Click on any country", interactionNoteDesktop2: "to view its details >>", interactionNoteMobile1: "Tap on any country to", interactionNoteMobile2: "view its data in detail >>", legendMedian: `European median: ` }, el: { titleDesktop1: "Ποσοστό φυλακισμένων", titleDesktop2: "σε προσωρινή κράτηση το 2021 (ΕΕ)", subtitleDesktop: "Σχετικοί αριθμοί:% στο σύνολο των φυλακισμένων", titleMobile1: "Ποσοστό φυλακισμένων", titleMobile2: "σε προσωρινή κράτηση", titleMobile3: "το 2021 (ΕΕ)", subtitleMobile1: "Σχετικοί αριθμοί:", subtitleMobile2: "% στο σύνολο των φυλακισμένων", sourceDesktop1: "Πηγή: Συμβούλιο της Ευρώπης", sourceDesktop2: "Ετήσιες Ποινικές Στατιστικές – Έκθεση SPACE I 2021", sourceMobile1: "Πηγή: Συμβούλιο της Ευρώπης", sourceMobile2: "Ετήσιες Ποινικές Στατιστικές", sourceMobile3: "Έκθεση SPACE I 2021", interactionNoteDesktop1: "Κάντε κλικ πάνω στη χώρα", interactionNoteDesktop2: "για να δείτε τις λεπτομέρειες >>", interactionNoteMobile1: "Πατήστε πάνω στη χώρα για να", interactionNoteMobile2: "δείτε αναλυτικά τα δεδομένα της >>", legendMedian: `Ευρωπαϊκός μέσος όρος: ` } })34:Tcfa,function fillDetailedInfo(countryData, language) { if (language === "es") { return `

En ${ localeCountries["es"].countries[countryData.region_code] }, el ${formatPercent( countryData.noSentencedPercentTotalInmates )} de los presos recluidos en instituciones penitenciarias en 2021 no cumplían una condena definitiva. Son ${formatIntegers( countryData.noSentencedTotal )} detenidos de una población carcelaria total de ${formatIntegers( countryData.inmatesTotal )} presos.

${ regionsWithUntraindata.includes(countryData.region_code) ? `

De ellos, el ${formatPercent( countryData.untriedTotal / countryData.noSentencedTotal )}, (${formatIntegers( countryData.untriedTotal )} presos), no había tenido ningún juicio.

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

In ${ localeCountries["en"].countries[countryData.region_code] }, ${formatPercent( countryData.noSentencedPercentTotalInmates )} of the people in penitentiary institutions in 2021 were not serving a final sentence. That is ${formatIntegers( countryData.noSentencedTotal )} detainees out of a total prison population of ${formatIntegers( countryData.inmatesTotal )} people.

${ regionsWithUntraindata.includes(countryData.region_code) ? `

Among them, ${formatPercent( countryData.untriedTotal / countryData.noSentencedTotal )}, (${formatIntegers( countryData.untriedTotal )} people), have had no trial yet.

` : "" } `; } else if (language === "el") { return `

Στην ${ localeCountries["el"].countries[countryData.region_code] }, ${formatPercent( countryData.noSentencedPercentTotalInmates )} των κρατουμένων σε σωφρονιστικά καταστήματα το 2021 δεν εξέτιαν τελική ποινή. Αυτό σημαίνει ${formatIntegers( countryData.noSentencedTotal )} κρατούμενοι σε σύνολο ${formatIntegers( countryData.inmatesTotal )} φυλακισμένων.

${ regionsWithUntraindata.includes(countryData.region_code) ? `

Από αυτούς, το ${formatPercent( countryData.untriedTotal / countryData.noSentencedTotal )}, (ήτοι ${formatIntegers( countryData.untriedTotal )}), ήταν υπόδικοι.

` : "" } `; } }35:[{"id":"53bdb4ef7316ab6886f1ee3f1d60d68540a849a069c93e9138abd86eb7cbc5aef2a6e019399a3d61295caf5c4229aafc7c17a554e00357144748396e75b30896","href":"https://static.observableusercontent.com/files/53bdb4ef7316ab6886f1ee3f1d60d68540a849a069c93e9138abd86eb7cbc5aef2a6e019399a3d61295caf5c4229aafc7c17a554e00357144748396e75b30896","name":"gridData-EU_v03.json","type":"application/json","lastModified":1646150808939.951,"size":1327},{"id":"0d9806400222c1e6a00118d87c39305df910327373068fb761422d2d1a76c2b3a53f34926fb1b9e7d7f8fc920d07192238aae263cbf4537ea24f87d234449a77","href":"https://static.observableusercontent.com/files/0d9806400222c1e6a00118d87c39305df910327373068fb761422d2d1a76c2b3a53f34926fb1b9e7d7f8fc920d07192238aae263cbf4537ea24f87d234449a77","name":"sketch01.jpg","type":"image/jpeg","lastModified":1646150808939.951,"size":126610},{"id":"5a06220f5d3a1feb79e0ce9e5e75a08a748ae0d5767fb47c52df2742fb891a5be25d3adc29746332a9c54ca1ace448cae0d1419e1b45e17ae467d8e5c0b5a399","href":"https://static.observableusercontent.com/files/5a06220f5d3a1feb79e0ce9e5e75a08a748ae0d5767fb47c52df2742fb891a5be25d3adc29746332a9c54ca1ace448cae0d1419e1b45e17ae467d8e5c0b5a399","name":"sketch02.jpg","type":"image/jpeg","lastModified":1646150808939.951,"size":92911}] 2f:{"title":"#679a Percentage of prisoners in pretrial detention in 2021 (EU)","cells":[{"id":0,"value":"# #679a Percentage of prisoners in pretrial detention in 2021 (EU)\n\n.\n\n\n**Article published in Civio (10/05/22):**\n- English version: [One in five people in EU prisons are in pretrial detention](https://civio.es/2022/05/10/use-and-abuse-of-preventive-detention-in-the-european-union/)\n- Spanish version: [Uno de cada cinco presos en cárceles europeas no tiene condena firme](https://civio.es/2022/05/10/uso-y-abuso-de-la-prision-provisional-en-la-union-europea/)\n \n**References**: \n- [Covid-19 Vaccination Barriers](https://observablehq.com/@yarynam/covid-19-vaccination-barriers) by [Yaryna Serkez](https://observablehq.com/@yarynam) 🙌🏻 >> Nice way to set a grid cartogram (here redesigned to EU and adapted to work both on desktop and mobile).\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":2145,"value":"04/11/2022 **New!** 🇬🇷 Our dataviz has also been translated into Greek.","pinned":false,"hidden":false,"mode":"md"},{"id":1546,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"---\n\n### Styles cell","pinned":false,"hidden":false,"mode":"md"},{"id":928,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":414,"value":"---\n\n### Sketches ","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"gallery = {\n const div = d3\n .create(\"div\")\n .style(\"width\", width)\n .style(\"height\", \"250px\")\n .style(\"display\", \"flex\")\n .style(\"flex-direction\", \"row\");\n\n div\n .selectAll(\"div\")\n .data(urlArrayAll)\n .join(\"div\")\n .style(\"flex-basis\", \"100%\")\n .style(\"backgound\", \"red\")\n .style(\"background-image\", (d) => `url(${d})`)\n .style(\"background-size\", \"contain\")\n .style(\"background-repeat\", \"no-repeat\")\n .style(\"background-position\", \"center\");\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"urlArrayAll = [\n await FileAttachment(\"sketch01.jpg\").url(),\n await FileAttachment(\"sketch02.jpg\").url()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":1083,"value":"function onMouseClick(event, d, i) {\n // Clean previous selection\n d3.selectAll(\".region-group\").classed(\"myCountry\", false);\n // Higlight this country\n d3.select(this).classed(\"myCountry\", true);\n\n // Foreign object tooltip\n d3.select(\".legend-fo\")\n .select(\".legend-div\")\n .html(fillDetailedInfo(d, languageSelector));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"regionsWithUntraindata = [\n \"BE\",\n \"DK\",\n \"FR\",\n \"HU\",\n \"IE\",\n \"IE\",\n \"IT\",\n \"LV\",\n \"LT\",\n \"NL\",\n \"PL\",\n \"PT\",\n \"RO\",\n \"SI\",\n \"SE\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"---\n\n### IP detention\nUsing https://freegeoip.live/jsond/","pinned":false,"hidden":false,"mode":"md"},{"id":960,"value":"// https://freegeoip.live/json/ not working anymore\ngeoIp = await fetch(\"https://api.ipbase.com/v1/json/\")\n .then((res) => res.json())\n .catch(() => null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"myCountries = data_2021.map((d) => d.region_code)","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"defaultCountry = \"ES\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"myIPCountry = {\n if (geoIp) {\n const geoIpDetected = geoIp.country_code;\n const isOnTheMap = myCountries.includes(geoIpDetected);\n\n // If the country detected is not in the map => mark our default country\n const myIPCountry = isOnTheMap ? geoIpDetected : defaultCountry;\n return myIPCountry;\n } else {\n // If the IP fetch fails, returns our default country\n return defaultCountry;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"viewof moduleSize = Inputs.range([20, 200], {\n label: \"Module size\",\n value: isMobile ? 40 : 50,\n step: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof moduleSeparation = Inputs.range([0, 50], {\n label: \"Module separation\",\n value: 10,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof nDivisions = Inputs.range([10, 20], {\n label: \"Module divisions\",\n value: 10, // easier to read\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof nPadding = Inputs.range([0.5, 5], {\n label: \"Divisions padding\",\n value: 1.2,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"mediaQueryLimit = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"cartogramMaxWidth = 660","pinned":false,"hidden":false,"mode":"ojs"},{"id":2067,"value":"widthCartogram = +Math.min(width, cartogramMaxWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2059,"value":"widthModules = moduleSize * (gridData_columns + 1) +\n moduleSeparation * gridData_columns","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"value":"heightAllModules = (moduleSize + moduleSeparation) * (gridData_rows + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"heightCartogram = isMobile\n ? 1050\n : heightAllModules + +margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"margin = ({\n top: isMobile ? 220 : 150,\n bottom: 70,\n left: 60,\n right: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"---\n\n### Color & Styles","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"colorLight = \"#e6eaf0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"colorMedium = \"#b3bfd3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"colorPrimary = colorNeutral(850)","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"colorMediumComplement = \"#d3c7b3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"colorHighlight = \"#d3514a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"---\n\n### Translations & formatting","pinned":false,"hidden":false,"mode":"md"},{"id":1408,"value":"// es-ES format\nes_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1725,"value":"// en-US format\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"formatPercent = d3.formatLocale(locale).format(\",.1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1775,"value":"URLdataset_general_2021 = \"https://data.civio.es/posts/prision-provisional/PDT-generalData.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"dataRaw_2021 = await d3.csv(URLdataset_general_2021, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"data_2021 = {\n const dataCleaning = dataRaw_2021\n .filter((d) => d[\"Variable code\"])\n .map((d) => ({\n year: +d[\"Variable code\"],\n region_name: d.region_name,\n region_code: d.region_code,\n inmatesTotal: d[\"3B\"],\n noSentencedTotal: d[\"8A\"],\n noSentencedPercentTotalInmates: d[\"8A\"] / d[\"3B\"],\n sentencedTotal: d[\"8K\"],\n untriedTotal: d[\"8C\"]\n }))\n .sort((a, b) => d3.descending(a.noSentencedPercent, b.noSentencedPercent));\n\n return dataCleaning;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"dataModif = {\n const dataModif = data_2021.map(function (d) {\n const gridFiltered = gridData.filter((e) => e.key === d.region_code)[0];\n\n // Temporal solution (3 missing countries)\n if (gridFiltered) {\n // Append \"x\" and \"y\" cartogram variables\n d.x = gridFiltered.x;\n d.y = gridFiltered.y;\n }\n\n return d;\n });\n\n const dataSorted = dataModif\n .slice()\n .sort((a, b) =>\n d3.descending(\n a.noSentencedPercentTotalInmates,\n b.noSentencedPercentTotalInmates\n )\n );\n\n return dataSorted;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1798,"value":"medianNoSentencedPercent = d3.median(\n data_2021,\n (d) => d.noSentencedPercentTotalInmates\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"viewof dataTable = Inputs.table(dataModif)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"gridData = isMobile ? gridDataMobile : gridDesktop","pinned":false,"hidden":false,"mode":"ojs"},{"id":1926,"value":"gridDesktop = [\n { x: 3, y: 0, key: \"SE\" },\n { x: 4, y: 0, key: \"FI\" },\n { x: 5, y: 1, key: \"EE\" },\n { x: 3, y: 2, key: \"DK\" },\n { x: 5, y: 2, key: \"LV\" },\n { x: 3, y: 3, key: \"DE\" },\n { x: 4, y: 3, key: \"PL\" },\n { x: 5, y: 3, key: \"LT\" },\n { x: 0, y: 4, key: \"IE\" },\n { x: 2, y: 4, key: \"NL\" },\n { x: 3, y: 4, key: \"CZ\" },\n { x: 4, y: 4, key: \"SK\" },\n { x: 2, y: 5, key: \"BE\" },\n { x: 3, y: 5, key: \"AT\" },\n { x: 4, y: 5, key: \"HU\" },\n { x: 5, y: 5, key: \"RO\" },\n { x: 1, y: 6, key: \"FR\" },\n { x: 2, y: 6, key: \"LU\" },\n { x: 3, y: 6, key: \"SI\" },\n { x: 4, y: 6, key: \"HR\" },\n { x: 5, y: 6, key: \"BG\" },\n { x: 0, y: 7, key: \"PT\" },\n { x: 1, y: 7, key: \"ES\" },\n { x: 3, y: 7, key: \"IT\" },\n { x: 5, y: 7, key: \"EL\" },\n { x: 3, y: 9, key: \"MT\" },\n { x: 5, y: 9, key: \"CY\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1884,"value":"gridDataMobile = [\n { x: 2, y: 0, key: \"SE\" },\n { x: 3, y: 0, key: \"FI\" },\n { x: 4, y: 1, key: \"EE\" },\n { x: 2, y: 2, key: \"DK\" },\n { x: 4, y: 2, key: \"LV\" },\n { x: 2, y: 3, key: \"DE\" },\n { x: 3, y: 3, key: \"PL\" },\n { x: 4, y: 3, key: \"LT\" },\n { x: 0, y: 3, key: \"IE\" },\n { x: 1, y: 4, key: \"NL\" },\n { x: 2, y: 4, key: \"CZ\" },\n { x: 3, y: 4, key: \"SK\" },\n { x: 1, y: 5, key: \"BE\" },\n { x: 2, y: 5, key: \"AT\" },\n { x: 3, y: 5, key: \"HU\" },\n { x: 4, y: 5, key: \"RO\" },\n { x: 0, y: 6, key: \"FR\" },\n { x: 1, y: 6, key: \"LU\" },\n { x: 2, y: 6, key: \"SI\" },\n { x: 3, y: 6, key: \"HR\" },\n { x: 4, y: 6, key: \"BG\" },\n { x: 0, y: 8, key: \"PT\" },\n { x: 0, y: 7, key: \"ES\" },\n { x: 2, y: 7, key: \"IT\" },\n { x: 4, y: 7, key: \"EL\" },\n { x: 2, y: 9, key: \"MT\" },\n { x: 4, y: 9, key: \"CY\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"gridData_columns = d3.max(gridData.map((d) => d.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"gridData_rows = d3.max(gridData.map((d) => d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"---\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":564,"value":"import { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}