43:["$","title",null,{"children":"Actividad en clase | Gady Magdiel Enciso Gomez | Observable"}] 4b:T32f0,chart = { const {summer, winter} = medals; const W = 720, H = 535, cx = W / 2, cy = 285, off = 20; const r0 = 56, k = 3.0, LR = 240, rMax = r0 + 48 * k, rad = Math.PI / 180; const col = {g: "#E0A91E", s: "#A8AEB5", b: "#B8693A"}; const J = {b: 0, s: 1, g: 2}; // dentro de cada país: bronce, plata, oro (el oro queda hacia afuera) const w = 4.6, gap = 0.5, slot = 17.4, pad = (slot - (3 * w + 2 * gap)) / 2; const order = {t: ["g", "s", "b"], g: ["g", "s", "b"], s: ["s", "g", "b"], b: ["b", "g", "s"]}; const val = (o, f) => f === "t" ? o.t : o[f]; const rank = (list, f) => list.slice().sort((a, b) => { for (const key of order[f]) { const d = b[key] - a[key]; if (d) return d; } return a.id < b.id ? -1 : 1; }).slice(0, 10); const uid = "om" + Math.random().toString(36).slice(2, 7); const root = d3.create("div").style("position", "relative").style("max-width", "760px") .style("font-family", "system-ui, sans-serif"); root.append("style").text(` .om-tile{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px; border:1.5px solid rgba(128,128,128,.35);border-radius:8px;background:transparent; color:inherit;font:inherit;font-size:14px;cursor:pointer} .om-tile.on{border-color:#378ADD;background:rgba(55,138,221,.14)} .om-sw{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none} .om-cap{position:absolute;top:0;display:flex;align-items:center;gap:10px;padding:8px 14px; border-radius:12px;pointer-events:none} .om-tip{position:absolute;z-index:5;pointer-events:none;min-width:230px;padding:10px 12px; border-radius:10px;background:Canvas;color:CanvasText;border:1px solid rgba(128,128,128,.45); font-size:13px;opacity:0;transition:opacity .12s}`); // Título const head = root.append("div").style("margin", "0 0 14px"); head.append("div").style("font-size", "24px").style("font-weight", "700").style("line-height", "1.2") .text("Los líderes olímpicos en medallas"); head.append("div").style("font-size", "14px").style("opacity", 0.7).style("margin-top", "4px") .text("Los 10 países con más medallas en Sochi 2014 y Río 2016"); // Filtro en mosaico const tiles = root.append("div").style("display", "grid").style("gap", "8px").style("margin", "0 0 12px") .style("grid-template-columns", "repeat(4,minmax(0,1fr))"); const defs = [["t", "Todas", ["g", "s", "b"]], ["g", "Oro", ["g"]], ["s", "Plata", ["s"]], ["b", "Bronce", ["b"]]]; for (const [f, label, sw] of defs) { const t = tiles.append("button").attr("class", "om-tile").attr("data-f", f); const s = t.append("span").style("display", "flex").style("gap", "2px"); sw.forEach(c => s.append("span").attr("class", "om-sw").style("background", col[c])); t.append("span").text(label); } const stage = root.append("div").style("position", "relative"); const cap = (side, icon, t1, t2, bg, bd) => stage.append("div").attr("class", "om-cap") .style(side, "0").style("background", bg).style("border", `0.5px solid ${bd}`) .html(`${icon}

${t1}

${t2}

`); cap("left", "❄️", "Sochi 2014", "Invierno", "rgba(55,138,221,.14)", "rgba(55,138,221,.45)"); cap("right", "☀️", "Río 2016", "Verano", "rgba(239,159,39,.16)", "rgba(216,90,48,.45)"); const svg = stage.append("svg").attr("viewBox", [0, 0, W, H]).attr("width", "100%") .style("display", "block").attr("role", "img") .attr("aria-label", "Top 10 de países por medallas: invierno a la izquierda, verano a la derecha"); const gdefs = svg.append("defs"); const tip = stage.append("div").attr("class", "om-tip"); root.append("div").style("font-size", "12px").style("opacity", 0.6) .style("text-align", "center").style("margin-top", "4px").text("Cada anillo = 10 medallas"); const arc = d3.arc(); const ringLine = d3.lineRadial().angle(d => d.a).radius(d => d.r); const flag = id => banderas[id] ? `

` : ""; const tipHTML = (d, i, season) => { const rows = [["g", "Oro"], ["s", "Plata"], ["b", "Bronce"]].map(([k, n]) => { const p = d.t ? d[k] / d.t : 0; return `

${n} ${d[k]} ${Math.round(p * 100)}%

`; }).join(""); return `

${flag(d.id)}#${i + 1} ${d.name} ${season}

${rows}

Total${d.t} medallas

`; }; function makeHalf(data, sign, season, th) { // sign: -1 = izquierda (invierno), +1 = derecha (verano) const list = data.map(o => ({...o})); const g = svg.append("g").attr("transform", `translate(${cx + sign * off},${cy})`); const pol = (r, deg) => [r * Math.sin(sign * deg * rad), -r * Math.cos(sign * deg * rad)]; const half = (r1, r2) => ({innerRadius: r1, outerRadius: r2, startAngle: sign > 0 ? 0 : -Math.PI, endAngle: sign > 0 ? Math.PI : 0}); const line = (p, q, stroke, sw, op = 1) => g.append("line").attr("x1", p[0]).attr("y1", p[1]).attr("x2", q[0]).attr("y2", q[1]) .attr("stroke", stroke).attr("stroke-width", sw).attr("stroke-opacity", op).attr("stroke-linecap", "round"); const gid = `${uid}-${th.kind}`; const gr = gdefs.append("radialGradient").attr("id", gid).attr("gradientUnits", "userSpaceOnUse") .attr("cx", 0).attr("cy", 0).attr("r", rMax); gr.append("stop").attr("offset", "0%").attr("stop-color", th.c0).attr("stop-opacity", 0.4); gr.append("stop").attr("offset", "100%").attr("stop-color", th.c1).attr("stop-opacity", 0.07); g.append("path").attr("d", arc(half(r0 - 8, rMax))).attr("fill", `url(#${gid})`) .attr("stroke", th.line).attr("stroke-width", 0.6); d3.range(1, 5).forEach(n => { const r = r0 + n * 10 * k, pts = d3.range(0, 61).map(i => ({a: sign * i * Math.PI / 60, r})); g.append("path").attr("d", ringLine(pts)).attr("fill", "none").attr("stroke", th.ring) .attr("stroke-width", 0.6).attr("stroke-dasharray", "2 3"); }); if (th.kind === "sun") { // rayos largos y cortos alternados d3.range(0, 24).forEach(i => { const a = 3.75 + i * 7.5, long = i % 2 === 0, rb = rMax + 4, hw = long ? 2.3 : 1.8, tipR = rb + (long ? 22 : 11); const p = pol(rb, a - hw), q = pol(tipR, a), s = pol(rb, a + hw); g.append("path").attr("d", `M${p}L${q}L${s}Z`).attr("fill", long ? "#EF9F27" : "#F5C04A"); }); } else { // brazos de copo con ramas [0, 60, 120, 180].forEach(a => { const u = [Math.sin(sign * a * rad), -Math.cos(sign * a * rad)]; const at = r => [u[0] * r, u[1] * r]; line(at(r0 - 8), at(rMax + 20), "#5BA3E0", 1.4, 0.75); [[r0 + 36, 12], [r0 + 84, 16], [rMax - 2, 14]].forEach(([r, len]) => { [60, -60].forEach(t => { const c = Math.cos(t * rad), s = Math.sin(t * rad); const v = [u[0] * c - u[1] * s, u[0] * s + u[1] * c]; const P = at(r); line(P, [P[0] + v[0] * len, P[1] + v[1] * len], "#5BA3E0", 1.2, 0.75); }); }); }); [30, 90, 150].forEach(a => { // copos pequeños en el borde const c = pol(rMax + 16, a); [0, 60, 120].forEach(t => { const dx = 6 * Math.cos(t * rad), dy = 6 * Math.sin(t * rad); line([c[0] - dx, c[1] - dy], [c[0] + dx, c[1] + dy], "#5BA3E0", 1.3, 0.9); }); }); } // núcleo central con el número de ranking g.append("path").attr("d", arc(half(0, r0 - 8))).attr("fill", th.core).attr("stroke", th.coreLine).attr("stroke-width", 1); d3.range(10).forEach(i => { const [x, y] = pol(38, 3 + i * slot + slot / 2); g.append("text").attr("x", x).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "middle") .attr("font-size", 11).attr("font-weight", 600).style("fill", "currentColor").text(i + 1); }); const groups = g.selectAll("g.c").data(list, d => d.id).join("g").attr("class", "c") .style("opacity", 0).style("pointer-events", "none"); groups.each(function (d) { const el = d3.select(this); d.slot = 0; d.vis = false; d.init = false; d.hit = el.append("path").attr("fill", "transparent"); d.bars = ["b", "s", "g"].map(key => ({key, el: el.append("path").attr("fill", col[key]), cur: {s: 0, e: 0, r: r0}})); d.label = el.append("text").attr("font-size", 12).attr("text-anchor", sign > 0 ? "start" : "end") .style("fill", "currentColor"); d.label.append("tspan").attr("class", "n"); d.label.append("tspan").attr("class", "v").style("fill", "currentColor").style("opacity", 0.55); const place = event => { const [x, y] = d3.pointer(event, stage.node()); const tw = tip.node().offsetWidth || 240, sw = stage.node().clientWidth || W; tip.style("left", (x + 18 + tw > sw ? x - 18 - tw : x + 18) + "px").style("top", Math.max(0, y - 20) + "px"); }; el.on("mouseenter", event => { groups.style("opacity", o => o.vis ? (o === d ? 1 : 0.3) : 0); tip.html(tipHTML(d, d.slot, season)).style("opacity", 1); place(event); }) .on("mousemove", place) .on("mouseleave", () => { groups.style("opacity", o => o.vis ? 1 : 0); tip.style("opacity", 0); }); }); const ang = (a1, a2) => ({s: Math.min(sign * a1 * rad, sign * a2 * rad), e: Math.max(sign * a1 * rad, sign * a2 * rad)}); return function update(f) { const top = rank(list, f); groups.each(function (d) { const i = top.indexOf(d); d.vis = i >= 0; d3.select(this).style("pointer-events", d.vis ? "all" : "none") .transition().duration(500).style("opacity", d.vis ? 1 : 0); if (!d.vis) return; d.slot = i; const st = 3 + i * slot, c = st + slot / 2, ha = ang(st, st + slot); d.hit.attr("d", arc({innerRadius: r0 - 4, outerRadius: LR - 8, startAngle: ha.s, endAngle: ha.e})); d.bars.forEach(b => { let a1, a2, r; if (f === "t") { a1 = st + pad + J[b.key] * (w + gap); a2 = a1 + w; r = r0 + Math.max(d[b.key], 0.4) * k; } else if (b.key === f) { a1 = c - 5; a2 = c + 5; r = r0 + Math.max(d[b.key], 0.4) * k; } else { a1 = a2 = c; r = r0; } const t = ang(a1, a2); t.r = r; b.el.transition().duration(700).attrTween("d", () => { const ip = d3.interpolate({...b.cur}, t); return u => { const p = ip(u); b.cur = p; return arc({innerRadius: r0, outerRadius: p.r, startAngle: p.s, endAngle: p.e}); }; }); }); const cc = sign * c * rad, pos = {x: LR * Math.sin(cc), y: -LR * Math.cos(cc) + 4}; d.label.select(".n").text(d.name + " "); d.label.select(".v").text(val(d, f)); if (!d.init) { d.pos = pos; d.label.attr("transform", `translate(${pos.x},${pos.y})`); d.init = true; } else d.label.transition().duration(700).attrTween("transform", () => { const ip = d3.interpolate({...d.pos}, pos); return u => { d.pos = ip(u); return `translate(${d.pos.x},${d.pos.y})`; }; }); }); }; } const upW = makeHalf(winter, -1, "Invierno · Sochi 2014", {kind: "snow", c0: "#CFE8FF", c1: "#378ADD", line: "rgba(55,138,221,.5)", ring: "rgba(55,138,221,.45)", core: "rgba(133,183,235,.28)", coreLine: "#5BA3E0"}); const upS = makeHalf(summer, 1, "Verano · Río 2016", {kind: "sun", c0: "#FFD25A", c1: "#EF9F27", line: "rgba(216,90,48,.5)", ring: "rgba(216,90,48,.45)", core: "rgba(239,159,39,.30)", coreLine: "#EF9F27"}); function go(f) { upW(f); upS(f); tiles.selectAll(".om-tile").classed("on", function () { return this.dataset.f === f; }); } tiles.selectAll(".om-tile").on("click", function () { go(this.dataset.f); }); go("t"); return root.node(); }4c:[{"id":"0ca300c2880aca628a11e21a1b9c42214ee01c19b8113365a060f03442a70ef15cf14cadaaa1ddc0459c42b207426524a230df6eddf72a9b56f91c91ac413ac6","href":"https://static.observableusercontent.com/files/0ca300c2880aca628a11e21a1b9c42214ee01c19b8113365a060f03442a70ef15cf14cadaaa1ddc0459c42b207426524a230df6eddf72a9b56f91c91ac413ac6","name":"olympics_2014_2016.csv","type":"text/csv","lastModified":1793718219503,"size":2644322}] 47:{"id":"c99bdeba649f2bd6","slug":"actividad-en-clase","title":"Actividad en clase","thumbnail":"58e8f25b270510314ab10883a01c07c00a90c2356d6534f2948ae00cd8f6285a","access_level":"public","create_time":"$D2026-11-03T15:04:32.195Z","update_time":"$D2026-11-04T01:13:04.062Z","view_time":null,"first_public_time":"$D2026-11-04T04:40:10.932Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"67fb70fa4003f225","login":"gady-magdiel-enciso-gomez","name":"Gady Magdiel Enciso Gomez","avatar_url":"https://avatars-next.observableusercontent.com/deaff993531a095642c6dc44e52698b0e408721e595aa5e4791e03508ff40845","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":34,"publish_version":34,"role":null,"authored":false,"authors":[{"type":"individual","id":"224e1cd714bd00a7","login":"magdy","name":"Gady Magdiel Enciso Gomez","avatar_url":"https://avatars-next.observableusercontent.com/deaff993531a095642c6dc44e52698b0e408721e595aa5e4791e03508ff40845","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"67fb70fa4003f225","login":"gady-magdiel-enciso-gomez","name":"Gady Magdiel Enciso Gomez","avatar_url":"https://avatars-next.observableusercontent.com/deaff993531a095642c6dc44e52698b0e408721e595aa5e4791e03508ff40845","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Actividad en clase","cells":[{"id":1,"value":"# Actividad en clase","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = FileAttachment(\"olympics_2014_2016.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"¿qué 10 paises han ganado más medallas? ¿Cuántas medallas de bronce, plata y oro recibio cada uno?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"nombres = ({\n USA: \"EE. UU.\", CHN: \"China\", GBR: \"Reino Unido\", RUS: \"Rusia\", GER: \"Alemania\",\n FRA: \"Francia\", JPN: \"Japón\", AUS: \"Australia\", ITA: \"Italia\", CAN: \"Canadá\",\n KOR: \"Corea del Sur\", NED: \"Países Bajos\", NZL: \"Nueva Zelanda\", KAZ: \"Kazajistán\",\n AZE: \"Azerbaiyán\", ESP: \"España\", BRA: \"Brasil\", HUN: \"Hungría\", UKR: \"Ucrania\",\n CUB: \"Cuba\", IRI: \"Irán\", BLR: \"Bielorrusia\", POL: \"Polonia\", SWE: \"Suecia\",\n NOR: \"Noruega\", AUT: \"Austria\", SUI: \"Suiza\", CZE: \"Chequia\", SLO: \"Eslovenia\",\n FIN: \"Finlandia\", JAM: \"Jamaica\", RSA: \"Sudáfrica\", CRO: \"Croacia\", DEN: \"Dinamarca\",\n TUR: \"Turquía\", COL: \"Colombia\", ARG: \"Argentina\", SRB: \"Serbia\", BEL: \"Bélgica\",\n UZB: \"Uzbekistán\", THA: \"Tailandia\", GRE: \"Grecia\", MEX: \"México\", KEN: \"Kenia\",\n ETH: \"Etiopía\", LAT: \"Letonia\", SVK: \"Eslovaquia\", PER: \"Perú\", ROU: \"Rumania\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"medals = {\n const tipo = {Gold: \"g\", Silver: \"s\", Bronze: \"b\"};\n // Una medalla por evento, país y tipo: un equipo cuenta una sola vez\n const unicas = new Map();\n for (const d of data) {\n if (!(d.Medal in tipo)) continue; // el CSV usa \"None\" cuando no hubo medalla\n unicas.set(`${d.Games}|${d.Event}|${d.NOC}|${d.Medal}`, d);\n }\n const porTemporada = {Summer: new Map(), Winter: new Map()};\n for (const d of unicas.values()) {\n const m = porTemporada[d.Season];\n if (!m.has(d.NOC)) m.set(d.NOC, {id: d.NOC, name: nombres[d.NOC] ?? d.Team, g: 0, s: 0, b: 0});\n m.get(d.NOC)[tipo[d.Medal]]++;\n }\n const lista = s => Array.from(porTemporada[s].values(), o => ({...o, t: o.g + o.s + o.b}));\n return {summer: lista(\"Summer\"), winter: lista(\"Winter\")};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"banderas = ({\n USA: \"us\", CHN: \"cn\", GBR: \"gb\", RUS: \"ru\", GER: \"de\", FRA: \"fr\", JPN: \"jp\", AUS: \"au\",\n ITA: \"it\", CAN: \"ca\", KOR: \"kr\", NED: \"nl\", NZL: \"nz\", KAZ: \"kz\", AZE: \"az\", ESP: \"es\",\n BRA: \"br\", HUN: \"hu\", UKR: \"ua\", CUB: \"cu\", IRI: \"ir\", BLR: \"by\", POL: \"pl\", SWE: \"se\",\n NOR: \"no\", AUT: \"at\", SUI: \"ch\", CZE: \"cz\", SLO: \"si\", FIN: \"fi\", JAM: \"jm\", RSA: \"za\",\n CRO: \"hr\", DEN: \"dk\", TUR: \"tr\", COL: \"co\", ARG: \"ar\", SRB: \"rs\", BEL: \"be\", UZB: \"uz\",\n THA: \"th\", GRE: \"gr\", MEX: \"mx\", KEN: \"ke\", ETH: \"et\", LAT: \"lv\", SVK: \"sk\", PER: \"pe\", ROU: \"ro\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"2"}} 42:null