31: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(); }32:[{"id":"ccc8721c9840170703291330f0fbe0d89b864b8a923b970a5de7d2ccb952ed0834b3a31996d363ba6faa296dacd6561cf1cfc4ca8e9df9435c2be177d13f80dc","href":"https://static.observableusercontent.com/files/ccc8721c9840170703291330f0fbe0d89b864b8a923b970a5de7d2ccb952ed0834b3a31996d363ba6faa296dacd6561cf1cfc4ca8e9df9435c2be177d13f80dc","name":"Rajoy.png","type":"image/png","lastModified":1654684823704.765,"size":21394},{"id":"9fe0aeb43e0904384680a7d109af42d3beab476e3a96c69a01554de1290ffed864b3a73f4406e907ae4388ac3966aa80cabde4f398bb9322c1041cc16f7c55ec","href":"https://static.observableusercontent.com/files/9fe0aeb43e0904384680a7d109af42d3beab476e3a96c69a01554de1290ffed864b3a73f4406e907ae4388ac3966aa80cabde4f398bb9322c1041cc16f7c55ec","name":"_cuerpo04.png","type":"image/png","lastModified":1654682872111.363,"size":136857},{"id":"9dc8a917681ae1f3a1b18440770cc7d717a3a76be3bfbc4fba3681c2907d4c94d763dbad621f33a62de9c81ed6424a8de9ea65f43f0e012a608e55baf2acc134","href":"https://static.observableusercontent.com/files/9dc8a917681ae1f3a1b18440770cc7d717a3a76be3bfbc4fba3681c2907d4c94d763dbad621f33a62de9c81ed6424a8de9ea65f43f0e012a608e55baf2acc134","name":"_cuerpo02.png","type":"image/png","lastModified":1654682872103.044,"size":127553},{"id":"6ad830cecf3ee64f22aebe03dffe8b6caa86f0b5fcd86f661531e8334bf73b93d4b9a48f60c9d995c6e732428cf79f09f7da2dba3072f16a2d0b5df4a634bb8d","href":"https://static.observableusercontent.com/files/6ad830cecf3ee64f22aebe03dffe8b6caa86f0b5fcd86f661531e8334bf73b93d4b9a48f60c9d995c6e732428cf79f09f7da2dba3072f16a2d0b5df4a634bb8d","name":"_cuerpo03.png","type":"image/png","lastModified":1654682872122.733,"size":156622},{"id":"4a337922e172e77bb5153b961580692e9ef333b4893ee34d70afe4133e92f66d0e725f81a6268f4b1b861ff660c3d3f84c0b9a8e1055e6e02fd60d2cc3aa95b6","href":"https://static.observableusercontent.com/files/4a337922e172e77bb5153b961580692e9ef333b4893ee34d70afe4133e92f66d0e725f81a6268f4b1b861ff660c3d3f84c0b9a8e1055e6e02fd60d2cc3aa95b6","name":"Zapatero.png","type":"image/png","lastModified":1654684824020.465,"size":27581},{"id":"c8402d2db9b1df50c7f00eeff4a46a3f2d8856a2de08e50aeffb47c093899c16eaae44f841b76ef5ee1863a7b4ef877327219701d37771e36ef0bebeaf9d098a","href":"https://static.observableusercontent.com/files/c8402d2db9b1df50c7f00eeff4a46a3f2d8856a2de08e50aeffb47c093899c16eaae44f841b76ef5ee1863a7b4ef877327219701d37771e36ef0bebeaf9d098a","name":"Sanchez.png","type":"image/png","lastModified":1654684823402.925,"size":21878},{"id":"4283ee30dac60a0b2c81a5e413fb3443b8e37a545f77f2a857fa5a4e424ba9f7f8a4819a4adc21cc9f120e79e271d642770411680fcc23af04420b362c1befce","href":"https://static.observableusercontent.com/files/4283ee30dac60a0b2c81a5e413fb3443b8e37a545f77f2a857fa5a4e424ba9f7f8a4819a4adc21cc9f120e79e271d642770411680fcc23af04420b362c1befce","name":"Aznar.png","type":"image/png","lastModified":1654684823625.79,"size":9903},{"id":"65ed859108aa5635e88d8567df4bca27ffc84606bb2b353d4fc3e3c1e49316e4ffc7684002d812d4ae61ce350977f50b9b031fa48ddf23a03492eb0d19a987e8","href":"https://static.observableusercontent.com/files/65ed859108aa5635e88d8567df4bca27ffc84606bb2b353d4fc3e3c1e49316e4ffc7684002d812d4ae61ce350977f50b9b031fa48ddf23a03492eb0d19a987e8","name":"rajoy-02.png","type":"image/png","lastModified":1654703670490.28,"size":38249},{"id":"dd9ccedc1580c25a386a226afec9f2202ae6b34316ac4659217fdb4127378737f05166e89157bc56d49a2db646fdd85d8f127af4db144c5d7c42f01b87120dc1","href":"https://static.observableusercontent.com/files/dd9ccedc1580c25a386a226afec9f2202ae6b34316ac4659217fdb4127378737f05166e89157bc56d49a2db646fdd85d8f127af4db144c5d7c42f01b87120dc1","name":"zapatero-02.png","type":"image/png","lastModified":1654703670717.556,"size":38826},{"id":"a05618c7ca76b9c998d11f159ed355d094e356523b6181a34bfb8a2145af10cfe3c8335baced16f6a6e051a5f9552690784cff2477b11c84f3986248af08935d","href":"https://static.observableusercontent.com/files/a05618c7ca76b9c998d11f159ed355d094e356523b6181a34bfb8a2145af10cfe3c8335baced16f6a6e051a5f9552690784cff2477b11c84f3986248af08935d","name":"aznar-02.png","type":"image/png","lastModified":1654703670719.546,"size":36653},{"id":"ed2e564b1782f9a38ffd45315d8361d3c052e374a7336bf9cb4954a1926e54b5c01068e65669150b75a1c3c9f4d105f2c881bf5da9d26f2b0107b812cace0086","href":"https://static.observableusercontent.com/files/ed2e564b1782f9a38ffd45315d8361d3c052e374a7336bf9cb4954a1926e54b5c01068e65669150b75a1c3c9f4d105f2c881bf5da9d26f2b0107b812cace0086","name":"sanchez-02.png","type":"image/png","lastModified":1654703670726.332,"size":38027}] 2f:{"title":"#703 Royal Decree-Laws (RDL) by president - pages per year","cells":[{"id":0,"value":"# #703 Royal Decree-Laws (RDL) by president - pages per year\n\n.\n\n\n\n**Article published in Civio (07/07/22):**\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/).\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":"$31","pinned":true,"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":511,"value":"RDLPresidentsData = [\n {\n name: \"Aznar\",\n perMonth: 5.23,\n perYear: 63.60,\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.30,\n label: \"Rajoy (2011-2018)\",\n politicalParty: \"PP\"\n },\n {\n name: \"Sanchez\",\n perMonth: 72.79,\n perYear: 918,\n label: \"Sánchez (2018-junio 2022)\",\n politicalParty: \"PSOE\"\n }\n]","pinned":true,"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":"$W32","stdlib":"1","titling":"auto"}