31:T4f0b,chart1 = { await visibility(); let myCountry = myIPCountry; // Chart const svg = d3 .create("svg") .attr("width", chartWidth) .attr("height", chartHeight) .attr("id", "chart-suicides"); const defs = svg.append("defs"); const linearGradient = defs .append("linearGradient") .attr("id", "gradient") .attr("gradientUnits", "objectBoundingBox") //Don't use the bounding box of each separate circle //Try commenting the "gradientUnits line above and setting x1 to 0 and x2 to 1 (1 then means 100%) .attr("x1", 0) .attr("x2", 1) .attr("y1", 0) .attr("y2", 0) .selectAll("stop") .data([colornotPreventive, colorPreventive]) .join("stop") .attr("offset", (d, i) => i) .attr("stop-color", (d) => d); const linearGradientFlipped = defs .append("linearGradient") .attr("id", "gradient-inverse") .attr("xlink:href", "#gradient") .attr("gradientTransform", "rotate(180, 0.5, 0.5)"); // Chart background const aux = svg .append("g") .attr("class", "aux-bckg") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", chartWidth) .attr("height", chartHeight) .style("fill", colorBackground); // CHART TITLE const title = svg.append("g").attr("class", "dataviz-title"); const baseOpacityTitle = 0.05; if (isMobile) { const title1a = title .append("text") .attr("x", chartWidth / 2) .attr("y", 45) .style("font-size", "1rem") .style("font-weight", 700) .style("text-anchor", "middle") .attr("fill", colorTitle) .text(dataLocale[languageSelector].datavizTitleMobile1Span1); const title1b = title .append("text") .attr("x", chartWidth / 2) .attr("y", 70) .style("font-size", "1rem") .style("font-weight", 700) .style("text-anchor", "middle") .classed("citizens", true) .text(dataLocale[languageSelector].datavizTitleMobile1Span2); // Transition title1a .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay1) .style("opacity", 1); title1b .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay1) .style("opacity", 1); const title2a = title .append("text") .attr("x", chartWidth / 2) .attr("y", 95) .style("font-size", "1rem") .style("font-weight", 700) .style("text-anchor", "middle"); title2a .append("tspan") .classed("notPreventive", true) .classed("dot", true) .text(dataLocale[languageSelector].datavizTitleMobile2Span1); title2a .append("tspan") .classed("notPreventive", true) .text(dataLocale[languageSelector].datavizTitleMobile2Span2); const title2b = title .append("text") .attr("x", chartWidth / 2) .attr("y", 115) .style("font-size", "1rem") .style("font-weight", 700) .style("text-anchor", "middle") .classed("notPreventive", true) .text(dataLocale[languageSelector].datavizTitleMobile2Span3); // Transition title2a .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay2) .style("opacity", 1); title2b .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay2) .style("opacity", 1); const title3 = title .append("text") .attr("x", chartWidth / 2) .attr("y", 140) .style("font-size", "1rem") .style("font-weight", 700) .style("text-anchor", "middle"); title3 .append("tspan") .attr("fill", colorTitle) .text(dataLocale[languageSelector].datavizTitleMobile3Span1); title3 .append("tspan") .classed("preventive", true) .classed("dot", true) .text(dataLocale[languageSelector].datavizTitleMobile3Span2); title3 .append("tspan") .classed("preventive", true) .text(dataLocale[languageSelector].datavizTitleMobile3Span3); const per10k = title .append("text") .attr("x", chartWidth / 2) .attr("y", 165) .style("font-size", "1rem") .style("font-weight", 700) .style("text-anchor", "middle") .attr("fill", colorTitle) .text(dataLocale[languageSelector].datavizTitleMobile3Span4); // Transition title3 .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay3) .style("opacity", 1); per10k .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay3) .style("opacity", 1); } else { const title1 = title .append("text") .attr("x", chartWidth / 2) .attr("y", 45) .style("font-size", "1.05rem") .style("font-weight", 700) .style("text-anchor", "middle"); title1 .append("tspan") .attr("fill", colorTitle) .text(dataLocale[languageSelector].datavizTitleDesktop1Span1); title1 .append("tspan") .classed("citizens", true) .text(dataLocale[languageSelector].datavizTitleDesktop1Span2); // Transition title1 .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay1) .style("opacity", 1); const title2 = title .append("text") .attr("x", chartWidth / 2) .attr("y", 70) .style("font-size", "1.05rem") .style("font-weight", 700) .style("text-anchor", "middle"); title2 .append("tspan") .classed("notPreventive", true) .classed("dot", true) .text(dataLocale[languageSelector].datavizTitleDesktop2Span1); title2 .append("tspan") .classed("notPreventive", true) .text(dataLocale[languageSelector].datavizTitleDesktop2Span2); // Transition title2 .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay2) .style("opacity", 1); const title3 = title .append("text") .attr("x", chartWidth / 2) .attr("y", 95) .style("font-size", "1.05rem") .style("font-weight", 700) .style("text-anchor", "middle"); title3 .append("tspan") .attr("fill", colorTitle) .text(dataLocale[languageSelector].datavizTitleDesktop3Span1); title3 .append("tspan") .classed("preventive", true) .classed("dot", true) .text(dataLocale[languageSelector].datavizTitleDesktop3Span2); title3 .append("tspan") .classed("preventive", true) .text(dataLocale[languageSelector].datavizTitleDesktop3Span3); const per10k = title .append("text") .attr("x", chartWidth / 2) .attr("y", 115) .style("font-size", "1.05rem") .style("font-weight", 700) .style("text-anchor", "middle") .attr("fill", colorTitle) .text(dataLocale[languageSelector].datavizTitleDesktop3Span4); // Transition title3 .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay3) .style("opacity", 1); per10k .style("opacity", baseOpacityTitle) .transition() .duration(d) .delay(delay3) .style("opacity", 1); } const makeTitleInteractive = () => title .selectAll(".citizens,.preventive,.notPreventive") .style("cursor", "pointer") .on("mouseover", onMouseOverCategory) .on("mouseout", onMouseOutCategory); // Axis const axes = svg .append("g") .attr("class", "chart-axes") .style("pointer-events", "none") .style("color", colorAxis); axes.append("g").call(xAxis); axes.append("g").call(yAxis); // LINES rates const strokeWidthLines = 0.5; const lines = svg .append("g") .attr("class", "lines-rates") .style("pointer-events", "none") .style("stroke-width", strokeWidthLines); // Lines connecting both rates const connectingRatesLines = lines .append("g") .attr("class", "lines-connecting-prison"); connectingRatesLines .selectAll("line") .data(data) .join("line") .attr("x1", (d) => xScaleRate(d["notPreventivesSuicides_rate"])) .attr("x2", (d) => xScaleRate(d["notPreventivesSuicides_rate"])) .attr( "y1", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .attr( "y2", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 + 0.1 ) .style("stroke", function (d) { return d["preventivesSuicides_rate"] >= d["notPreventivesSuicides_rate"] ? "url(#gradient)" : "url(#gradient-inverse)"; }) // Transition .transition() .duration(d) .delay(delay3) .attr("x2", (d) => xScaleRate(d["preventivesSuicides_rate"])) .on("end", makeTitleInteractive); // I want the title to be interactive JUST when the loading transitions are done // Lines citizens const citizensConnectionLines = lines .append("g") .attr("class", "lines-connecting-citizens"); citizensConnectionLines .selectAll("line") .data(data) .join("line") .attr("x1", (d) => xScaleRate(d["citizensSuicides_rate"])) .attr("x2", (d) => xScaleRate(d["citizensSuicides_rate"])) .attr( "y1", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .attr( "y2", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 + 0.1 ) .style("stroke", colorCitizens) .style("stroke-dasharray", "2 5") .style("stroke-width", 1.5) // Transition .transition() .duration(d) .delay(delay2) .attr("x2", function (d) { const minValue = d3.min([ d["notPreventivesSuicides_rate"], d["preventivesSuicides_rate"] ]); return xScaleRate(minValue); }); // OTHER SHAPES // https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen const shapeGroup = svg .append("g") .attr("class", "shapes-rates") .style("pointer-events", "none"); const rotate = -90; const rotateDesviation = 0; const scale = 0.6; const scaleCitizens = 2.5; const rotateCitizens = 0; const strokeWidthCitizens = 1; // 1. Citizens const citizensLines = shapeGroup.append("g").attr("class", "shapes-citizens"); const g1 = citizensLines .selectAll("g") .data(data) .join("g") .style("stroke", colorCitizens) .style("stroke", d3.color(colorCitizens).brighter(0)) .style("stroke-width", strokeWidthCitizens); g1.append("path") .attr("d", pathCitizens) .attr( "transform-origin", (d) => `${xScaleRate(d["citizensSuicides_rate"])} , ${ yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 }` ) .attr( "transform", (d) => `rotate(${rotateCitizens}) scale(${scaleCitizens})` ); g1 // Transition .attr( "transform", (d) => `translate(${xScaleRate(0)} , ${ yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 })` ) .style("opacity", 0) .transition() .duration(d) .delay(delay1) .style("opacity", 1) .attr( "transform", (d) => `translate(${xScaleRate(d["citizensSuicides_rate"]) - 1} , ${ yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 })` ); // CIRCLES const rCircle = 2.5; const notPreventiveCircles = shapeGroup .append("g") .attr("class", "shapes-notPreventive"); const notPreventive = notPreventiveCircles .selectAll("circle") .data(data) .join("circle") .style("fill", colornotPreventive) .attr( "cy", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .attr("r", rCircle) // Transition .style("opacity", 0) .attr("cx", (d) => xScaleRate(0)) .transition() .duration(d) .delay(delay2) .style("opacity", 1) .attr("cx", (d) => xScaleRate(d["notPreventivesSuicides_rate"])); const preventiveCircles = shapeGroup .append("g") .attr("class", "shapes-preventive"); const preventive = preventiveCircles .selectAll("circle") .data(data) .join("circle") .style("fill", colorPreventive) .attr( "cy", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .attr("r", rCircle) // Transition .style("opacity", 0) .attr("cx", (d) => xScaleRate(0)) .transition() .duration(d) .delay(delay3) .style("opacity", 1) .attr("cx", (d) => xScaleRate(d["preventivesSuicides_rate"])); // TEXTS rates const texts = svg .append("g") .attr("class", "texts-rates") .style("pointer-events", "none") .style("font-weight", 700) .style("font-size", "0.7rem"); const textMargin = 6; const textVerticalOffset = -14; const citizensTexts = texts.append("g").attr("class", "texts-citizens"); citizensTexts .selectAll("text") .data(data) .join("text") // To fix Safari alignment problems we need this inline: .style("text-anchor", "end") .style("alignment-baseline", "central") .style("dominant-baseline", "central") //.attr("x", (d) => xScaleRate(d["citizensSuicides_rate"]) - 8) .attr("x", (d) => xScaleRate(0)) .attr("dx", -8) .attr( "y", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .text((d) => d["citizensSuicides_rate"] ? formatDecimal(d["citizensSuicides_rate"]) : null ) // https://github.com/d3/d3-color#color_brighter .style("fill", d3.color(colorCitizens).brighter(0)) // Transition .style("opacity", 0) .transition() .duration(d) .delay(delay1) .style("opacity", 1); const minimunLimitVisibility = 4; const notPreventiveTexts = texts .append("g") .attr("class", "texts-notPreventive"); notPreventiveTexts .selectAll("text") .data(data) .join("text") // To fix Safari alignment problems we need this inline: .style("alignment-baseline", "central") .style("dominant-baseline", "central") .style("text-anchor", "start") .style("text-anchor", function (d) { if (isMobile) { return d["preventivesSuicides_rate"] - d["notPreventivesSuicides_rate"] <= 25 ? "end" : "start"; } else { return "start"; } }) .attr("x", (d) => xScaleRate(d["notPreventivesSuicides_rate"])) .attr("dx", textMargin) .attr( "y", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .text((d) => d["notPreventivesSuicides_rate"] ? formatDecimal(d["notPreventivesSuicides_rate"]) : null ) .attr("dy", isMobile ? textVerticalOffset : 0) .attr("fill", colorBackground) .attr("stroke", colorBackground) .attr("stroke-width", 2) .clone(true) .attr("fill", colornotPreventive) .attr("stroke", null); // Transition notPreventiveTexts .style("opacity", 0) .transition() .duration(d) .delay(delay2) .style("opacity", 1); const preventiveTexts = texts.append("g").attr("class", "texts-preventive"); preventiveTexts .selectAll("text") .data(data) .join("text") .style("text-anchor", isMobile ? "middle" : "start") .attr("dy", isMobile ? textVerticalOffset : 0) // To fix Safari alignment problems we need this inline: .style("alignment-baseline", "central") .style("dominant-baseline", "central") .attr("dx", isMobile ? 5 : 0) .attr("x", (d) => xScaleRate(d["preventivesSuicides_rate"]) + textMargin) .attr( "y", (d) => yScaleRegions(d.region_code) + yScaleRegions.bandwidth() / 2 ) .text((d) => d["preventivesSuicides_rate"] ? formatDecimal(d["preventivesSuicides_rate"]) : null ) .attr("fill", colorPreventive) // Transition .style("opacity", 0) .transition() .duration(d) .delay(delay3) .style("opacity", 1); // SOURCES const marginStraight = isMobile ? 5 : 30; const sourcesPositionX = isMobile ? chartWidth / 2 : marginStraight; const sourcesPositionY = isMobile ? 60 : 50; const source = svg .append("g") .attr("class", "source") .style("pointer-events", "none") .attr("fill", colorSource); source .append("text") .attr("x", sourcesPositionX) .attr("y", chartHeight - sourcesPositionY) .style("font-size", "0.7rem") .style("text-anchor", isMobile ? "middle" : "left") .text( isMobile ? dataLocale[languageSelector].source1Mobile : dataLocale[languageSelector].source1Desktop ); source .append("text") .attr("x", sourcesPositionX) .attr("y", chartHeight - sourcesPositionY + 15) .style("font-size", "0.7rem") .style("text-anchor", isMobile ? "middle" : "left") .text( isMobile ? dataLocale[languageSelector].source2Mobile : dataLocale[languageSelector].source2Desktop ); if (isMobile) { source .append("text") .attr("x", sourcesPositionX) .attr("y", chartHeight - sourcesPositionY + 30) .style("font-size", "0.7rem") .style("text-anchor", isMobile ? "middle" : "left") .text(dataLocale[languageSelector].source3Mobile); } // DETAILED INFO - HTML const detailedInfo = svg.append("g").attr("class", "detailedInfo"); const detailedInfoY = isMobile ? chartHeight - margin.bottom + 25 : chartHeight - margin.bottom + 35; const detailedInfoX = marginStraight; // Foreign object method // https://observablehq.com/@bumbeishvili/foreignobject-typical-usage const fo2 = detailedInfo .append("foreignObject") // Append for d3.v4 .attr("transform", `translate(${detailedInfoX},${detailedInfoY})`) .classed("legend-fo2", true) .attr("width", chartWidth - detailedInfoX * 2) .attr("height", 250) .style("text-align", isMobile ? "center" : "left") .style("font-size", "0.75rem"); const myCountryData = data.filter((d) => d.region_code === myIPCountry)[0]; fo2 .append("xhtml:div") // Append for d3.v4 .classed("legend-div", true) .html(fillDetailedInfo(myCountryData)); const interactionNoteX = isMobile ? chartWidth / 2 : chartWidth - margin.right; const interactionNoteY = isMobile ? 210 : margin.top - 30; const interactionNotes = svg .append("g") .attr("class", "interaction-notes") .style("text-anchor", isMobile ? "middle" : "end") .style("fill", colorAxis) .attr("transform", `translate(${interactionNoteX},${interactionNoteY})`); interactionNotes .append("text") .text( isMobile ? dataLocale[languageSelector].interactionNoteMobile1 : dataLocale[languageSelector].interactionNoteDesktop1 ) .style("font-size", "0.7rem") .style("opacity", 0) .transition() .duration(d) .delay(delay3 + 1000) .style("opacity", 1); interactionNotes .append("text") .attr("dy", 15) .text( isMobile ? dataLocale[languageSelector].interactionNoteMobile2 : dataLocale[languageSelector].interactionNoteDesktop2 ) .style("font-size", "0.7rem") .style("opacity", 0) .transition() .duration(d) .delay(delay3 + 1000) .style("opacity", 1); // Aux rectangles for interactions const marginAuxAreasLateral = marginStraight; const marginAuxAreasVertical = 0; const auxAreas = svg.append("g").attr("class", "aux-areas"); auxAreas .selectAll("rect") .data(data) .join("rect") .attr("class", (d) => d.region_code) .attr("x", marginAuxAreasLateral) .attr( "y", isMobile ? (d) => yScaleRegions(d.region_code) + marginAuxAreasVertical - 5 : (d) => yScaleRegions(d.region_code) + marginAuxAreasVertical ) .attr("width", chartWidth - marginAuxAreasLateral * 2) .attr("height", yScaleRegions.bandwidth() - marginAuxAreasVertical) .style("stroke", "transparent") .style("fill", "transparent") .style("cursor", "pointer") .on("click", onMouseClick); // IP detection auxAreas.select(`.${myCountry}`).classed("myCountry", true); return svg.node(); }32:T417, 33:T51a,Note about **data** from our [methodology](https://civio.es/2022/05/17/europe-prisons-suicides/#methodology): > _We extracted the data for 2020 suicides from Tables 8 and 24 of the [SPACE I 2021 report](https://wp.unil.ch/space/space-i/annual-reports/) produced by the Council of Europe. Using the total number of inmates, and the number in preventive detention, as well as the number of suicides among pretrial and general inmates, we could calculate the suicide rates per 10,000 inmates. For context, we add also the national suicide rate, sourced from [Eurostat](https://ec.europa.eu/eurostat/web/products-eurostat-news/-/edn-20200910-1). You can download the dataset [here](https://datos.civio.es/dataset/tasas-de-suicidio-en-2020-en-poblacion-general-personas-reclusas-con-condena-firme-y-personas-reclusas-en-prision-provisional-por-cada-10k-persona/)._ > _We use the category "not serving a final sentence" in the SPACES I report because in most European countries the legal status is the same and many do not break down their data between other categories. This category includes both people who have not yet had any trial (the majority) and those who have appealed their conviction and are awaiting a final ruling._ > _We have excluded countries with fewer than 1,000 people in prison._ > > ---34:T4e7,data = { const rateMultiplier = isPer100k ? 10 : 1; const dataCleaning = dataRaw .filter((d) => d["Variable code"]) .filter((d) => d.ratePreTrial !== "NA") // Not available in 4 countries .map((d) => ({ year: +d["Variable code"], region_name: d.region_name, region_code: d.region_code, // Total inmates value (useful for filtering unrelevant countries - small prison population) totalInmates: +d["3B"], // Totals POR REVISAR citizensSuicides_total: +d["suicideCitizens"], // First level preventivesSuicides_total: +d["28I"], // Second level notPreventivesSuicides_total: +d["28E"] - +d["28I"], // Third level TO BE CHECKED // RATES finales: citizensSuicides_rate: d.rateCitizens * rateMultiplier, // First level notPreventivesSuicides_rate: d.rateNotPreTrial * rateMultiplier, // Second level preventivesSuicides_rate: d.ratePreTrial * rateMultiplier // Third level })) .filter((d) => d.totalInmates >= 1000); // Not representative countries OUT: Malta, Luxemburg and Cyprus const dataSorted = dataCleaning .slice() .sort((a, b) => d3.descending(a.preventivesSuicides_rate, b.preventivesSuicides_rate) ); return dataSorted; }35:T1341,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" }, 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" }, 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", 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: { 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: { 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: "Ουκρανία" } })36:T1b89,function fillDetailedInfo(d) { const myCountryCode = d.region_code; if (languageSelector === "es") { return `

En ${ localeCountries[languageSelector][myCountryCode] } ${formatIntegers( d["citizensSuicides_total"] )} personas se quitaron la vida en 2019, es decir, ${formatDecimal( d["citizensSuicides_rate"] )} por cada 10k personas. Entre la población carcelaria con condena firme, ${ d["notPreventivesSuicides_total"] ? formatIntegers(d["notPreventivesSuicides_total"]) : "ninguna" } ${ d["notPreventivesSuicides_total"] >= 2 ? "fueron las personas que se quitaron" : "persona se quitó" } la vida en 2020, ${ d["notPreventivesSuicides_rate"] >= d["citizensSuicides_rate"] ? "elevando ↑" : "disminuyendo ↓" } la cifra a ${formatDecimal( d["notPreventivesSuicides_rate"] )} por cada 10k. Entre personas reclusas en prisión provisional ${ d["preventivesSuicides_total"] ? d["preventivesSuicides_total"] == 1 ? "fue 1 vida" : `fueron ${formatIntegers(d["preventivesSuicides_total"])} vidas` : "no se perdió ninguna vida" }, ${ d["preventivesSuicides_rate"] >= d["notPreventivesSuicides_rate"] ? "elevando ↑" : "disminuyendo ↓" } la tasa de suicidios a ${formatDecimal( d["preventivesSuicides_rate"] )} personas por cada 10k.

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

In ${ localeCountries[languageSelector][myCountryCode] } ${formatIntegers( d["citizensSuicides_total"] )} people took their lives in 2019, i.e. ${formatDecimal( d["citizensSuicides_rate"] )} per 10k people. Among convicted prisoners, ${ d["notPreventivesSuicides_total"] ? formatIntegers(d["notPreventivesSuicides_total"]) : "any" } ${ d["notPreventivesSuicides_total"] >= 2 ? "people took their lives" : "person took his own life" } in 2020, ${ d["notPreventivesSuicides_rate"] >= d["citizensSuicides_rate"] ? "raising ↑" : "decreasing ↓" } the rate to ${formatDecimal( d["notPreventivesSuicides_rate"] )} per 10k. Among prisoners in pretrial custody ${ d["preventivesSuicides_total"] ? d["preventivesSuicides_total"] == 1 ? "there was 1 suicide" : `there were ${formatIntegers( d["preventivesSuicides_total"] )} suicides` : "there were no suicides" }, ${ d["preventivesSuicides_rate"] >= d["notPreventivesSuicides_rate"] ? "raising ↑" : "decreasing ↓" } the rate to ${formatDecimal( d["preventivesSuicides_rate"] )} per 10k.

`; } else if (languageSelector === "it") { return `

In ${ localeCountries[languageSelector][myCountryCode] } ${formatIntegers( d["citizensSuicides_total"] )} persone si sono tolte la vita nel 2019, ovvero ${formatDecimal( d["citizensSuicides_rate"] )} ogni 1 mila. Tra la popolazione carceraria con condanna definitiva, ${ d["notPreventivesSuicides_total"] ? formatIntegers(d["notPreventivesSuicides_total"]) : "nessuno si è tolto la vita" } ${ d["notPreventivesSuicides_total"] >= 2 ? "persone che si sono tolte la vita" : "persona che si è tolta la vita" } nel 2020, ${ d["notPreventivesSuicides_rate"] >= d["citizensSuicides_rate"] ? "aumentando ↑" : "diminuendo ↓" } la cifra è di ${formatDecimal( d["notPreventivesSuicides_rate"] )} ogni 10 mila. Tra i detenuti in custodia cautelare ${ d["preventivesSuicides_total"] ? d["preventivesSuicides_total"] == 1 ? "1 vita" : `${formatIntegers(d["preventivesSuicides_total"])} vite` : "nessuna vita persa" }, ${ d["preventivesSuicides_rate"] >= d["notPreventivesSuicides_rate"] ? "in aumento ↑" : "in diminuzione ↓" } il tasso di suicidi è salito a ${formatDecimal( d["preventivesSuicides_rate"] )} persone ogni 10 mila.

`; } else if (languageSelector === "fr") { return `

En ${ localeCountries[languageSelector][myCountryCode] } ${formatIntegers( d["citizensSuicides_total"] )} personnes ont mis fin à leurs jours en 2019, soit ${formatDecimal( d["citizensSuicides_rate"] )} pour 10k personnes. Parmi les détenus condamnés, ${ d["notPreventivesSuicides_total"] ? formatIntegers(d["notPreventivesSuicides_total"]) >= 2 ? `${formatIntegers( d["notPreventivesSuicides_total"] )} personnes se sont suicidées` : `${formatIntegers( d["notPreventivesSuicides_total"] )} personne s’est suicidée` : "il n’y a pas eu de suicide" } en 2020, ${ d["notPreventivesSuicides_rate"] >= d["citizensSuicides_rate"] ? "augmentant ↑" : "diminuant ↓" } le taux à ${formatDecimal( d["notPreventivesSuicides_rate"] )} pour 10k. Parmi les détenus en détention provisoire ${ d["preventivesSuicides_total"] ? d["preventivesSuicides_total"] == 1 ? "1 personne s’est suicidée" : `${formatIntegers( d["preventivesSuicides_total"] )} personnes se sont suicidées` : "il n’y a pas eu de suicide" }, ${ d["preventivesSuicides_rate"] >= d["notPreventivesSuicides_rate"] ? "augmentant ↑" : "diminuant ↓" } le taux à ${formatDecimal( d["preventivesSuicides_rate"] )} pour 10k.

`; } }37:T17a6,dataLocale = ({ es: { datavizTitleDesktop1Span1: "Tasas de suicidio en 2020 en ", datavizTitleDesktop1Span2: "población general", datavizTitleDesktop2Span1: `· `, datavizTitleDesktop2Span2: `personas reclusas con condena firme`, datavizTitleDesktop3Span1: `y `, datavizTitleDesktop3Span2: ` · `, datavizTitleDesktop3Span3: `personas reclusas en prisión provisional`, datavizTitleDesktop3Span4: `por cada ${ isPer100k ? "100k" : "10k" } personas`, datavizTitleMobile1Span1: "Tasas de suicidio en 2020 en ", datavizTitleMobile1Span2: "población general", datavizTitleMobile2Span1: `· `, datavizTitleMobile2Span2: `personas reclusas con `, datavizTitleMobile2Span3: `condena firme`, datavizTitleMobile3Span1: `y `, datavizTitleMobile3Span2: ` · `, datavizTitleMobile3Span3: `personas en prisión provisional`, datavizTitleMobile3Span4: `por cada ${isPer100k ? "100k" : "10k"} personas`, source1Desktop: "Fuente: Eurostats & Consejo Europeo", source2Desktop: "Estadísticas penales anuales - Informe SPACE I 2021", source1Mobile: "Fuente: Eurostats & Consejo Europeo", source2Mobile: "Estadísticas penales anuales", source3Mobile: "Informe SPACE I 2021", interactionNoteDesktop1: "Haz clic en cualquier país para", interactionNoteDesktop2: "ver sus datos en detalle más abajo ↓↓", interactionNoteMobile1: "Toca sobre cualquier país para", interactionNoteMobile2: "ver sus datos en detalle más abajo ↓↓" }, en: { datavizTitleDesktop1Span1: "Suicide rates in 2020 in ", datavizTitleDesktop1Span2: "general population", datavizTitleDesktop2Span1: `· `, datavizTitleDesktop2Span2: `convicted prisoners`, datavizTitleDesktop3Span1: `and `, datavizTitleDesktop3Span2: ` · `, datavizTitleDesktop3Span3: `prisoners in pretrial detention`, datavizTitleDesktop3Span4: `per ${isPer100k ? "100k" : "10k"} people`, datavizTitleMobile1Span1: "Suicide rates in 2020 in ", datavizTitleMobile1Span2: "general population", datavizTitleMobile2Span1: `· `, datavizTitleMobile2Span2: `convicted`, datavizTitleMobile2Span3: `prisoners`, datavizTitleMobile3Span1: `& `, datavizTitleMobile3Span2: ` · `, datavizTitleMobile3Span3: `prisoners in pretrial detention`, datavizTitleMobile3Span4: `per ${isPer100k ? "100k" : "10k"} people`, source1Desktop: "Source: Eurostats & Council of Europe", source2Desktop: "Annual penal statistics - SPACE Report I 2021", source1Mobile: "Source: Eurostats & Council of Europe", source2Mobile: "Annual penal statistics", source3Mobile: "SPACE Report I 2021", interactionNoteDesktop1: "Click on any country to view", interactionNoteDesktop2: "its data in detail ↓↓ below", interactionNoteMobile1: "Tap on any country to view", interactionNoteMobile2: "its data in detail ↓↓ below" }, it: { datavizTitleDesktop1Span1: "Tassi di suicidio nel 2020 ", datavizTitleDesktop1Span2: "nella popolazione generale,", datavizTitleDesktop2Span1: `nei · `, datavizTitleDesktop2Span2: `prigionieri condannati`, datavizTitleDesktop3Span1: `e nei `, datavizTitleDesktop3Span2: ` · `, datavizTitleDesktop3Span3: `detenuti in attesa di giudizio`, datavizTitleDesktop3Span4: `per 10 mila persone`, datavizTitleMobile1Span1: "Tassi di suicidio nel 2020 nella", datavizTitleMobile1Span2: "popolazione generale,", datavizTitleMobile2Span1: `nei · `, datavizTitleMobile2Span2: `prigionieri`, datavizTitleMobile2Span3: `condannati`, datavizTitleMobile3Span1: `e nei `, datavizTitleMobile3Span2: ` · `, datavizTitleMobile3Span3: `detenuti in attesa di giudizio`, datavizTitleMobile3Span4: `per 10 mila persone`, source1Desktop: "Fonte: Eurostats & Consiglio d’Europa", source2Desktop: "Statistiche penali annuali - Rapporto SPACE I 2021", source1Mobile: "Fonte: Eurostats & Consiglio d’Europa", source2Mobile: "Statistiche penali annuali", source3Mobile: "Rapporto SPACE I 2021", interactionNoteDesktop1: "Click su qualsiasi Paese per visualizzare", interactionNoteDesktop2: "i dati in dettaglio ↓↓ qui sotto", interactionNoteMobile1: "Tap su qualsiasi Paese per visualizzare", interactionNoteMobile2: "i dati in dettaglio ↓↓ qui sotto" }, fr: { datavizTitleDesktop1Span1: "Taux de suicide en 2020 au ", datavizTitleDesktop1Span2: "sein de la population générale", datavizTitleDesktop2Span1: `chez les · `, datavizTitleDesktop2Span2: `personnes incarcérées avec une condamnation ferme`, datavizTitleDesktop2Span2x: `les personnes incarcérées ayant fait l’objet d’une condamnation ferme`, datavizTitleDesktop3Span1: `and chez`, datavizTitleDesktop3Span2: ` · `, datavizTitleDesktop3Span3: `les détenus provisoires`, datavizTitleDesktop3Span4: `pour 10k personnes`, datavizTitleMobile1Span1: "Taux de suicide en 2020 au ", datavizTitleMobile1Span2: "sein de la population générale", datavizTitleMobile2Span1: `chez · `, datavizTitleMobile2Span2: `personnes incarcérées `, datavizTitleMobile2Span3: `avec une condamnation ferme`, datavizTitleMobile3Span1: `and chez`, datavizTitleMobile3Span2: ` · `, datavizTitleMobile3Span3: `les détenus provisoires`, datavizTitleMobile3Span4: `pour 10k personnes`, source1Desktop: "Fonte: Eurostats & Consiglio d’Europa", source2Desktop: "Statistiche penali annuali - Rapporto SPACE I 2021", source1Mobile: "Fonte: Eurostats & Consiglio d’Europa", source2Mobile: "Statistiche penali annuali", source3Mobile: "Rapporto SPACE I 2021", interactionNoteDesktop1: "Cliquez sur un pays pour afficher", interactionNoteDesktop2: "ses données en détail ↓↓ ci-dessous", interactionNoteMobile1: "Appuyez sur un pays pour afficher", interactionNoteMobile2: "ses données en détail ↓↓ ci-dessous" } })38:[] 2f:{"title":"#679d Suicide rates in preventive detention in the European Union","cells":[{"id":0,"value":"# #679d Suicide rates in preventive detention in the European Union\n\n\n.\n\n\n**Article published in Civio (17/05/22):**\n- English version: [The suicide rate among people in pretrial custody is double that of convicted prisoners](https://civio.es/2022/05/17/europe-prisons-suicides/)\n- Spanish version: [Estar en prisión provisional multiplica el riesgo de suicidio en la cárcel](https://civio.es/2022/05/17/prision-provisional-suicidios-espana-covid-19/)\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"en\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"viewof delayStep = Inputs.range([0, 3000], {\n value: 2000,\n label: \"Pick a delay\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"delay1 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"delay2 = delayStep + delay1","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"delay3 = delayStep * 2 + delay1","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"d = delayStep","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"durationTexts = delayStep / 4.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"function onMouseOverCategory(event, d, i) {\n const myCategory = d3.select(this).attr(\"class\");\n\n // Hide all texts\n const categories = d3.selectAll(\".texts-rates > g text\").style(\"opacity\", 0);\n const linesEl = d3.selectAll(\".lines-rates > g\").style(\"opacity\", 0);\n const shapesEl = d3.selectAll(\".shapes-rates > g\").style(\"opacity\", 0);\n\n // Show the particular category\n const myCategoryText = d3\n .selectAll(`g.texts-${myCategory} text`)\n .style(\"opacity\", 1);\n const myShape = d3.selectAll(`g.shapes-${myCategory}`).style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"function onMouseOutCategory(event, d, i) {\n // Show all texts\n d3.selectAll(\".texts-rates g text\").style(\"opacity\", 1);\n\n // Show all geometries\n const linesEl = d3.selectAll(\".lines-rates > g\").style(\"opacity\", 1);\n const shapesEl = d3.selectAll(\".shapes-rates > g\").style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"function onMouseClick(event, d, i) {\n // Clean previous selection\n d3.selectAll(\".aux-areas rect\").classed(\"myCountry\", false);\n // Higlight this country\n d3.select(this).classed(\"myCountry\", true);\n\n // Foreign object tooltip\n d3.select(\".legend-fo2\").select(\".legend-div\").html(fillDetailedInfo(d));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Shapes generators","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"pathObjects = [\n \"M0 0 C5 5 5 10 0 10 C-5 10 -5 5 0 0\",\n \"M-3.5 0 C-2.5 2.5 2.5 2.5 3.5 0 C5 2.5 2.5 7.5 0 10 C-2.5 7.5 -5.0 2.5 -3.5 0\",\n \"M0,0 C5,4 5,7 2,10 L0,8.5 L-2,10 C-5,7 -5,4 0,0\",\n \"M0 0 C5 2.5 5 7.5 0 10 C-5 7.5 -5 2.5 0 0\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"pathCitizens = \"M 0 -3 L 0 3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"myPath = \"M 0 0 C 7 0 7 10 0 10 C -7 10 -7 0 0 0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"sizeShape = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":2392,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":2258,"value":"dateId = new Date()\n .toLocaleDateString(\"de\", {\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\"\n })\n .replaceAll(/[:., ]/g, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"URLdataset_suicides = `https://data.civio.es/posts/prision-provisional/PDT-suicidesData.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"//dataRaw = await d3.csv(dataURL, d3.autoType)\ndataRaw = await d3.csv(URLdataset_suicides, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof rateSelector = Inputs.radio([\"per10k\", \"per100k\"], {\n value: \"per10k\",\n label: \"Pick a rate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"isPer100k = rateSelector === \"per100k\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"dataRaw","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"domainSortedByPreTrialRate = data\n .sort(\n (a, b) =>\n d3.descending(a.preventivesSuicides_rate, b.preventivesSuicides_rate) ||\n d3.descending(\n a.notPreventivesSuicides_rate,\n b.notPreventivesSuicides_rate\n )\n )\n .map((d) => d.region_code)\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"xDomainMax = isPer100k ? 1000 : 55","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"xScaleRate = d3\n .scaleLinear()\n .domain([0, xDomainMax])\n .range([margin.left, chartWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"yScaleRegions = d3\n .scaleBand()\n .domain(domainSortedByPreTrialRate)\n .range([chartHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"---\n\n### Axes","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"xAxis = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0,${chartHeight - margin.bottom})`)\n .call(d3.axisBottom(xScaleRate).ticks(isMobile ? 3 : 8))\n .call((g) => g.select(\".domain\").remove())\n .call(\n (g) =>\n g\n .select(\".tick line\") // First one\n .clone()\n .attr(\"y1\", 0)\n .attr(\"y2\", -chartHeight + margin.top + margin.bottom)\n .attr(\"stroke-opacity\", 0.2)\n //.attr(\"stroke-dasharray\", \"3 5\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"yAxis = (g) =>\n g\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(yScaleRegions)\n .tickFormat((d) => `${localeCountries[languageSelector][d]}`)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .selectAll(\".tick line\")\n .attr(\"x2\", chartWidth - margin.left - margin.right)\n .attr(\"stroke-opacity\", 0.1)\n )\n .call((g) =>\n g\n .selectAll(\"text\")\n .style(\"color\", colorAxisLabels)\n .style(\"color\", d3.color(colorCitizens).brighter(0.5))\n .style(\"font-size\", \"0.67rem\")\n .attr(\"x\", -35)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"---\n\n### IP user location","pinned":false,"hidden":false,"mode":"md"},{"id":61,"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":63,"value":"defaultCountry = \"ES\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"myCountries = data.map((d) => d.region_code)","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"myIPCountry = {\n if (geoIp) {\n const geoIpDetected = geoIp.country_code;\n const isOnTheMap = myCountries.includes(geoIpDetected);\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":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"// en-US format\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"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":71,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"formatPercent = d3.formatLocale(locale).format(\",.1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"formatDecimal = d3.formatLocale(locale).format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"margin = ({\n top: isMobile ? 250 : 170,\n right: isMobile ? 30 : 40,\n bottom: isMobile ? 300 : 210,\n left: isMobile ? 130 : 160\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"chartHeight = isMobile ? 1350 : 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":1524,"value":"chartMaxWidth = 660","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"chartWidth = +Math.min(width, chartMaxWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"mediaQueryLimit = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":1079,"value":"viewof colorMode = Inputs.radio([\"light\", \"dark\"], {\n label: \"Select a color mode\",\n value: \"dark\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"isLightMode = colorMode === \"light\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"colorBackground = isLightMode ? colorMedium : colorNeutral(800)","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"colorCitizens = colorHighlight","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"colornotPreventive = isLightMode ? colorNeutral(0) : colorMediumVariation","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"colorPreventive = isLightMode ? colorPrimary : colorNeutral(50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"colorTitle = isLightMode ? colorNeutral(900) : colorNeutral(300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"colorAxis = isLightMode ? colorNeutral(600) : colorNeutral(400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"colorAxisLabels = isLightMode ? colorNeutral(900) : colorNeutral(50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"colorSource = colorAxis","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"colorLight = \"#e6eaf0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"colorMediumVariation = \"#7b8ca9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"colorMedium = \"#b3bfd3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"colorPrimary = colorNeutral(850)","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"colorMediumComplement = \"#d3c7b3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"//colorHighlight = isLightMode ? \"#d3514a\" : \"#973434\" // Variation\ncolorHighlight = \"#d3514a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}