30:T876,plotRDL_desktop = Plot.plot({ marginBottom: 70, marginLeft: 10, height: myHeightDesktop, width: myWidthDesktop, x: { //range: dateRange }, y: { axis: false, range: [0, 1] // When adding annotation position on y, I have more control fixing this range }, marks: [ Plot.dot( dataRDL, Plot.dodgeY({ x: "date", fill: (d) => d.date <= ZapateroStart || (d.date >= RajoyStart && d.date <= SanchezStart) ? colorPP : colorPSOE, r: "pages", title: (d) => `${formatDate(d.date)} \n ${wordWrap(d.title, 40)} \n \n ${ d.minister } \n ${d.pages} páginas. ${ d.number_references ? `Modifica ${ d.number_references === 1 ? `1 norma` : d.number_references + " normas" }` : `No modifica ninguna norma` } `, anchor, symbol, padding, target: "_blank", href: (d) => `https://www.boe.es/diario_boe/txt.php?id=${d.id}` }) ), // Annotation Plot.text( dataRDL, Plot.dodgeY({ filter: (d) => d.pages > 50, x: "date", r: "pages", text: (d) => d.pages, fill: "white", fontWeight: "bold", anchor, padding, pointerEvents: "none" // Not working }) ), Plot.text([estadoAlarma.labelDesktop], { x: [estadoAlarma.date], y: [0], dx: width < 700 ? 7 : 25, dy: myHeightDesktop - 20, textAnchor: "middle", fill: "black" }), Plot.text([estadoAlarma.labelDateDesktop], { x: [estadoAlarma.date], y: [0], dx: 14, dy: myHeightDesktop - 35, textAnchor: "start", fill: "black", fontWeight: "bold" }), Plot.text([estadoAlarma.labelArrowDesktop], { x: [estadoAlarma.date], y: [0], dx: 0, dy: myHeightDesktop - 37, textAnchor: "start", fill: "black", fontWeight: "bold", fontSize: "18px" }) ], tooltip: { fill: "black" } })31:T868,plotRDL_mobile = Plot.plot({ height: myHeightMobile, width: myWidthMobile, x: { axis: false // Again, when adding annotation position on x, I have more control fixing this range }, y: { reverse: true }, r: { range: [1.5, 20] // Smaller circles a bit bigger for better user experience }, marks: [ Plot.dot( dataRDL, Plot.dodgeX({ y: "date", fill: (d) => d.date <= ZapateroStart || (d.date >= RajoyStart && d.date <= SanchezStart) ? colorPP : colorPSOE, r: "pages", title: (d) => `${formatDate(d.date)} \n ${wordWrap(d.title, 40)} \n \n ${ d.minister } \n ${d.pages} páginas. ${ d.number_references ? `Modifica ${ d.number_references === 1 ? `1 norma` : d.number_references + " normas" }` : `No modifica ninguna norma` } `, anchor: "middle", symbol, padding }) ), Plot.text( dataRDL, Plot.dodgeX({ filter: (d) => d.pages > 50, y: "date", r: "pages", text: (d) => d.pages, fill: "white", fontWeight: "bold", anchor: "middle", padding }) ), Plot.text([estadoAlarma.labelMobile1], { y: [estadoAlarma.date], x: [0], dx: 135, dy: -42, textAnchor: "end", fill: "black" }), Plot.text([estadoAlarma.labelMobile2], { y: [estadoAlarma.date], x: [0], dx: 135, dy: -32, textAnchor: "end", fill: "black" }), Plot.text([estadoAlarma.labelDateMobile], { y: [estadoAlarma.date], x: [0], dx: 135, dy: -20, textAnchor: "end", fill: "black", fontWeight: "bold" }), Plot.text([estadoAlarma.labelArrowMobile], { y: [estadoAlarma.date], x: [0], dx: 135, dy: -8, textAnchor: "end", fill: "black", fontWeight: "bold", fontSize: "18px" }) ], tooltip: { fill: "black" } })32:T68b,dataRDLModif = { const dataParsed = dataRDLRaw .map((d) => ({ id: d.boe_id, date: parseDate(d.boe_date), year: parseDate(d.boe_date).getFullYear(), title: d.title, approval_date: parseDate(d.approval_date), enactment_date: parseDate(d.enactment_date), cancellation_date: parseDate(d.cancellation_date), minister: d.minister, pages: +d.pages, days: +d.days, reference_type: d.reference_type, reference_value: d.reference_value, reference_type_consolidated: d.reference_type_consolidated })) // Starting with Aznar legislature (5 Mayo 96). But just when the dataset is specified. Otherwise, show the dataset complete .filter((d) => (date === undefined ? d.date : d.date >= AznarStart)); const dataNestedById = d3.groups( dataParsed.filter((d) => [ "ref_adds", "ref_cancels", "ref_completes", "ref_extends", "ref_modifies", "ref_removes", "ref_replaces", "ref_suspends", "ref_updates" ].includes(d.reference_type_consolidated) ), (d) => d.id ); // Just one data per id. Also create a new key that counts the number of references const dataWithReferences = dataParsed // Get unique values. Reference // arr.filter((v,i,a)=>a.findIndex(v2=>(v2.id===v.id))===i) .filter((d, i, a) => a.findIndex((d2) => d2.id === d.id) === i) .map((d) => ({ ...d, number_references: dataNestedById.find((e) => e[0] === d.id) !== undefined ? dataNestedById.find((e) => e[0] === d.id)[1].length : 0 })); return dataWithReferences; }33:[] 2e:{"title":"#703 [UPDATE 2025] Royal Decree-Laws (RDL) 26 years timeline","cells":[{"id":0,"value":"# #703 [UPDATE 2025] Royal Decree-Laws (RDL) 26 years timeline\n## Plot.js chart\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\n- Using the new Plot’s built-in options transform [dodge](https://observablehq.com/@observablehq/plot-dodge) 🙌🏻 to give a general overview of the 26 years timeline of Royal Decree-Laws (RDL) in Spain.\n- Also using [Mike Freeman's](https://observablehq.com/@mkfreeman) super useful [plot tooltip](https://observablehq.com/@mkfreeman/plot-tooltip) 🙌🏻\n\n**Documentation**: \n- [Plot - observable](https://observablehq.com/@observablehq/plot)\n- [Plot - github](https://github.com/observablehq/plot)\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":1966,"value":"(DESKTOP)","pinned":false,"hidden":false,"mode":"md"},{"id":1439,"value":"### ${dataLengh} Decretos Ley entre 1996-${lastYear}","pinned":false,"hidden":false,"mode":"md"},{"id":1961,"value":"El tamaño indica el número de páginas de cada RDL a lo largo de las últimas legislaturas
\nPP \nPSOE ","pinned":false,"hidden":false,"mode":"html"},{"id":1134,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"(MOBILE)","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"---\n\n### Chart settings","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"viewof anchor = Inputs.radio([\"top\", \"middle\", \"bottom\"], {\n label: \"Anchor\",\n value: \"bottom\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"viewof symbol = Inputs.radio([\"circle\", \"hexagon\", \"square\", \"wye\", \"cross\"], {\n label: \"Symbol\",\n value: \"circle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"viewof padding = Inputs.range([-1, 5], {\n label: \"Padding\",\n value: 1.5,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"---\n\n### Handful functions","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")\n//parseDate = d3.timeParse(\"%Y-%M-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"formatDate = d3.timeFormat(\"%d/%m%/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"formatDateUrl = d3.timeFormat(\"%Y/%m%/%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"function wordWrap(long_string, max_char) {\n var sum_length_of_words = function (word_array) {\n var out = 0;\n if (word_array.length != 0) {\n for (var i = 0; i < word_array.length; i++) {\n var word = word_array[i];\n out = out + word.length;\n }\n }\n return out;\n };\n\n var split_out = [[]];\n var split_string = long_string.split(\" \");\n for (var i = 0; i < split_string.length; i++) {\n var word = split_string[i];\n\n if (\n sum_length_of_words(split_out[split_out.length - 1]) + word.length >\n max_char\n ) {\n split_out = split_out.concat([[]]);\n }\n\n split_out[split_out.length - 1] = split_out[split_out.length - 1].concat(\n word\n );\n }\n\n for (var i = 0; i < split_out.length; i++) {\n split_out[i] = split_out[i].join(\" \");\n }\n\n return split_out.join(\" \\n \");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"---\n\n### Data related settings","pinned":false,"hidden":false,"mode":"md"},{"id":1387,"value":"// 5 mayo 1996\nAznarStart = new Date(1996, 4, 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"// 18 abril 2004\nZapateroStart = new Date(2004, 3, 18)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"// 22 dic 2011\nRajoyStart = new Date(2011, 11, 22)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"// 1 jun 2018\nSanchezStart = new Date(2018, 5, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"// Annotation\n//estadoAlarma = new Date(14 - 3 - 2020)\nestadoAlarma = ({\n date: new Date(2020, 2, 14),\n\n labelDesktop: \"Inicio del Estado de Alarma\",\n labelDateDesktop: \"14/03/2020 \",\n labelArrowDesktop: \"↑\",\n\n labelMobile1: \"Inicio del\",\n labelMobile2: \"Estado de Alarma\",\n labelDateMobile: \"14/03/2020\",\n labelArrowMobile: \"←\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"maxPag = d3.max(dataRDLModif, (d) => d.pages)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"---\n\n### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":1652,"value":"colorPP = \"#2078ff\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"colorPSOE = \"#d3514a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1607,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":1605,"value":"maxWidth = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"myWidthDesktop = Math.min(maxWidth, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1937,"value":"myWidthMobile = 280","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"myHeightDesktop = {\n // Bigger size\n if (myWidthDesktop >= 900) return 550;\n // Medium size\n else if (760 <= myWidthDesktop && myWidthDesktop < 950) return 650;\n // Small size (but no mobile)\n else return 750;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2080,"value":"myHeightMobile = 1800","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"#### RDL","pinned":false,"hidden":false,"mode":"md"},{"id":2046,"value":"// Adding date as parameter to avoid cache problems with any data update\ndateId = new Date().getTime()","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"URLdataset_RDL_old = `https://data.civio.es/elboenuestrodecadadia/decretometro/RDL-dataset.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2117,"value":"URLdataset_RDL_complete = `https://data.civio.es/elboenuestrodecadadia/decretometro/RDL-dataset.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2119,"value":"URLdataset_RDL = URLdataset_RDL_complete","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"dataRDLRaw = await d3.csv(URLdataset_RDL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"// All possible reference types\nreferencesArray = Array.from(new Set(dataRDLModif.map((d) => d.reference_type)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"---\n\nDataset ready, filtered by **date** (as optional parameter via URL) 👇🏻","pinned":false,"hidden":false,"mode":"md"},{"id":2163,"value":"//date = \"2022-06-31\"\ndate = undefined","pinned":true,"hidden":false,"mode":"ojs"},{"id":2185,"value":"// For title\nlastYear = date\n ? parseDate(date).getFullYear()\n : dataRDL[dataRDL.length - 1].date.getFullYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2201,"value":"dateRange = [d3.min(dataRDL, (d) => d.date), new Date(lastYear + 1, 0, 1)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"dataRDL = {\n if (date) {\n return dataRDLModif.filter((d) => d.date <= parseDate(date));\n } else return dataRDLModif;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"dataLengh = dataRDL.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"Inputs.table(dataRDL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":".\n\n\n#### Data presidents","pinned":false,"hidden":false,"mode":"md"},{"id":2146,"value":"{\n // Group by minister and get total pages and year range\n const ministerData = d3.rollup(\n dataRDL,\n (v) => {\n const years = new Set(v.map((d) => d.year));\n return {\n totalPages: d3.sum(v, (d) => d.pages),\n years: years.size,\n averagePerYear: d3.sum(v, (d) => d.pages) / years.size,\n minYear: d3.min(v, (d) => d.year),\n maxYear: d3.max(v, (d) => d.year)\n };\n },\n (d) => d.minister\n );\n\n // Flat the array\n const ministerArray = Array.from(ministerData, ([minister, data]) => ({\n minister,\n totalPages: data.totalPages,\n years: data.years,\n averagePerYear: data.averagePerYear,\n minYear: data.minYear,\n maxYear: data.maxYear\n }));\n\n // Sort ministers by date\n return ministerArray.sort((a, b) => a.minYear - b.minYear);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"---\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"Test Plot tooltip - WIP feature. Setting a _title_ attribute on the marks to show a small tooltip with each _Boe id_","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}