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:{"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"},{"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"},{"id":5,"value":"viewof n = Inputs.range([1, 1000], { label: \"n\", value: 331, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"---\n\n### Chart styles","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":318,"value":"---\n\n### Main chart settings","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"viewof moduleWidth = Inputs.range([10, 200], {\n label: \"Module width\",\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof moduleHeight = Inputs.range([10, 200], {\n label: \"Module height\",\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof moduleOffset = Inputs.range([2, 100], {\n label: \"Module offset\",\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof angleFiveMark = Inputs.range([0, 360], {\n label: \"Angle rotation\",\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof extensionFiveMark = Inputs.range([0, 50], {\n label: \"Extension five mark\",\n value: 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":379,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"mediaQueryLimit = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"widthChartDiv = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"---\n\n### Translations & formatting","pinned":false,"hidden":false,"mode":"md"},{"id":457,"value":"dataLocale = ({\n en: {\n days: \"days\"\n },\n es: {\n days: \"días\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"---\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"import { colorPrimary, colorMedium, colorLight } from \"73a8f500d78772d2\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}