30:T11a9,async function createPresidentChart_yearly(data, visibility) { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("id", "decretometro-presidents"); // Number of pags const n = Math.floor(data.perYear); // Number of columns const numberColumns = 5; const nPerColumn = Math.ceil(n / numberColumns); const resto = n % numberColumns; const columnsToAdjust = resto ? numberColumns - resto : 0; // BCKG color const bckgGroup = svg.append("g").attr("id", "bckgGroup"); bckgGroup .append("rect") .attr("width", width) .attr("height", height) .style("fill", primaryColor); // PAPERS const papersGroup = svg.append("g").attr("id", "papersGroup"); const horizOffset = 47; const landscapeGroup = papersGroup .selectAll("g") .data(d3.range(numberColumns)) .join("g") .attr("data-column", (d) => d) .style( "transform", (d, i) => `translate(${horizOffset + d * 40}px, ${Math.random() * 10}px)` ); // Number of documents per column to paint const itemsColum = nPerColumn; const columnGroup = landscapeGroup .selectAll("g") .data(d3.range(itemsColum)) .join("g") .style("transform", (d, i) => `translate(${0}px, ${-100}px)`); // Easiest way: hide one element on resto ones if (resto) { const lastColumns = landscapeGroup .filter((d, i) => i >= resto) .attr("data-adjust", true) .select("g") .style("opacity", 0); } columnGroup .append("rect") .attr("x", (d, i) => Math.random() * 3) .attr("y", (d, i) => Math.random() * 3) .attr("width", docWidth * 0.7) .attr("height", docHeight * 0.7) .style("stroke", "grey") .style("fill", "white") .attr("transform", `scale(1, .7) rotate(${docAngle})`); // LEGEND const textGroup = svg .append("g") .attr("id", "textGroup") .style("fill", "white") .style("text-anchor", "middle"); // First line: counter const textCounter = textGroup .append("text") .attr("x", width / 2) .attr("y", height - 70); const dynamicText = textCounter .append("tspan") .text(n) .style("font-size", "2.2rem"); textCounter.append("tspan").attr("dx", 5).text(`páginas/año`); // Second line: president name const presidentLabel = textGroup .append("text") .attr("x", width / 2) .attr("y", height - 40) .text(data.label) .style("font-size", "1.2rem"); // IMAGE const scaleFactor = 0.55; const widthImg = 306 * scaleFactor; const heightImg = 166 * scaleFactor; const imgGroup = svg.append("g").attr("id", "imgGroup"); const img = imgGroup .append("image") .attr("width", widthImg) .attr("height", heightImg) .attr("x", width / 2 - widthImg / 2 + 10) .attr("y", -100) .style("opacity", 0.9) .attr("class", data.name); // Pick a different image on each case imgGroup .select(".Aznar") .attr("href", await FileAttachment("aznar-02.png").url()); imgGroup .select(".Zapatero") .attr("href", await FileAttachment("zapatero-02.png").url()); imgGroup .select(".Rajoy") .attr("href", await FileAttachment("rajoy-02.png").url()); imgGroup .select(".Sanchez") .attr("href", await FileAttachment("sanchez-02.png").url()); // ANIMATION - waiting visibility // "For reusable code, pass the visibility function across cells" visibility().then(function () { // The chart is launched after becoming visible, but we need a small delay. const initialDelay = 800; // 1. Papers animation const columnFactorDelay = 300; columnGroup .transition() .duration(300) //.delay((d, i) => i * 25) .delay(function (d, i) { const columnId = d3.select(this.parentNode).attr("data-column"); return columnFactorDelay * columnId + i * 25; }) .style("transform", (d, i) => `translate(${0}px, ${scaleYYear(i)}px)`); // 2. Text animation // https://observablehq.com/@d3/transition-texttween // Is one column total timespan plus the offset of the other columns const totalDuration = nPerColumn * 25 + columnFactorDelay * numberColumns; dynamicText .transition() .duration(totalDuration + 200) .textTween(() => (t) => `${d3.format(",.0f")(d3.interpolate(0, n)(t))}`); // 3. Image animation img .transition() .duration(500) .delay(totalDuration) .attr("y", scaleYYear(nPerColumn) - heightImg + 5); }); return svg.node(); }31:[{"id":"65ed859108aa5635e88d8567df4bca27ffc84606bb2b353d4fc3e3c1e49316e4ffc7684002d812d4ae61ce350977f50b9b031fa48ddf23a03492eb0d19a987e8","href":"https://static.observableusercontent.com/files/65ed859108aa5635e88d8567df4bca27ffc84606bb2b353d4fc3e3c1e49316e4ffc7684002d812d4ae61ce350977f50b9b031fa48ddf23a03492eb0d19a987e8","name":"rajoy-02.png","type":"image/png","lastModified":1741274993505.514,"size":38249},{"id":"ed2e564b1782f9a38ffd45315d8361d3c052e374a7336bf9cb4954a1926e54b5c01068e65669150b75a1c3c9f4d105f2c881bf5da9d26f2b0107b812cace0086","href":"https://static.observableusercontent.com/files/ed2e564b1782f9a38ffd45315d8361d3c052e374a7336bf9cb4954a1926e54b5c01068e65669150b75a1c3c9f4d105f2c881bf5da9d26f2b0107b812cace0086","name":"sanchez-02.png","type":"image/png","lastModified":1741274993505.514,"size":38027},{"id":"dd9ccedc1580c25a386a226afec9f2202ae6b34316ac4659217fdb4127378737f05166e89157bc56d49a2db646fdd85d8f127af4db144c5d7c42f01b87120dc1","href":"https://static.observableusercontent.com/files/dd9ccedc1580c25a386a226afec9f2202ae6b34316ac4659217fdb4127378737f05166e89157bc56d49a2db646fdd85d8f127af4db144c5d7c42f01b87120dc1","name":"zapatero-02.png","type":"image/png","lastModified":1741274993505.514,"size":38826},{"id":"a05618c7ca76b9c998d11f159ed355d094e356523b6181a34bfb8a2145af10cfe3c8335baced16f6a6e051a5f9552690784cff2477b11c84f3986248af08935d","href":"https://static.observableusercontent.com/files/a05618c7ca76b9c998d11f159ed355d094e356523b6181a34bfb8a2145af10cfe3c8335baced16f6a6e051a5f9552690784cff2477b11c84f3986248af08935d","name":"aznar-02.png","type":"image/png","lastModified":1741274993505.514,"size":36653}] 2e:{"title":"#703 [UPDATE 2025] Royal Decree-Laws (RDL) by president - pages per year","cells":[{"id":0,"value":"# #703 [UPDATE 2025] Royal Decree-Laws (RDL) by president - pages per year\n\n.\n\n\n\n**Article published in Civio (26/03/25):**\n- Spanish version: [Las crisis sanitaria y económica aceleran el aluvión de decretos ley](https://civio.es/el-boe-nuestro-de-cada-dia/2022/07/07/decretos-ley-desde-1996/).](https://civio.es/el-boe-nuestro-de-cada-dia/2025/03/26/decretos-ley-tras-la-pandemia-menos-pero-con-mas-paginas/)\n\n**References**: \n- [Awaiting Visibility](https://observablehq.com/@observablehq/visibility)","pinned":false,"hidden":false,"mode":"md"},{"id":817,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"chartPresident01_yearly = createPresidentChart_yearly(\n RDLPresidentsData[0],\n visibility\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"chartPresident02_yearly = createPresidentChart_yearly(\n RDLPresidentsData[1],\n visibility\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"chartPresident03_yearly = createPresidentChart_yearly(\n RDLPresidentsData[2],\n visibility\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"chartPresident04_yearly = createPresidentChart_yearly(\n RDLPresidentsData[3],\n visibility\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"

${chartPresident01_yearly}

${chartPresident02_yearly}

${chartPresident03_yearly}

${chartPresident04_yearly}

","pinned":false,"hidden":false,"mode":"html"},{"id":842,"value":"---\n\n### Chart functions","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"---\n\n### Papers settings","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"docWidth = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"docHeight = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof docAngle = Inputs.range([-45, 45], {\n label: \"Doc angle\",\n step: 1,\n value: -40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof maxRangeYFactor = Inputs.range([0, 1], {\n label: \"Docs spread on Y\",\n step: 0.1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1212,"value":"RDLPresidentsData = [\n {\n name: \"Aznar\",\n\n perMonth: 5.23,\n perYear: 63.6,\n label: \"Aznar (1996-2004)\",\n politicalParty: \"PP\"\n },\n {\n name: \"Zapatero\",\n perMonth: 9.49,\n perYear: 115.46,\n label: \"Zapatero (2004-2011)\",\n politicalParty: \"PSOE\"\n },\n {\n name: \"Rajoy\",\n perMonth: 27.31,\n perYear: 332.3,\n label: \"Rajoy (2011-2018)\",\n politicalParty: \"PP\"\n },\n {\n name: \"Sanchez\",\n perMonth: 67.6,\n perYear: 822.46,\n label: \"Sánchez (2018-2024)\",\n politicalParty: \"PSOE\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"---\n\n### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":156,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"scaleY = d3\n .scaleLinear()\n .domain([0, 100])\n .range([height - margin.bottom, margin.top + height * maxRangeYFactor])","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"scaleYYear = d3\n .scaleLinear()\n .domain([0, 240])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"margin = ({ bottom: 130, top: 30, left: 20, right: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"width = 290","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"---\n\n### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"//https://github.com/d3/d3-color#color\nprimaryColor = d3.color(colorElBoePrimary).copy({ opacity: 0.8, brighter: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"colorElBoePrimary = colors.project.elboenuestrodecadadia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"colorElBoeSecondary = colors.project.elboenuestrodecadadia.secondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"colorElBoeLight = colors.project.elboenuestrodecadadia.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"---\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"import { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}