2b:null 2c:["$","title",null,{"children":"#679b Tally mark counter | Civio | Observable"}] 31:T55b,This happened to my neighbor in Sweden - he's a Syrian refugee, was accused of a crime and was held in prison for three months because the Swedish system feared he might flee. Like, where? The guy is a *refugee*. He has nowhere to go. Eventually they concluded that he was innocent. The police just dragged him out of his home one night. He barely got a few minutes to collect some essentials - he had to walk around in the same pair of pants and the same t-shirt for three months. Not having any family in the country he had nobody to support him in that time, so his pre-paid phone number expired pretty quickly too, isolating him even more. When they released him he didn't have access to his apartment any more, and because he sort-of knew me because I shared my wifi password with him he rang my doorbell and asked for help contacting his friends. That's only reason I know of all this: because he was forced to ask someone he barely knew for help. After he was released from pretrial detention he didn't get any support. Luckily we managed to contact a few friends who helped him out. He seems to have mostly landed on his feet now but he was really struggling for quite a while after that (on top of the regular struggles of being a refugee, as if those aren't enough). And this is "just" three months. I can't imagine what it's like if you're stuck for longer.32:Ta08,chartDIV = { await visibility(); // Animation settings const initialGeneralDelay = isMobile ? 500 : 1800; const div = d3 .create("div") .attr("id", "prison-counter") .style("max-width", `${widthChartDiv}px`) .style("background", "transparent") .attr("class", "container") .style("margin-left", 0) .style("font-family", "Lato"); // Days text div .append("div") .style("display", "inline-block") .style("margin-right", "8px") .style("font-size", "0.8rem") .style("position", "relative") .style("bottom", "6px") .style("left", "3px") .html( `${n} ${dataLocale[languageSelector].days}` ) .style("opacity", 0) .transition() .duration(900) .delay(initialGeneralDelay) .style("opacity", 1); // Marks counter const nBlocks = Math.ceil(n / 5); const resto = n % 5; const group = div .append("div") .style("display", "inline") .selectAll("div") .data(d3.range(nBlocks)) .join("div") .attr("class", "block") .attr("data-number", (d, i) => i) .style("display", "inline-block") .style("width", `${moduleWidth}px`) .style("height", `${moduleHeight}px`) .style("margin", `${moduleOffset}px`) .style("margin-top", 0) .style("position", "relative"); const days = group .selectAll("div") .data(d3.range(5)) .join("div") .attr("class", "day") .style("display", "inline-block") .style("position", "absolute") .style("top", (d, i) => (i + 1) % 5 === 0 ? `-${extensionFiveMark / 2}px` : "0px" ) .style("left", (d, i) => (i + 1) % 5 === 0 ? `${moduleWidth / 2}px` : `${moduleWidth / 8 + (i * moduleWidth) / 4}px` ) .style("transform", (d, i) => (i + 1) % 5 === 0 ? `rotate(${angleFiveMark}deg)` : "" ) .style("background", colorPrimary) .style("width", `${tickWidth}px`) .style("height", (d, i) => (i + 1) % 5 === 0 ? `${moduleHeight + extensionFiveMark}px` : `${moduleHeight}px` ) .style("opacity", 0); if (resto) { // Last block const allDays = div .select(`.block[data-number='${nBlocks - 1}']`) .selectAll(".day") .style("display", "none") .filter((d, i) => i <= resto - 1) .style("display", "block"); } // Animation div .selectAll(".day") .transition() .duration(transitionDuration) .delay((d, i) => initialGeneralDelay + 300 + i * transitionDelay) .style("opacity", 1); return div.node(); }33:[] 2f:{"id":"5a288fbcd543104a","slug":"679b-tally-mark-counter","title":"#679b Tally mark counter","thumbnail":"1ea2719018402774b8d8641dad50837a09d1d12adb276f65aafbc90e9e5cf016","access_level":"public","create_time":"$D2022-03-12T16:51:55.934Z","update_time":"$D2022-05-10T06:49:22.377Z","view_time":null,"first_public_time":"$D2022-05-10T06:39:09.251Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"2f498cc67cbf2e04","login":"civio","name":"Civio","avatar_url":"https://avatars-next.observableusercontent.com/97192929d85c6cd912ab5bcadf8b5870eab960dec55224ac3d0e2301e8ac13b8","tier":"starter_2024"},"version":506,"publish_version":506,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null}],"members":[{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null,"role":"editor"}],"comments":[{"id":"a9788b8ba26067de","reply_to_id":null,"content":"$31","create_time":"$D2022-05-11T10:08:04.249Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"0a589a66eadfba87","reply_to_id":"a9788b8ba26067de","content":"Thanks a lot for sharing your neighbour's story, @jobleonard, what a terrible nightmare :( :( :(\n\nI cannot even imagine going through a similar situation being a foreigner in a completely strange country. It's so unfair and painful that our system discriminates against the most vulnerable people in some many spheres, but particularly on this issue, with such serious personal consequences. We need to keep talking and researching about all this, it is a very dark reality.\n\nThanks again.","create_time":"$D2022-05-11T13:36:20.489Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"865c0384a982c920","slug":"posts","title":"Others | Otros","owner":{"id":"2f498cc67cbf2e04","login":"civio","name":"Civio"}},"type":"notebook","body":{"title":"#679b Tally mark counter","cells":[{"id":0,"value":"# #679b Tally mark counter\n## Small tool used to show the days spent in pretrial detention by the testimonies in our articles about the use and abuse of pretrial detention in the EU.\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\n**References**: \n- [Tally Mark Loader](https://codepen.io/dctablac/pen/oNwamyV) in SVG by [@dctablac](https://codepen.io/dctablac) 🙌🏻 >> Initial reference. Here I decided to redesign it in HTML simple div elements instead of SVG, as more easily responsive. \n\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":459,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof n = Inputs.range([1, 1000], { label: \"n\", value: 331, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"---\n\n### Chart styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":294,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":318,"value":"---\n\n### Main chart settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof moduleWidth = Inputs.range([10, 200], {\n label: \"Module width\",\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof moduleHeight = Inputs.range([10, 200], {\n label: \"Module height\",\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"viewof moduleOffset = Inputs.range([2, 100], {\n label: \"Module offset\",\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"viewof angleFiveMark = Inputs.range([0, 360], {\n label: \"Angle rotation\",\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"viewof extensionFiveMark = Inputs.range([0, 50], {\n label: \"Extension five mark\",\n value: 15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"viewof tickWidth = Inputs.range([1, 5], {\n label: \"Tick width\",\n value: 1.5,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"viewof transitionDelay = Inputs.range([0, 200], {\n label: \"Transition delay\",\n //value: 30,\n value: 30,\n step: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"viewof transitionDuration = Inputs.range([0, 300], {\n label: \"Transition duration\",\n value: 230,\n step: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":394,"value":"mediaQueryLimit = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"widthChartDiv = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"---\n\n### Translations & formatting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":457,"value":"dataLocale = ({\n en: {\n days: \"days\"\n },\n es: {\n days: \"días\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"---\n\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":177,"value":"import { colorPrimary, colorMedium, colorLight } from \"73a8f500d78772d2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"