2f:Tbb7,chart = { // Chart const container = d3.create("div").style("display", "block"); const title = container .append("h4") .attr("class", "title") .text("Cartas de naturaleza concedidas por país de origen"); const subtitle = container .append("p") .attr("class", "subtitle") .text("Entre 1993 y 2022"); const graphs = container .append("div") .style("display", "flex") .style("flex-direction", "column"); const group = graphs .selectAll("div") .data(dataModif) .join("div") .attr("class", "group"); const groupTitle = group .append("p") .style("margin-bottom", ".2rem") .style("font-weight", "bold") .attr("class", "header") .html( (d, i) => `${d[0]} ${ i === 0 ? " cartas de naturaleza concedidas" : "" } (${ d[1].length } países)` ); const country = group .append("div") .style("display", "flex") .style("flex-direction", "row") .style("flex-wrap", "wrap") .style("justify-content", "left") .style("align-items", "flex-end") .style("column-gap", ".2%") .selectAll("div") .data((d) => d[1]) .join("div") .attr("class", "country") .style("padding", "2px") .style("cursor", "pointer") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .on("mousemove", onMouseMove); const ball = country .append("div") .style("width", (d) => circleRadius(d.n) + "px") .style("height", (d) => circleRadius(d.n) + "px") .style("margin", ".3%") .style("display", "flex") .style("box-sizing", "content-box") .style("opacity", 1) .style("background-color", mainColor) .style("border-radius", "50%"); //flags ball .append("p") .style("display", "block") .style("margin", "auto") .style("text-align", "center") .style("color", "white") .style("font-family", "'Lato', sans-serif") .style("font-size", ".7rem") .style("line-height", "1") .style("font-size", (d) => flagScale(d.n) + "px") .html((d) => d.País === "Desconocido" ? `?` : flags.find((e) => e.country === d.ISO)?.flag === undefined ? "" : flags.find((e) => e.country === d.ISO)?.flag ); //texto country .filter((d) => d.n > 20) .append("p") .style("font-family", "'Lato', sans-serif") .style("font-size", ".8rem") .style("text-align", "center") .style("margin", ".4rem 0 0 0") .style("line-height", 1.3) .html( (d) => `${d.País}
${d.n}` ); const annotation = container .append("p") .attr("class", "annotation") .text("Pasa por encima de los círculos para obtener más información"); // Attach CSS style container.append("style").html(css); return container.node(); }30:T4b1, 31:[{"id":"4e7aed416556f8b381b1042a180a1ca5a3e5be4998b09534c24373e287fd2dc7b511865eb36eee7a40f3fbe6200cd854728b21d37798a5d898613fd82774b501","href":"https://static.observableusercontent.com/files/4e7aed416556f8b381b1042a180a1ca5a3e5be4998b09534c24373e287fd2dc7b511865eb36eee7a40f3fbe6200cd854728b21d37798a5d898613fd82774b501","name":"cartas_iso.csv","type":"text/csv","lastModified":1678107118571.747,"size":1404},{"id":"9ee88fe40c59e74c4c0b95611f416ee28acc11c2a6f6caf92233502802fd5102c417d5437813f5be731c46a2d1b1a54cd5d45500685d674465d5d74e542dbf7f","href":"https://static.observableusercontent.com/files/9ee88fe40c59e74c4c0b95611f416ee28acc11c2a6f6caf92233502802fd5102c417d5437813f5be731c46a2d1b1a54cd5d45500685d674465d5d74e542dbf7f","name":"cartas_iso@1.csv","type":"text/csv","lastModified":1775024905876.932,"size":1404}] 2d:{"title":"Cartas de naturaleza por país","cells":[{"id":0,"value":"# Cartas de naturaleza por país","pinned":false,"hidden":false,"mode":"md"},{"id":701,"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":34,"value":"$30","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":415,"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(\".country\").transition().duration(300).style(\"opacity\", 0.4);\n d3.select(this)\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"font-weight\", \"bold\");\n // .style(\"border\", `solid 2px ${borderColor}`);\n\n tooltip\n .style(\"visibility\", \"visible\")\n .html(\n `Entre 1993 y 2022 se ha concedido la carta de naturaleza a ${\n d.n\n } ${\n d.n === 1 ? \"ciudadano\" : \"ciudadanos\"\n } de ${\n flags.find((e) => e.country === d.ISO)?.flag === undefined\n ? \"\"\n : flags.find((e) => e.country === d.ISO)?.flag\n } ${d.País}`\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(\".country\")\n .transition()\n .duration(300)\n .style(\"opacity\", 1)\n .style(\"font-weight\", \"normal\");\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 - 15\n }px`;\n })\n .style(\"left\", function () {\n return `${\n event.pageX + 10 < width * 0.33\n ? event.pageX - 5\n : event.pageX + 10 < width * 0.66\n ? event.pageX - tooltipWidth / 2\n : event.pageX - tooltipWidth + 5\n }px`;\n })\n .style(\"pointer-events\", \"none\")\n .style(\"visibility\", \"visible\");\n}","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 = await FileAttachment(\n \"cartas_iso.csv\"\n).csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dataModif = {\n const dataCleaning = dataRaw\n .sort((a, b) => d3.descending(a.n, b.n))\n .map((d) => ({\n ...d,\n group: groupFunction(d.n)\n }));\n\n const dataGrouping = d3.groups(dataCleaning, (d) => d.group);\n\n return dataGrouping;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = dataModif","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"flags = d3\n .csvParseRows(\n await d3.text(\n \"https://raw.githubusercontent.com/tamirandtom/Countries-flag-emoji-csv/master/countries.csv\"\n )\n )\n .map((d) => ({\n flag: d[0],\n country: d[1]\n }))\n .filter((d) => d.flag !== \"🇧🇶\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"circleRadius = d3\n .scaleLinear()\n .domain([0, d3.max(dataRaw, (d) => d.n)])\n .range(isMobile ? [10, 80] : [20, 100])\n .interpolate(d3.interpolateRound)","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"flagScale = (size) => {\n return isMobile ? size * 1.4 + 5 : size * 1.7 + 9;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"function groupFunction(number) {\n if (number === 1) {\n return \"Una\";\n } else if (number > 1 && number <= 5) {\n return \"Entre dos y cinco\";\n } else if (number > 5 && number <= 10) {\n return \"Entre seis y diez\";\n } else if (number > 10 && number <= 20) {\n return \"Entre 11 y 20\";\n } else return \"Más de 20\";\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":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":320,"value":"mainColor = colors.project.elboenuestrodecadadia.primary","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"lightColor = colors.project.elboenuestrodecadadia.light","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"borderColor = colorNeutral(800)","pinned":true,"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: \"675\", //not necessary if there is only one height\n heightMobile: \"835\",\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":"$W31","stdlib":"1","titling":"auto"}