31:T1a0b,chart = { // Awaiting visibility documentation // https://observablehq.com/@observablehq/visibility await visibility(); // Debugging: If the replay cell updates, this cell will run as well replay; const container = d3.create("div").style("max-width", `${myWidth}px`); //.style("border", "1px solid lightgrey"); // for debugging // Chart title container .append("h4") .attr("class", "title") // We need these 3 style rules when embedding in our website, for a good title layout .style("max-width", "600px") .style("margin-right", "auto") .style("margin-left", "auto") .html(dataLocale[languageSelector].title) .style("margin-bottom", "15px"); // Vertical separation away from chart svg const svg = container .append("svg") .attr("width", myWidth) .attr("height", height); // Attach CSS style svg.append("style").html(css); // AXIS //Add temporal axis svg .append("g") .call(isMobile ? yAxisMobile : xAxisDesktop) .style("opacity", 0) .transition() .delay(delayStep0 + durationStep0 + delayStepsYearly / 2) .duration(800) .style("opacity", 1); //Add axis title svg .append("g") .call(axisAnnotation) .style("opacity", 0) .transition() .delay(delayStep0 + durationStep0 + delayStepsYearly / 2) .duration(800) .style("opacity", 1); // CHART const graph = svg.append("g").attr("class", "chart"); // Initial step0 annotation step0(svg); // Desktop bars if (!isMobile) { graph .append("g") .selectAll("rect") .data(data.sort((a, b) => d3.descending(a.año, b.año))) .join("rect") .attr("y", (d, i) => yScale(d.cumulative)) //starting y position .attr("x", (d) => xScale(2022)) //starting bar position .attr("width", (d) => xScale(2023) - xScale(2022)) //starting width .attr("height", (d) => yScale(d.total) + minSize) .attr("fill", (d) => colorScale(d.año)) .transition() //first we separate the bars .delay(delayStep0) .ease(d3.easeLinear) .duration(durationStep0) .attr("y", (d) => yScale(d.cumulative) + d.order * space) //final y position .transition() //then the time animation starts .delay(delayStepsYearly) .ease(d3.easeLinear) .duration((d, i) => i * durationStepsYearly) .attr("x", (d) => xScale(d.año)) //final bar position .attr("width", (d) => xScale(2023) - xScale(d.año)); //final width } // Mobile bars else if (isMobile) { graph .append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d) => colorScale(d.año)) .attr("x", (d) => xScale(d.cumulative) + margin.left) //final x position .attr("y", (d) => yScale(2023)) .attr("height", (d) => -(yScale(2023) - yScale(2022))) //starting height .attr("width", (d) => xScale(d.total) + minSize) //starting width .transition() //first we separate the bars .delay(delayStep0) .ease(d3.easeLinear) .duration(durationStep0) .attr("x", (d) => xScale(d.cumulative) + d.order * space + margin.left) //final x position .transition() //then the time animation starts .delay(delayStepsYearly) .ease(d3.easeLinear) .duration((d, i) => i * durationStepsYearly) .attr("height", (d) => -(yScale(2023) - yScale(d.año))); //final height } // Annotations const text = graph.append("g"); const annotations = text.append("g"); const eachYear = annotations .selectAll("g") .data(data) .join("g") .attr("class", "annotation"); // Desktop annotations if (!isMobile) { // Values per year eachYear .append("text") //.attr("alignment-baseline", "hanging") // Firefox bug .attr("dominant-baseline", "hanging") .attr("dy", ".35em") .attr("dx", "-.5em") .attr("text-anchor", "end") .attr("x", (d) => xScale(d.año)) .attr("y", (d) => yScale(d.cumulative) + d.order * space) .style("font-weight", "bold") .text((d) => formatIntegers(d.total)) .style("opacity", 0) .transition() .delay( (d, i) => delayStep0 + durationStep0 + delayStepsYearly + i * durationStepsYearly ) .duration(500) .style("opacity", 1); // First annotation (show unit for clarity) annotations .select("g") .append("text") //.attr("alignment-baseline", "hanging") // Firefox bug .attr("dominant-baseline", "hanging") .attr("dy", "2em") .attr("dx", "-0.5em") .attr("text-anchor", "end") .attr("x", (d) => xScale(d.año)) .attr("y", (d) => yScale(d.cumulative) + d.order * space) .style("font-size", ".55rem") .style("fill", colorNeutral(600)) .text(dataLocale[languageSelector].records) .style("opacity", 0) .transition() .delay( (d, i) => delayStep0 + durationStep0 + delayStepsYearly + i * durationStepsYearly ) .duration(500) .style("opacity", 1); } // Mobile annotations else if (isMobile) { // Values per year eachYear .append("text") .attr("dy", "15px") .attr("text-anchor", "end") .attr( "x", (d) => xScale(d.cumulative + d.total) + d.order * space + margin.left + 2 ) //final x position .attr("y", (d) => yScale(d.año)) .style("font-weight", "bold") .html((d) => formatIntegers(d.total)) .style("opacity", 0) .transition() .delay( (d, i) => delayStep0 + durationStep0 + delayStepsYearly + i * durationStepsYearly ) .duration(500) .style("opacity", 1); // First annotation (show unit for clarity) annotations .select("g") .append("text") .attr("dy", "25px") .attr("text-anchor", "end") .attr( "x", (d) => xScale(d.cumulative + d.total) + d.order * space + margin.left ) //final x position .attr("y", (d) => yScale(d.año)) .style("font-weight", "bold") .html((d) => d3.format("d")(d.año)) .style("opacity", 0) .style("font-size", ".55rem") .style("fill", colorNeutral(400)) .text(dataLocale[languageSelector].records) .transition() .delay( (d, i) => delayStep0 + durationStep0 + delayStepsYearly + i * durationStepsYearly ) .duration(500) .style("opacity", 1); } // Add year countdown countdown(text); return container.node(); }32:Tafa,function step0(svg) { const step0 = svg.append("g").attr("class", "step0"); // Desktop if (!isMobile) { const xPos = myWidth - margin.right; const offset = 15; const yPos = height / 2 - 70; const verticalCorrection = 2; // Vertical line step0 .append("line") .attr("x1", xPos + offset / 2) .attr("x2", xPos + offset / 2) .attr("y1", margin.top - verticalCorrection) .attr("y2", margin.top - verticalCorrection) .attr("stroke-width", 2) .attr("stroke", colorNeutral(1000)) .transition() .delay(delayStep0) .duration(durationStep0) .attr( "y2", height - margin.bottom + data.length * space - verticalCorrection - extraMargin ); // Step 0 all data presentation step0 .append("text") .attr("x", xPos) .attr("y", yPos) .attr("class", "legend") .attr("text-anchor", "star") .html( `${ dataLocale[languageSelector].step0_desktop[0] } 276.263 ${ dataLocale[languageSelector].step0_desktop[1] } ${ dataLocale[languageSelector].step0_desktop[2] } ` ) .style("opacity", 0) .transition() .delay(delayStep0) .duration(durationStep0) .style("opacity", 1); } // Mobile scenario else { const xPos = myWidth / 2 - 10; const offset = 15; const yPos = margin.top - 45; const verticalCorrection = 2; // Vertical line step0 .append("line") .attr("x1", margin.left) .attr("x2", margin.left) .attr("y1", yScale(2023) - offset / 2) .attr("y2", yScale(2023) - offset / 2) .attr("stroke-width", 2) .attr("stroke", colorNeutral(1000)) .transition() .delay(delayStep0) .duration(durationStep0) .attr("x2", myWidth - margin.right); // Step 0 all data presentation step0 .append("text") .attr("x", xPos) .attr("y", yPos) .attr("class", "legend") .attr("text-anchor", "middle") .html( `${ dataLocale[languageSelector].step0_mobile[0] } 276.263 ${ dataLocale[languageSelector].step0_mobile[1] } ` ) .style("opacity", 0) .transition() .delay(delayStep0) .duration(durationStep0) .style("opacity", 1); } }33:T524,function countdown(text) { const countdown = text.append("g"); const xBasePos = isMobile ? 55 : 40; const offset = 62; const yBasePos = isMobile ? height - margin.bottom - 6 : height - margin.bottom - 50; countdown .append("text") .attr("x", xBasePos) .attr("y", yBasePos) .attr("class", "subtitle") .text(dataLocale[languageSelector].from) .attr("opacity", 0) .transition() .delay(delayStep0 + durationStep0 + delayStepsYearly) .attr("opacity", 1); const count = countdown .append("text") .attr("x", xBasePos + offset) .attr("y", yBasePos) .attr("class", "countdown") .transition() .delay(delayStep0 + durationStep0 + delayStepsYearly) .duration((data.length - 1) * durationStepsYearly) .ease(d3.easeLinear) .styleTween( "fill", () => (t) => colorScale(d3.format(".0f")(d3.interpolate(2022, 2012)(t))) ) .textTween( () => (t) => `${d3.format(".0f")(2023 - d3.interpolate(2022, 2012)(t))}` ); countdown .append("text") .attr("x", xBasePos) .attr("y", yBasePos + 20) .attr("class", "subtitle") .text(dataLocale[languageSelector].waitingYears) .attr("opacity", 0) .transition() .delay(delayStep0 + durationStep0 + delayStepsYearly) .attr("opacity", 1); }34:T405,function axisAnnotation(svg) { const axisText = svg.append("g").attr("class", "axisAnnotation"); // Desktop if (!isMobile) { axisText .append("text") .attr("x", myWidth - margin.right) .attr("y", height - margin.bottom + 8) .attr("class", "legend") .style("font-size", ".7rem") .style("fill", colorNeutral(500)) .attr("text-anchor", "end") //.attr("alignment-baseline", "hanging") // Firefox bug .attr("dominant-baseline", "hanging") .text(dataLocale[languageSelector].axisLegend); } else if (isMobile) { axisText .append("text") .attr("x", height - margin.bottom + 15) .attr("y", -15) .style("transform", "rotate(90deg)") .attr("text-anchor", "end") //.attr("alignment-baseline", "hanging") // Firefox bug .attr("dominant-baseline", "hanging") .attr("class", "legend") .style("font-size", ".6rem") .style("fill", colorNeutral(500)) .text(dataLocale[languageSelector].axisLegend); } }35:T4dd, 36:[] 2f:{"title":"Pending nationality by residence files according to the year of application","cells":[{"id":0,"value":"# Pending nationality by residence files according to the year of application\n\nVariable width bar chart used to show the **amount** of pending files existing up to date (_y_ axis on desktop devices), encoding as well the **year of application** (_x_ axis on desktop devices). Some plot prototypes were made along the process, choosing the _rect mark_ one as starting point for this d3.js chart.\n\n.\n\n**Article published in Civio (23/03/23):**\n- Spanish version: [Más de un lustro esperando la nacionalidad española por residencia](https://civio.es/el-boe-nuestro-de-cada-dia/2023/03/23/mas-de-un-lustro-esperando-la-nacionalidad-espanola-por-residencia/).\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":1264,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"numbers = {\n let i = 1;\n while (i < data.length) {\n yield Promises.delay(1500, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":1225,"value":"delayStep0 = 1500 // 1500 default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"durationStep0 = 800 // 800 default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"delayStepsYearly = 3000 // 3000 default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"durationStepsYearly = 800 // 800 default","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"dataRaw = d3.tsvParse(\n `año\ttotal\n2012\t30\n2013\t49\n2014\t140\n2015\t728\n2016\t4344\n2017\t6108\n2018\t6181\n2019\t9510\n2020\t13623\n2021\t77494\n2022\t158056`,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dataModif = {\n let cumulative = 0;\n\n const data2 = dataRaw\n .sort((a, b) =>\n isMobile ? d3.descending(a.año, b.año) : d3.ascending(a.año, b.año)\n )\n .map((d, i) => {\n cumulative += d.total;\n return {\n ...d,\n cumulative: cumulative - d.total,\n order: i\n };\n });\n\n return data2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = dataModif","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":1714,"value":"minSize = isMobile ? 3 : 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"//space = isMobile ? 7 : 5\nspace = isMobile ? 7 : 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"xAxisDesktop = (svg) =>\n svg\n .call(\n d3\n .axisBottom(xScale)\n .tickFormat(d3.format(\"d\"))\n .tickSize(height - margin.top - margin.bottom)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) => g.selectAll(\".tick line\").attr(\"color\", colorNeutral(100)))\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"dx\", -13)\n .attr(\"dy\", -4)\n .attr(\"fill\", colorNeutral(500))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"yAxisMobile = (svg) =>\n svg\n .attr(\"transform\", `translate(${myWidth - margin.right},0)`)\n .attr(\"transform\", `translate(${myWidth - margin.right},0)`)\n .call(\n d3\n .axisLeft(yScale)\n .tickFormat(d3.format(\"d\"))\n .tickSize(myWidth - margin.left - margin.right + 30)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) => g.selectAll(\".tick line\").attr(\"color\", colorNeutral(100)))\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"dx\", 30)\n .attr(\"dy\", 12)\n .attr(\"fill\", colorNeutral(500))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"yScale = isMobile ? yScaleMobile : yScaleDesktop","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"xScale = isMobile ? xScaleMobile : xScaleDesktop","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"xScaleDesktop = d3\n .scaleLinear()\n .domain([2012, 2023])\n .range([margin.left, myWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"yScaleDesktop = d3\n .scaleLinear()\n .domain([0, d3.sum(dataRaw, (d) => d.total)])\n .range([0, height - margin.top - margin.bottom - extraMargin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"xScaleMobile = d3\n .scaleLinear()\n .domain([0, d3.sum(dataRaw, (d) => d.total)])\n .range([margin.left, myWidth - margin.right - extraMargin])\n .range([0, myWidth - margin.right - extraMargin])\n .range([0, myWidth - margin.right - extraMargin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"yScaleMobile = d3\n .scaleLinear()\n .domain([2023, 2012])\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"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":102,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"dataLocale = ({\n es: {\n title:\n \"Expedientes de nacionalidad por residencia pendientes según el año de solicitud\",\n records: \"expedientes\",\n from: \"Hasta\",\n waitingYears: \"años de espera\",\n axisLegend: \"← Año de apertura del expediente\",\n\n step0_desktop: [\n \"A finales de 2022 había\",\n \"expedientes\",\n \"pendientes de resolución\"\n ],\n step0_mobile: [\n \"A finales de 2022 había\",\n \"expedientes pendientes de resolución\"\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"height = isMobile ? heightMobile : heightDesktop // If we need 2 or more heights (for mobile, desktop, etc), we should create them in different cells (∑ and hegihtMobile) and use one or the other depending on the flag variable isMobile","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"heightDesktop = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"heightMobile = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"margin = {\n return isMobile\n ? { top: 70, right: 10, bottom: 30, left: 45 } // Mobile margins\n : { top: 0, right: 180, bottom: 30, left: 32 }; // Desktop ones\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"extraMargin = isMobile\n ? space * (data.length - 1) + 50\n : space * (data.length - 1) + 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"mediaQueryLimit = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"myWidth = deviceSelection === \"desktop\" ? Math.min(width, maxWidth) : 320 // 👈🏻 This 320 is just for testing. On production the devideSelection will always be \"desktop\", so it will take the Math.min(width, maxWidth) as expected","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"isMobile = width < mediaQueryLimit || deviceSelection === \"mobile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$35","pinned":true,"hidden":false,"mode":"html"},{"id":906,"value":"colorScale = d3\n .scaleLinear()\n .range([\n colors.project.elboenuestrodecadadia.primary,\n colors.project.elboenuestrodecadadia.light\n ])\n .domain(d3.extent(data, (d) => d.año))","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"---\n \n### Create iFrame + CSS code","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"{\n //variables to generate the code\n const variables = {\n url: \"https://graphs.civio.es/elboenuestrodecadadia/nacionalidad-por-residencia/\", // URL at Civio's repository `civio-graphs`.\n heightDesktop: heightDesktop + 70, // adding extra space for title display in desktop\n heightMobile: heightMobile + 100, // adding extra space for title display in mobile\n mediaQuery: mediaQueryLimit, //breakpoint\n lang: languageSelector,\n variableHeight: true //if there are two heights -> true, if there is only one -> false\n };\n\n return md`~~~html\n${codeToExportIframe(\n variables.url,\n variables.heightDesktop,\n variables.heightMobile,\n variables.mediaQuery,\n variables.lang,\n variables.variableHeight\n)}\n~~~\n`;\n}","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, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}