31:T853,plotRDL_desktop = Plot.plot({ marginBottom: 70, marginLeft: 10, height: myHeightDesktop, width: myWidthDesktop, 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" } })32: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" } })33:T5ec,dataRDLModif = { const dataParsed = dataRDLRaw .map((d) => ({ id: d.boe_id, date: parseDate(d.boe_date), 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) .filter((d) => 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; }34:[] 2f:{"title":"#703 Royal Decree-Laws (RDL) 26 years timeline","cells":[{"id":0,"value":"# #703 Royal Decree-Laws (RDL) 26 years timeline\n## Plot.js chart\n\nAn update of this chart, here: https://observablehq.com/@civio/decretometo\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\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":1439,"value":"### ${dataLengh} Reales Decretos Ley entre 1996-junio 2022","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":1966,"value":"(DESKTOP)","pinned":false,"hidden":false,"mode":"md"},{"id":1134,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"(MOBILE)","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"$32","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 = `https://data.civio.es/elboenuestrodecadadia/decretometro/RDL-dataset.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"dataRDLRaw = await d3.csv(URLdataset_RDL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$33","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 👇🏻","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"dataRDL = dataRDLModif","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":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":"$W34","stdlib":"1","titling":"auto"}