2f:Tc2c,chart = { // Chart const container = d3.create("div"); // Attach CSS style container.append("style").html(css); //title const title = container .append("h4") .attr("class", "title") .text("Cartas de naturaleza por categoría"); //subtitle const subtitle = container .append("p") .attr("class", "subtitle") .text("Entre 1993 y 2022"); //circles legend const legendContainer = container .append("svg") .attr("height", "60px") .attr("width", myWidth); legend(legendContainer); //categories grid container const grid = container .append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("row-gap", isMobile ? "2rem" : "3rem") .style("column-gap", "10px") .style("justify-content", isMobile ? "space-around" : "center") .style("margin-top", ".8rem"); //each category grid style const categories = grid .selectAll("div") .data(data) .join("div") .attr("class", "group") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "space-between") .style("width", "150px"); //category name categories .append("div") .attr("class", "category") .style("margin", 0) .style("font-weight", "bold") .html( (d) => `

${d[0]}

` ); //category circles container const circles = categories .append("div") .style("height", (d) => groupScale(d.suma) + 20 + "px") .style("width", "100%") .style("display", "flex"); //svg container for circles const svg = circles .append("svg") .attr("height", (d) => groupScale(d.suma) + "px") .attr("width", (d) => groupScale(d.suma) + "px") .style("margin", "auto") .style("overflow", "visible"); //big circle (category) svg .append("circle") .attr("r", (d) => groupScale(d.suma) / 1.85) .attr("cx", (d) => groupScale(d.suma) / 2) .attr("cy", (d) => groupScale(d.suma) / 2) .attr("fill", lightColor); //small circles (subcategories) const leaf = svg .selectAll("g") .data((d) => pack(d).leaves()) .enter() .append("g") .attr("transform", (d) => `translate(${d.x},${d.y})`); leaf .append("circle") .attr("r", (d) => rScale(d.value)) .attr("class", "subcategory") .attr("fill", mainColor) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .on("mousemove", onMouseMove); //number & icon categories .append("div") .attr("class", "number-icon") .style("margin", 0) .style("font-weight", "bold") .style("text-align", "center") .html( (d) => `

${d.suma}

` ); //bottom note const annotation = container .append("p") .attr("class", "annotation") .text("Pasa por encima de los círculos para obtener más información"); return container.node(); }30:T4ef,function legend(svg) { //////// LEGEND const valuesLegend = isMobile ? [120, 10] : [70, 10]; const xPositLegend = 30; const yPositLegend = 30; const xLabel = xPositLegend + 40; // Bubbles const legend = svg.append("g").attr("class", "circlesLegend"); legend .selectAll("circle") .data(valuesLegend) .join("circle") .attr("cx", xPositLegend) .attr("cy", (d) => yPositLegend) .attr("r", (d) => rScale(d)) .style("fill", (d, i) => (i === 0 ? lightColor : mainColor)) .attr("stroke", "none"); // Lines legend .selectAll("line") .data(valuesLegend) .join("line") .attr("x1", (d) => xPositLegend + rScale(d) - 2) .attr("x2", xLabel) .attr("y1", (d) => yPositLegend + 10 - rScale(d)) .attr("y2", (d) => yPositLegend + 10 - rScale(d)) .style("stroke-dasharray", "2") .attr("stroke", borderColor) .style("opacity", 0.6); // Texts legend .selectAll("text") .data(valuesLegend) .join("text") .attr("x", xLabel) .attr("y", (d) => yPositLegend - rScale(d) + 13) .attr("dx", 2) .text((d, i) => (i === 0 ? "Categoría" : "Subcategoría")) .style("fill", borderColor) .style("font-size", "0.6rem") .style("font-family", "Lato, sans-serif"); }31:T497, 32:[{"id":"ba4e161e5b0e516610ceb668835da41fd0815d47f5ec339702ee6917409bb75b74d302622e1705264087921739ce925c339091e87167a150bf5e98d50b4a9c24","href":"https://static.observableusercontent.com/files/ba4e161e5b0e516610ceb668835da41fd0815d47f5ec339702ee6917409bb75b74d302622e1705264087921739ce925c339091e87167a150bf5e98d50b4a9c24","name":"nobleza.svg","type":"image/svg+xml","lastModified":1676457296134.141,"size":3086},{"id":"1aea1af39972346dfd26c3a899bb7d902a7748e038f3a85f94a88e193f39c34e319fc133e8894af854cd9d9462e28535ffe74bb4897f1b7d4bff47f765ed3970","href":"https://static.observableusercontent.com/files/1aea1af39972346dfd26c3a899bb7d902a7748e038f3a85f94a88e193f39c34e319fc133e8894af854cd9d9462e28535ffe74bb4897f1b7d4bff47f765ed3970","name":"empresarios.svg","type":"image/svg+xml","lastModified":1676457296133.825,"size":1589},{"id":"4c65acd5877f871d1187cca9a86f8957153a809154567c74b5512fb9e53034b8ebac696e7ec051eed15af4e800300363296aba79cb93283c36675426c391b628","href":"https://static.observableusercontent.com/files/4c65acd5877f871d1187cca9a86f8957153a809154567c74b5512fb9e53034b8ebac696e7ec051eed15af4e800300363296aba79cb93283c36675426c391b628","name":"otros.svg","type":"image/svg+xml","lastModified":1676457296134.651,"size":1881},{"id":"64b36ab2cf58232a05e4857ea990d2d888ec1afb1395938f9161f729fb4e0014ae430922a9e22aa82507e34a9d4e0d11c50a8d74c362a6e24574e8ddec4755f1","href":"https://static.observableusercontent.com/files/64b36ab2cf58232a05e4857ea990d2d888ec1afb1395938f9161f729fb4e0014ae430922a9e22aa82507e34a9d4e0d11c50a8d74c362a6e24574e8ddec4755f1","name":"casa-real.svg","type":"image/svg+xml","lastModified":1676457296151.35,"size":1706},{"id":"fcbda8e76f6171a29ab6617f18a2570a80d6220838de6a177cd0b80ebaddbcf87722c7dce0c94ece5a27e1f59831e66962091d5e0b720730c8ca36253c99d420","href":"https://static.observableusercontent.com/files/fcbda8e76f6171a29ab6617f18a2570a80d6220838de6a177cd0b80ebaddbcf87722c7dce0c94ece5a27e1f59831e66962091d5e0b720730c8ca36253c99d420","name":"desconocido.svg","type":"image/svg+xml","lastModified":1676462525285.853,"size":634},{"id":"06c1ad299a8cc4d3b9ae53014c48006943967a6b962df4af3bf46c14e3c35c8c367e1a7b781486e40f963ab377e8345e6273c6fa4d828e8e51c0deece2e004ff","href":"https://static.observableusercontent.com/files/06c1ad299a8cc4d3b9ae53014c48006943967a6b962df4af3bf46c14e3c35c8c367e1a7b781486e40f963ab377e8345e6273c6fa4d828e8e51c0deece2e004ff","name":"deporte.svg","type":"image/svg+xml","lastModified":1676457296140.896,"size":2433},{"id":"3283e84233f0c9cdfab88272d4a236f2e6ca48db01d3f892b8a6b9123390f10cc01e88c335fffc1c85d646aec78fee71887c64fc66c59e183a8e881b2283f4c8","href":"https://static.observableusercontent.com/files/3283e84233f0c9cdfab88272d4a236f2e6ca48db01d3f892b8a6b9123390f10cc01e88c335fffc1c85d646aec78fee71887c64fc66c59e183a8e881b2283f4c8","name":"juristas-abogados.svg","type":"image/svg+xml","lastModified":1676462525290.394,"size":916},{"id":"386866e2b995e9a5d34e0097c5ab96f2433940bbc15304f09994a12d3c80a81edf32cbd2ff46290580d6275f18cf374cc8f23b85f3c2678376c21e90dce4d6a2","href":"https://static.observableusercontent.com/files/386866e2b995e9a5d34e0097c5ab96f2433940bbc15304f09994a12d3c80a81edf32cbd2ff46290580d6275f18cf374cc8f23b85f3c2678376c21e90dce4d6a2","name":"ejercito.svg","type":"image/svg+xml","lastModified":1676457296143.534,"size":2898},{"id":"d85187a64d7ff30e48c289877a6062c4b41895504eb4565266d8b1cfc72c74a08497b6887afe92ea1f5fef7e26238a246ac5cf3f9eda5f3e989272294ee985f5","href":"https://static.observableusercontent.com/files/d85187a64d7ff30e48c289877a6062c4b41895504eb4565266d8b1cfc72c74a08497b6887afe92ea1f5fef7e26238a246ac5cf3f9eda5f3e989272294ee985f5","name":"cultura.svg","type":"image/svg+xml","lastModified":1676457296150.408,"size":3608},{"id":"37ff75260bd5927c3969906aff9968b5962c7de2f1cf078f3964e034169038d421c2333d3443d7573e0327566592def65f23fdfabe69632d42060aa46dc9774c","href":"https://static.observableusercontent.com/files/37ff75260bd5927c3969906aff9968b5962c7de2f1cf078f3964e034169038d421c2333d3443d7573e0327566592def65f23fdfabe69632d42060aa46dc9774c","name":"ciencia.svg","type":"image/svg+xml","lastModified":1676457296153.634,"size":2335},{"id":"ade1c08a1bb3b98da6faf10297ffa02e4f8351085c838d0f84bb49854eff98248181dbb5ef26b3e11cf4fdcda9f7eb562f233c7e5e130906d588c955a053c3c0","href":"https://static.observableusercontent.com/files/ade1c08a1bb3b98da6faf10297ffa02e4f8351085c838d0f84bb49854eff98248181dbb5ef26b3e11cf4fdcda9f7eb562f233c7e5e130906d588c955a053c3c0","name":"terrorismo.svg","type":"image/svg+xml","lastModified":1676457296182.989,"size":2622},{"id":"a99eae5d657d17eb2d3de5f8ed3fa685251729b333e56d5b2534a3319ce146f4d159742dfedd731b49138fbdb4b558cbe97cddac891e1942211fb703b3c19895","href":"https://static.observableusercontent.com/files/a99eae5d657d17eb2d3de5f8ed3fa685251729b333e56d5b2534a3319ce146f4d159742dfedd731b49138fbdb4b558cbe97cddac891e1942211fb703b3c19895","name":"descendientes.svg","type":"image/svg+xml","lastModified":1676457296275.992,"size":3062},{"id":"f90d1dc7af06c0d13e49345a2050559db1ab139421616303bc1163d60165e3fc2ab875881d9eb40727795c95c4feb16779ac6686915d1b1b3f70b356108a6494","href":"https://static.observableusercontent.com/files/f90d1dc7af06c0d13e49345a2050559db1ab139421616303bc1163d60165e3fc2ab875881d9eb40727795c95c4feb16779ac6686915d1b1b3f70b356108a6494","name":"violencia-machista-02.svg","type":"image/svg+xml","lastModified":1676464973955.202,"size":680},{"id":"29210f547444088cf3d6de6189521d558b3962bff12b4cccf6263f9b4bd50d77854e1a480673fbb35cfa3e13a8c7056e635af9e430c90970f8ca54e4c38d2e38","href":"https://static.observableusercontent.com/files/29210f547444088cf3d6de6189521d558b3962bff12b4cccf6263f9b4bd50d77854e1a480673fbb35cfa3e13a8c7056e635af9e430c90970f8ca54e4c38d2e38","name":"yearly-cartas-naturaleza@2.csv","type":"text/csv","lastModified":1676465525459.294,"size":3074},{"id":"939b7afa62b11f5069187a5c990dde3a1749fec3e618202b1445b02bca3422a2f494842fb5eb2834ce525ba701805da3b6e8c8a5be4d188063d2b383afef9ee5","href":"https://static.observableusercontent.com/files/939b7afa62b11f5069187a5c990dde3a1749fec3e618202b1445b02bca3422a2f494842fb5eb2834ce525ba701805da3b6e8c8a5be4d188063d2b383afef9ee5","name":"grouped-cartas-naturaleza-clean-1.csv","type":"text/csv","lastModified":1678100891642.399,"size":1893},{"id":"80933d9b8937db3027c67878074ef0dbc16c6d300d858d712d680029d9c280fd3d5d7f6e363ddec7ad3a53349c8569fb0c967b2c6fae52a87534659a7738bf67","href":"https://static.observableusercontent.com/files/80933d9b8937db3027c67878074ef0dbc16c6d300d858d712d680029d9c280fd3d5d7f6e363ddec7ad3a53349c8569fb0c967b2c6fae52a87534659a7738bf67","name":"grouped-cartas-naturaleza-clean-1@1.csv","type":"text/csv","lastModified":1678107190765.97,"size":1893},{"id":"69e8fa743b3e56cda76386292e490238090492a2f5ba62f697f5b2f9b9dabe0fd60e147f98539b91b3666ba1165ace527d81ea03a8e6edf2853df06b12499921","href":"https://static.observableusercontent.com/files/69e8fa743b3e56cda76386292e490238090492a2f5ba62f697f5b2f9b9dabe0fd60e147f98539b91b3666ba1165ace527d81ea03a8e6edf2853df06b12499921","name":"actos-extraordinarios.svg","type":"image/svg+xml","lastModified":1676478084873.846,"size":1347}] 2d:{"title":"Cartas de naturaleza por categoría 2022","cells":[{"id":0,"value":"# Cartas de naturaleza por categoría 2022","pinned":false,"hidden":false,"mode":"md"},{"id":2288,"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":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"// https://github.com/d3/d3-hierarchy#pack\npack = (data) =>\n d3\n .pack()\n .size([groupScale(data.suma), groupScale(data.suma)]) // [width, height]\n .padding(11)(d3.hierarchy({ children: data[1] }).sum((d) => d.n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function onMouseOver(event, d, i) {\n let tooltipWidth = tooltip.node().offsetWidth;\n let tooltipHeight = tooltip.node().offsetHeight;\n\n d3.selectAll(\".subcategory\").transition().duration(300).style(\"opacity\", 0.4);\n d3.selectAll(\".category\").transition().duration(300).style(\"opacity\", 0.4);\n\n d3.selectAll(\".\" + d.category)\n .transition()\n .duration(300)\n .style(\"opacity\", 1);\n\n d3.select(this)\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"stroke\", `${borderColor}`)\n .style(\"stroke-width\", \"2px\");\n\n tooltip\n .style(\"visibility\", \"visible\")\n .html(\n `

${d.data.Subcategoría}

${d.data.n}

Cartas de naturaleza concedidas

`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function onMouseOut(event, d, i) {\n tooltip.style(\"visibility\", \"hidden\");\n\n d3.selectAll(\".subcategory\")\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"stroke\", \"none\");\n\n d3.selectAll(\".category\").transition().duration(300).style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"function onMouseMove(event, d, i) {\n let tooltipWidth = tooltip.node().offsetWidth;\n let tooltipHeight = tooltip.node().offsetHeight;\n\n tooltip\n .style(\"top\", function () {\n return `${\n event.clientY < tooltipHeight + 10\n ? event.pageY + 10\n : event.pageY - tooltipHeight - 10\n }px`;\n })\n .style(\"left\", function () {\n return `${\n event.pageX + 10 < width * 0.33\n ? event.pageX\n : event.pageX + 10 < width * 0.66\n ? event.pageX - tooltipWidth / 2\n : event.pageX - tooltipWidth\n }px`;\n })\n .style(\"pointer-events\", \"none\")\n .style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":2286,"value":"d3.sum(dataRaw, (d) => d.n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"dataRaw = FileAttachment(\"grouped-cartas-naturaleza-clean-1@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = d3\n .groups(dataRaw, (d) => d.Categoría)\n .map((d) => ({\n ...d,\n suma: d3.sum(d[1], (e) => e.n),\n icon: iconSelector[d[0]]\n }))\n .sort((a, b) => d3.descending(a.suma, b.suma))","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":1812,"value":"groupScale = d3\n .scaleSqrt()\n .range(isMobile ? [15, 100] : [20, 120])\n .domain([1, d3.max(data, (d) => d.suma)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"rScale = d3\n .scaleSqrt()\n .range(isMobile ? [3, 17] : [3, 23])\n .domain(d3.extent(dataRaw, (d) => d.n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":2117,"value":"iconSelector = ({\n Deporte: await FileAttachment(\"deporte.svg\").url(),\n Cultura: await FileAttachment(\"cultura.svg\").url(),\n \"Política y diplomacia\": await FileAttachment(\"nobleza.svg\").url(),\n \"Víctimas del terrorismo\": await FileAttachment(\"terrorismo.svg\").url(),\n Empresarios: await FileAttachment(\"empresarios.svg\").url(),\n Ejército: await FileAttachment(\"ejercito.svg\").url(),\n Ciencia: await FileAttachment(\"ciencia.svg\").url(),\n Desconocido: await FileAttachment(\"desconocido.svg\").url(),\n \"Descendientes de españoles\": await FileAttachment(\"descendientes.svg\").url(),\n \"Por actos extraordinarios\": await FileAttachment(\n \"actos-extraordinarios.svg\"\n ).url(),\n \"Familiares de la Casa Real\": await FileAttachment(\"casa-real.svg\").url(),\n \"Juristas y abogados\": await FileAttachment(\"juristas-abogados.svg\").url(),\n Otros: await FileAttachment(\"otros.svg\").url(),\n \"Víctimas de violencia machista\": await FileAttachment(\n \"violencia-machista-02.svg\"\n ).url()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"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)","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":446,"value":"mainColor = colors.project.elboenuestrodecadadia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"lightColor = colors.project.elboenuestrodecadadia.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"borderColor = colorNeutral(800)","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: \"1220\", //not necessary if there is only one height\n heightMobile: \"1475\",\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":false,"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"}