31: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(); }32:[] 2f:{"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"},{"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"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"\n\n\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":53,"value":"function onMouseMove(event, d, i) {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"function onMouseClick(event, d, i) {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":102,"value":"locale = es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":121,"value":"margin = ({ top: 5, right: 40, bottom: 0, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"mediaQueryLimit = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":127,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"mainColor = colors.project.elboenuestrodecadadia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"lightColor = colors.project.elboenuestrodecadadia.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"borderColor = colorNeutral(800)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"---\n \n### Create iFrame + CSS code","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}