2a:null 2b:["$","title",null,{"children":"Concesiones vs solicitudes de cartas de naturaleza | Civio | Observable"}] 30:T8ff,chart = { const textPadding = 5; const scaleFactor = 10; // width of each letter in pixels, as approximation // Chart const graph = d3.create("div"); // Attach CSS style // graph.append("style").html(css.innerHTML); const title = graph .append("h4") .attr("class", "title") .html( `Cartas de naturaleza solicitadas y concedidas` ); //bars const svg = graph.append("svg").attr("width", myWidth).attr("height", height); // Axis const axisGroup = svg.append("g").attr("class", "axis"); axisGroup.append("g").call(yAxis); // Rects const rectGroup = svg.append("g").attr("class", "rectsGroup"); rectGroup .selectAll("g") .data(dataRaw) .join("g") .attr("transform", (d) => `translate(0,${yScale(d.año)})`) .attr("class", (d) => "group") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .selectAll("rect") .data((d) => ["solicitudes", "concesiones"].map((key) => ({ key, value: d[key] })) ) .join("rect") .attr("x", xScale(0)) .attr("y", (d) => yScale(d.key)) .attr("width", (d) => xScale(d.value) - xScale(0)) .attr("height", yScale.bandwidth()) .attr("fill", (d) => (d.key === "solicitudes" ? lightColor : mainColor)) .style("opacity", 1); rectGroup .selectAll("g") .data(dataRaw) .join("g") .append("g") .attr("class", "valor") .attr("id", (d) => "datos-" + d.año) // .attr("transform", (d) => `translate(0,${yScale(d.año)})`) .selectAll("text") .data((d) => ["solicitudes", "concesiones"].map((key) => ({ key, value: d[key] })) ) .join("text") .attr("class", (d) => "anotacion") .attr("x", (d) => xScale(d.value)) .attr("y", (d) => yScale(d.key)) .text((d) => formatIntegers(d.value)) .attr("text-anchor", "start") .attr("dx", (d) => textPadding) .attr("dy", 29 * 0.5); const annotation = graph .append("p") .attr("class", "annotation") .html( "Datos: Ministerio de Justicia.
*Las cifras pueden no coincidir con los datos de Civio. Para más información ver metodología" ); return graph.node(); }31:[] 2e:{"id":"53733559f480f041","slug":"concesiones-vs-solicitudes-de-cartas-de-naturaleza","title":"Concesiones vs solicitudes de cartas de naturaleza","thumbnail":"fbb2379e8f2b4a9056fbed870f72cd5591a65937a771fac79942104a0f33efeb","access_level":"public","create_time":"$D2023-02-10T12:11:03.753Z","update_time":"$D2023-03-07T09:27:03.745Z","view_time":null,"first_public_time":"$D2023-02-15T14:40:06.760Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"2f498cc67cbf2e04","login":"civio","name":"Civio","avatar_url":"https://avatars-next.observableusercontent.com/97192929d85c6cd912ab5bcadf8b5870eab960dec55224ac3d0e2301e8ac13b8","tier":"starter_2024"},"version":688,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2916c4393478de32","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":null}],"members":[{"type":"individual","id":"2916c4393478de32","login":"adrimaqueda","name":"ADRI 👨🏻‍💻","avatar_url":"https://avatars-next.observableusercontent.com/24bdfbab92b4fb1419a0d7592a129aa961fb535a9b71953d01a2369dfa0ce504","tier":null,"role":"editor"},{"type":"team","id":"2f498cc67cbf2e04","login":"civio","name":"Civio","avatar_url":"https://avatars-next.observableusercontent.com/97192929d85c6cd912ab5bcadf8b5870eab960dec55224ac3d0e2301e8ac13b8","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"755ce0e56022354b","slug":"cartas-de-naturaleza","title":"Cartas de naturaleza concedidas","owner":{"id":"2f498cc67cbf2e04","login":"civio","name":"Civio"}},"type":"notebook","body":{"titling":"auto","title":"Concesiones vs solicitudes de cartas de naturaleza","cells":[{"id":0,"value":"# Concesiones vs solicitudes de cartas de naturaleza","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"**Artículo publicado en Civio (07/03/23):**\n\n[Mercado de fichajes vía decreto: uno de cada cuatro nacionalizados a dedo es deportista](https://civio.es/el-boe-nuestro-de-cada-dia/2023/03/07/cartas-naturaleza/)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"\n\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"css","database":"$undefined"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"function onMouseOver(event, d, i) {\n d3.selectAll(\".group\").transition().duration(300).style(\"opacity\", 0.3);\n d3.selectAll(\".tick text\").transition().duration(300).style(\"opacity\", 0.3);\n\n d3.select(this).transition().duration(300).style(\"opacity\", 1);\n d3.select(\".a-\" + d.año)\n .transition()\n .duration(300)\n .style(\"opacity\", 1);\n\n d3.select(\"#datos-\" + d.año)\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"font-weight\", 800);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function onMouseOut(event, d, i) {\n d3.selectAll(\".group\").transition().duration(300).style(\"opacity\", 1);\n d3.select(\"#datos-\" + d.año)\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"font-weight\", 400);\n d3.selectAll(\".tick text\").transition().duration(300).style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function onMouseMove(event, d, i) {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function onMouseClick(event, d, i) {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"dataRaw = d3.tsvParse(\n `año\tsolicitudes\tconcesiones\n2007\t515\t128\n2008\t865\t215\n2009\t1064\t348\n2010\t986\t75\n2011\t307\t28\n2012\t208\t11\n2013\t1025\t11\n2014\t1111\t17\n2015\t584\t25\n2016\t348\t16\n2017\t226\t18\n2018\t196\t17\n2019\t161\t14\n2020\t215\t14\n2021\t288\t10\n2022\t698\t17`,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"xScale = d3\n .scaleLinear()\n .domain([0, d3.max(dataRaw, (d) => d.solicitudes)])\n .range([margin.left, myWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"yScale = d3\n .scaleBand()\n .domain(dataRaw.map((d) => d.año))\n .range([margin.top, height - margin.bottom])\n .padding(0.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"axis y\")\n .call(\n d3\n .axisLeft(yScale)\n .tickSizeOuter(0)\n .tickFormat((d) => d)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .style(\"text-anchor\", \"end\")\n .style(\"font-weight\", 600)\n .style(\"font-size\", \".8rem\")\n .attr(\"class\", (d) => \"a-\" + d)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"locale = es_ES","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"height = 500 // If we need 2 or more heights (for mobile, desktop, etc), we should create them in different cells (heightDesktop and hegihtMobile) and use one or the other depending on the flag variable isMobile","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"margin = ({ top: 5, right: 40, bottom: 0, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"mediaQueryLimit = 550","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"myWidth = Math.min(width, maxWidth) // 👈🏻 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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"mainColor = colors.project.elboenuestrodecadadia.primary","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"lightColor = colors.project.elboenuestrodecadadia.light","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"borderColor = colorNeutral(800)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"---\n \n### Create iFrame + CSS code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"{\n //variables to generate the code\n const variables = {\n url: \"https://graphs.civio.es/.../dist/\", // URL at Civio's repository `civio-graphs`.\n heightDesktop: \"590\", //not necessary if there is only one height\n heightMobile: \"560\",\n mediaQuery: mediaQueryLimit, //breakpoint\n lang: \"es\",\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"