2c:null 2d:["$","title",null,{"children":"Untitled | Luis Jofre | Observable"}] 32:T7e43,// OBSERVABLE NOTEBOOKS 2.0 · Pega TODO este archivo en UNA celda JavaScript. // Los datos están incluidos: no necesitas una celda anterior ni adjuntar archivos. // Para usar el CSV adjunto, reemplaza solamente la definición de copecTabDatos por: // const copecTabDatos = await FileAttachment("copec_pilares_2026.csv").csv({typed:true}); const copecTabDatos = [{"pilar":"Infraestructura","atributo":"Bien ubicadas","poblacion":"Total automovilistas","Copec":80,"Shell":34,"Aramco":28,"Ninguna":2,"orden_pilar":1,"orden_atributo":1,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Bien ubicadas","poblacion":"Habituales de cada marca","Copec":91,"Shell":78,"Aramco":72,"Ninguna":2,"orden_pilar":1,"orden_atributo":1,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Infraestructura","atributo":"Limpias y ordenadas","poblacion":"Total automovilistas","Copec":78,"Shell":37,"Aramco":36,"Ninguna":4,"orden_pilar":1,"orden_atributo":2,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Limpias y ordenadas","poblacion":"Habituales de cada marca","Copec":88,"Shell":81,"Aramco":69,"Ninguna":3,"orden_pilar":1,"orden_atributo":2,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Infraestructura","atributo":"Estaciones atractivas","poblacion":"Total automovilistas","Copec":76,"Shell":30,"Aramco":32,"Ninguna":4,"orden_pilar":1,"orden_atributo":3,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Estaciones atractivas","poblacion":"Habituales de cada marca","Copec":86,"Shell":73,"Aramco":59,"Ninguna":5,"orden_pilar":1,"orden_atributo":3,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Infraestructura","atributo":"Buenas tiendas de comida","poblacion":"Total automovilistas","Copec":76,"Shell":25,"Aramco":19,"Ninguna":6,"orden_pilar":1,"orden_atributo":4,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Buenas tiendas de comida","poblacion":"Habituales de cada marca","Copec":85,"Shell":51,"Aramco":48,"Ninguna":7,"orden_pilar":1,"orden_atributo":4,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Infraestructura","atributo":"Buen servicio de baño","poblacion":"Total automovilistas","Copec":72,"Shell":25,"Aramco":18,"Ninguna":7,"orden_pilar":1,"orden_atributo":5,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Buen servicio de baño","poblacion":"Habituales de cada marca","Copec":80,"Shell":47,"Aramco":48,"Ninguna":7,"orden_pilar":1,"orden_atributo":5,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Infraestructura","atributo":"Estaciones seguras","poblacion":"Total automovilistas","Copec":59,"Shell":27,"Aramco":24,"Ninguna":17,"orden_pilar":1,"orden_atributo":6,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Estaciones seguras","poblacion":"Habituales de cada marca","Copec":70,"Shell":64,"Aramco":59,"Ninguna":17,"orden_pilar":1,"orden_atributo":6,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Infraestructura","atributo":"Mejor autoservicio","poblacion":"Total automovilistas","Copec":72,"Shell":22,"Aramco":19,"Ninguna":5,"orden_pilar":1,"orden_atributo":7,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Infraestructura","atributo":"Mejor autoservicio","poblacion":"Habituales de cada marca","Copec":84,"Shell":56,"Aramco":48,"Ninguna":6,"orden_pilar":1,"orden_atributo":7,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Atención","atributo":"Estaciones bien iluminadas","poblacion":"Total automovilistas","Copec":80,"Shell":39,"Aramco":39,"Ninguna":3,"orden_pilar":2,"orden_atributo":8,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Atención","atributo":"Estaciones bien iluminadas","poblacion":"Habituales de cada marca","Copec":90,"Shell":83,"Aramco":72,"Ninguna":3,"orden_pilar":2,"orden_atributo":8,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Atención","atributo":"Atendedores amables","poblacion":"Total automovilistas","Copec":71,"Shell":42,"Aramco":34,"Ninguna":4,"orden_pilar":2,"orden_atributo":9,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Atención","atributo":"Atendedores amables","poblacion":"Habituales de cada marca","Copec":85,"Shell":88,"Aramco":82,"Ninguna":3,"orden_pilar":2,"orden_atributo":9,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Atención","atributo":"Tiempo de espera adecuado","poblacion":"Total automovilistas","Copec":66,"Shell":36,"Aramco":30,"Ninguna":7,"orden_pilar":2,"orden_atributo":10,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Atención","atributo":"Tiempo de espera adecuado","poblacion":"Habituales de cada marca","Copec":82,"Shell":82,"Aramco":76,"Ninguna":7,"orden_pilar":2,"orden_atributo":10,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Atendedores honrados","poblacion":"Total automovilistas","Copec":56,"Shell":32,"Aramco":28,"Ninguna":6,"orden_pilar":3,"orden_atributo":11,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Atendedores honrados","poblacion":"Habituales de cada marca","Copec":69,"Shell":74,"Aramco":68,"Ninguna":6,"orden_pilar":3,"orden_atributo":11,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Marca de prestigio","poblacion":"Total automovilistas","Copec":77,"Shell":43,"Aramco":22,"Ninguna":6,"orden_pilar":3,"orden_atributo":12,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Marca de prestigio","poblacion":"Habituales de cada marca","Copec":85,"Shell":63,"Aramco":79,"Ninguna":6,"orden_pilar":3,"orden_atributo":12,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Buenas promociones","poblacion":"Total automovilistas","Copec":70,"Shell":22,"Aramco":19,"Ninguna":10,"orden_pilar":3,"orden_atributo":13,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Buenas promociones","poblacion":"Habituales de cada marca","Copec":83,"Shell":67,"Aramco":50,"Ninguna":10,"orden_pilar":3,"orden_atributo":13,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Me da confianza","poblacion":"Total automovilistas","Copec":65,"Shell":36,"Aramco":24,"Ninguna":7,"orden_pilar":3,"orden_atributo":14,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Me da confianza","poblacion":"Habituales de cada marca","Copec":83,"Shell":79,"Aramco":79,"Ninguna":7,"orden_pilar":3,"orden_atributo":14,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Buenos descuentos","poblacion":"Total automovilistas","Copec":62,"Shell":22,"Aramco":21,"Ninguna":13,"orden_pilar":3,"orden_atributo":15,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Buenos descuentos","poblacion":"Habituales de cada marca","Copec":76,"Shell":71,"Aramco":55,"Ninguna":14,"orden_pilar":3,"orden_atributo":15,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Afecto y simpatía","poblacion":"Total automovilistas","Copec":58,"Shell":24,"Aramco":17,"Ninguna":16,"orden_pilar":3,"orden_atributo":16,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Afecto y simpatía","poblacion":"Habituales de cada marca","Copec":75,"Shell":65,"Aramco":63,"Ninguna":17,"orden_pilar":3,"orden_atributo":16,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Relevante para mi vida","poblacion":"Total automovilistas","Copec":51,"Shell":21,"Aramco":17,"Ninguna":21,"orden_pilar":3,"orden_atributo":17,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Relevante para mi vida","poblacion":"Habituales de cada marca","Copec":69,"Shell":66,"Aramco":59,"Ninguna":21,"orden_pilar":3,"orden_atributo":17,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Aprecio","atributo":"Aporta a la comunidad","poblacion":"Total automovilistas","Copec":50,"Shell":19,"Aramco":20,"Ninguna":12,"orden_pilar":3,"orden_atributo":18,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Aprecio","atributo":"Aporta a la comunidad","poblacion":"Habituales de cada marca","Copec":60,"Shell":52,"Aramco":39,"Ninguna":21,"orden_pilar":3,"orden_atributo":18,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Experiencia del cliente","atributo":"Cuida el medio ambiente","poblacion":"Total automovilistas","Copec":47,"Shell":19,"Aramco":22,"Ninguna":17,"orden_pilar":4,"orden_atributo":19,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Experiencia del cliente","atributo":"Cuida el medio ambiente","poblacion":"Habituales de cada marca","Copec":58,"Shell":51,"Aramco":38,"Ninguna":22,"orden_pilar":4,"orden_atributo":19,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Experiencia del cliente","atributo":"Sorprende y revitaliza","poblacion":"Total automovilistas","Copec":57,"Shell":22,"Aramco":19,"Ninguna":16,"orden_pilar":4,"orden_atributo":20,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Experiencia del cliente","atributo":"Sorprende y revitaliza","poblacion":"Habituales de cada marca","Copec":71,"Shell":67,"Aramco":51,"Ninguna":16,"orden_pilar":4,"orden_atributo":20,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Experiencia del cliente","atributo":"Se adapta y resuelve","poblacion":"Total automovilistas","Copec":64,"Shell":28,"Aramco":20,"Ninguna":10,"orden_pilar":4,"orden_atributo":21,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Experiencia del cliente","atributo":"Se adapta y resuelve","poblacion":"Habituales de cada marca","Copec":79,"Shell":75,"Aramco":68,"Ninguna":9,"orden_pilar":4,"orden_atributo":21,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Experiencia del cliente","atributo":"Experiencia cercana","poblacion":"Total automovilistas","Copec":62,"Shell":26,"Aramco":20,"Ninguna":12,"orden_pilar":4,"orden_atributo":22,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Experiencia del cliente","atributo":"Experiencia cercana","poblacion":"Habituales de cada marca","Copec":77,"Shell":74,"Aramco":63,"Ninguna":13,"orden_pilar":4,"orden_atributo":22,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Calidad Combustible","atributo":"Combustible rinde más","poblacion":"Total automovilistas","Copec":45,"Shell":32,"Aramco":23,"Ninguna":12,"orden_pilar":5,"orden_atributo":23,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Calidad Combustible","atributo":"Combustible rinde más","poblacion":"Habituales de cada marca","Copec":60,"Shell":75,"Aramco":69,"Ninguna":10,"orden_pilar":5,"orden_atributo":23,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"},{"pilar":"Calidad Combustible","atributo":"Combustible de buena calidad","poblacion":"Total automovilistas","Copec":62,"Shell":42,"Aramco":31,"Ninguna":5,"orden_pilar":5,"orden_atributo":24,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 6"},{"pilar":"Calidad Combustible","atributo":"Combustible de buena calidad","poblacion":"Habituales de cada marca","Copec":78,"Shell":81,"Aramco":81,"Ninguna":4,"orden_pilar":5,"orden_atributo":24,"periodo":"YTD 2026","fuente":"Activa - Nueva Imagen Copec 2026, lámina 7"}]; const copecTabRaiz = document.createElement("div"); const copecTabShadow = copecTabRaiz.attachShadow({mode:"open"}); copecTabShadow.innerHTML = `

Copec · Pilares de marca · YTD 2026

¿Dónde lideramos y dónde hay brechas?

Explora 24 atributos en cinco categorías. Selecciona un atributo en el dot plot o en el ranking: el detalle y la lectura se actualizan juntos.

01 · Asociación de atributos por marca

Escala común de 0 a 100%. Cada marca ocupa una línea dentro del atributo para que los números se puedan leer.

C = Copec · S = Shell · A = Aramco · N = Ninguna. Haz clic en una fila o usa Tab y Enter.

02 · Brecha competitiva de Copec

Copec − mayor valor entre Shell y Aramco, en puntos porcentuales. Incluye siempre ambas competidoras.

← Copec por debajo · 0 empate · Copec por encima →

03 · Detalle vinculado

Comparación de poblaciones para el atributo seleccionado.

Lectura para la reunión

Fuente: Activa, Nueva Imagen Copec 2026, láminas 6 (total) y 7 (habituales); transcripción de los gráficos proporcionados. Valores en porcentaje, YTD 2026. “Ninguna” conserva la serie de la fuente y se puede mostrar en el dot plot; no participa en las brechas competitivas.
En “Habituales de cada marca”, cada marca usa su propia base: Copec N=1.234; Shell N=368; Aramco N=204. La lámina informa EM ±2,6%, ±5,0% y ±6,8%, respectivamente. Total y habituales son poblaciones distintas y se solapan; su diferencia no representa evolución temporal. Las brechas son descriptivas y no implican significancia estadística.

`; (() => { "use strict"; const root=copecTabShadow; const el=id=>root.getElementById(id); const colors={Copec:"#00549f",Shell:"#F2B600",Aramco:"#159447",Ninguna:"#8B9199"}; const brands=Object.keys(colors), letters={Copec:"C",Shell:"S",Aramco:"A",Ninguna:"N"}; const populations=["Total automovilistas","Habituales de cada marca"]; const pillars=[...new Set(copecTabDatos.map(d=>d.pilar))]; const state={population:populations[1],pillar:"Infraestructura",query:"",sort:"gap",selected:"Bien ubicadas",hover:null,visible:new Set(brands.slice(0,3))}; const rows=copecTabDatos.map(d=>({...d,...Object.fromEntries(brands.map(b=>[b,+d[b]])),orden_atributo:+d.orden_atributo})); if(rows.length!==48 || rows.some(d=>brands.some(b=>!Number.isFinite(d[b])||d[b]<0||d[b]>100))) throw new Error("Revisa el dataset: se esperan 48 filas y porcentajes entre 0 y 100."); if(new Set(rows.map(d=>d.poblacion+"|"+d.atributo)).size!==48) throw new Error("Hay filas duplicadas en el dataset."); const norm=s=>s.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase(); const gap=d=>d.Copec-Math.max(d.Shell,d.Aramco); const pp=n=>(n>0?"+":"")+n+" pp"; const competitors=d=>["Shell","Aramco"].filter(b=>d[b]===Math.max(d.Shell,d.Aramco)).join(" y "); let current=[]; const categoryButtons=d3.select(el("categories")).selectAll("button").data(["Todas",...pillars]).join("button").attr("type","button").text(d=>d).on("click",(_,d)=>{state.pillar=d;render();}); const legend=d3.select(el("legend")).selectAll("label").data(brands).join("label"); legend.append("input").attr("type","checkbox").attr("aria-label",d=>"Mostrar "+d).property("checked",d=>state.visible.has(d)).on("change",(event,d)=>{event.target.checked?state.visible.add(d):state.visible.delete(d);renderDot();}); legend.append("span").attr("class","swatch").style("background",d=>colors[d]);legend.append("span").text(d=>d); const svgAt=(id,w,h,label,cls="")=>{const holder=el(id);holder.replaceChildren();return d3.select(holder).append("svg").attr("class","chart "+cls).attr("viewBox",`0 0 ${w} ${h}`).attr("role","img").attr("aria-label",label);}; function selectAttribute(name){state.selected=name;render();} function showTip(event,d){el("tip").textContent=`${d.atributo} · ${state.population} | Copec ${d.Copec}% · Shell ${d.Shell}% · Aramco ${d.Aramco}% · Ninguna ${d.Ninguna}% | Brecha ${pp(gap(d))}`;el("tip").hidden=false;moveTip(event);} function moveTip(event){const x=event.clientX??0,y=event.clientY??0;el("tip").style.left=Math.max(8,Math.min(x+12,window.innerWidth-285))+"px";el("tip").style.top=Math.max(8,Math.min(y+12,window.innerHeight-105))+"px";} function hover(name){state.hover=name;root.querySelectorAll(".row").forEach(n=>n.classList.toggle("is-hover",n.getAttribute("data-attribute")===name));} function bindRows(g){g.attr("class",d=>"row"+(d.atributo===state.selected?" is-selected":"")).attr("data-attribute",d=>d.atributo).attr("tabindex",0).attr("role","button").attr("aria-pressed",d=>String(d.atributo===state.selected)).attr("aria-label",d=>`${d.atributo}: Copec ${d.Copec}%, Shell ${d.Shell}%, Aramco ${d.Aramco}%. Seleccionar detalle.`).on("click",(_,d)=>selectAttribute(d.atributo)).on("keydown",(e,d)=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();selectAttribute(d.atributo);}}).on("pointerenter",(e,d)=>{hover(d.atributo);showTip(e,d);}).on("pointermove",moveTip).on("pointerleave",()=>{hover(null);el("tip").hidden=true;});} function renderDot(){ if(!current.length){el("dot-wrap").innerHTML='

No hay atributos para esta búsqueda.

';return;} const active=brands.filter(b=>state.visible.has(b)); if(!active.length){el("dot-wrap").innerHTML='

Activa al menos una marca en la leyenda.

';return;} const W=820,step=Math.max(53,active.length*18+16),H=current.length*step+58; const svg=svgAt("dot-wrap",W,H,"Dot plot: asociación por atributo y marca","chart-wide"); const x=d3.scaleLinear().domain([0,100]).range([260,W-40]); svg.append("g").attr("class","grid").attr("transform",`translate(0,${H-32})`).call(d3.axisBottom(x).ticks(5).tickSize(-(H-48)).tickFormat("")); svg.append("g").attr("class","axis").attr("transform",`translate(0,${H-32})`).call(d3.axisBottom(x).ticks(5).tickFormat(d=>d+"%")); const g=svg.selectAll("g.row").data(current).join("g").attr("transform",(_,i)=>`translate(0,${12+i*step})`);bindRows(g); g.append("rect").attr("class","band").attr("x",0).attr("y",0).attr("width",W).attr("height",step-3).attr("rx",7); g.append("text").attr("class","attr-label").attr("x",8).attr("y",step/2+3).text(d=>d.atributo); g.each(function(d){const row=d3.select(this);active.forEach((b,i)=>{const y=step/2+(i-(active.length-1)/2)*18; row.append("text").attr("class","brand-letter").attr("x",248).attr("y",y+3).attr("text-anchor","end").style("fill",b==="Shell"?"#8a6200":colors[b]).text(letters[b]); row.append("line").attr("x1",x(0)).attr("x2",x(100)).attr("y1",y).attr("y2",y).attr("stroke","#edf1f3"); row.append("circle").attr("class","dot").attr("cx",x(d[b])).attr("cy",y).attr("r",5).attr("fill",colors[b]); row.append("text").attr("class","value").attr("x",x(d[b])+(d[b]>94?-9:9)).attr("y",y+3).attr("text-anchor",d[b]>94?"end":"start").text(d[b]+"%"); });}); } function renderGaps(){ if(!current.length){el("gap-wrap").innerHTML='

No hay atributos para esta búsqueda.

';return;} const ranked=[...current];if(state.sort==="gap")ranked.sort((a,b)=>gap(a)-gap(b)||a.orden_atributo-b.orden_atributo);if(state.sort==="copec")ranked.sort((a,b)=>b.Copec-a.Copec||a.orden_atributo-b.orden_atributo); const W=530,step=35,H=ranked.length*step+52; const svg=svgAt("gap-wrap",W,H,"Ranking de brechas competitivas, en puntos porcentuales","chart-gap"); const x=d3.scaleLinear().domain([-60,60]).range([222,W-40]); svg.append("g").attr("class","axis").attr("transform",`translate(0,${H-28})`).call(d3.axisBottom(x).tickValues([-60,-30,0,30,60]).tickFormat(d=>d>0?"+"+d:d)); svg.append("line").attr("x1",x(0)).attr("x2",x(0)).attr("y1",5).attr("y2",H-28).attr("stroke","#8095a5"); const g=svg.selectAll("g.row").data(ranked).join("g").attr("transform",(_,i)=>`translate(0,${8+i*step})`);bindRows(g); g.append("rect").attr("class","band").attr("width",W).attr("height",step-3).attr("rx",5); g.append("text").attr("class","attr-label").attr("x",3).attr("y",21).text(d=>d.atributo); g.append("rect").attr("x",d=>Math.min(x(0),x(gap(d)))).attr("y",10).attr("width",d=>Math.max(1,Math.abs(x(gap(d))-x(0)))).attr("height",14).attr("rx",2).attr("fill",d=>gap(d)<0?"#b95a3e":gap(d)>0?colors.Copec:"#8595a1"); g.append("text").attr("class","value").attr("x",d=>x(gap(d))+(gap(d)<0?-5:5)).attr("text-anchor",d=>gap(d)<0?"end":"start").attr("y",21).text(d=>pp(gap(d))); } function renderDetail(){ const d=current.find(d=>d.atributo===state.selected); if(!d){el("detail-title").textContent="Selecciona un atributo";el("pillar-badge").textContent="";el("detail-wrap").replaceChildren();el("table-wrap").replaceChildren();el("analysis").textContent="Ajusta los filtros para volver a explorar los datos.";return;} el("detail-title").textContent=d.atributo;el("pillar-badge").textContent=d.pilar; const pair=populations.map(p=>rows.find(r=>r.atributo===d.atributo&&r.poblacion===p)); const W=530,H=215,x=d3.scaleLinear().domain([0,100]).range([96,W-36]); const svg=svgAt("detail-wrap",W,H,"Total y habituales de cada marca para "+d.atributo); svg.append("text").attr("x",96).attr("y",13).attr("fill","#5d7080").attr("font-size",10).text("Total: barra clara · Habituales propios: barra sólida"); brands.slice(0,3).forEach((b,i)=>{const y=33+i*48;svg.append("text").attr("x",0).attr("y",y+22).attr("font-size",12).attr("font-weight",700).text(b);pair.forEach((r,j)=>{ svg.append("rect").attr("x",x(0)).attr("y",y+j*19).attr("width",x(r[b])-x(0)).attr("height",13).attr("fill",colors[b]).attr("opacity",j===0?0.35:1).attr("rx",2); svg.append("text").attr("x",x(r[b])+5).attr("y",y+j*19+11).attr("fill","#173044").attr("font-size",11).text(r[b]+"%"); });}); svg.append("g").attr("class","axis").attr("transform","translate(0,190)").call(d3.axisBottom(x).ticks(5).tickFormat(d=>d+"%")); const table=document.createElement("table"),thead=document.createElement("thead"),header=document.createElement("tr");table.append(thead);thead.append(header);["Marca","Total","Habituales propios"].forEach(s=>{const th=document.createElement("th");th.scope="col";th.textContent=s;header.append(th);}); const tbody=document.createElement("tbody");table.append(tbody);brands.slice(0,3).forEach(b=>{const tr=document.createElement("tr");tbody.append(tr);[b,pair[0][b]+"%",pair[1][b]+"%"].forEach(v=>{const td=document.createElement("td");td.textContent=v;tr.append(td);});});el("table-wrap").replaceChildren(table); const delta=gap(d),leader=competitors(d),best=Math.max(d.Shell,d.Aramco); const conclusion=delta>0?`Copec supera en ${delta} pp a ${leader}, la competidora con mayor valor (${best}%).`:delta<0?`Copec queda ${Math.abs(delta)} pp por debajo de ${leader} (${best}%). Este atributo merece revisión dentro de la categoría.`:`Copec empata con ${leader} en ${d.Copec}%.`; el("analysis").textContent=`En ${state.population.toLowerCase()}, Copec registra ${d.Copec}%. ${conclusion} ${state.population===populations[1]?"La comparación usa los habituales propios de cada marca.":"La comparación corresponde al total de automovilistas."}`; } function render(){ const focused=root.activeElement; const restoreFocus=focused?.classList?.contains("row")?{name:focused.getAttribute("data-attribute"),view:focused.closest("svg").parentElement.id}:null; el("tip").hidden=true;state.hover=null; current=rows.filter(d=>d.poblacion===state.population&&(state.pillar==="Todas"||d.pilar===state.pillar)&&norm(d.atributo).includes(norm(state.query))).sort((a,b)=>a.orden_atributo-b.orden_atributo); if(!current.some(d=>d.atributo===state.selected))state.selected=current[0]?.atributo??null; categoryButtons.attr("aria-pressed",d=>String(d===state.pillar)); const kpis=[{n:current.length,label:"atributos en la vista"},{n:current.filter(d=>gap(d)>0).length,label:"Copec supera a ambas competidoras"},{n:current.filter(d=>gap(d)===0).length,label:"Copec empata con la mejor competidora"},{n:current.filter(d=>gap(d)<0).length,label:"Copec queda por debajo"}]; const cards=d3.select(el("kpis")).selectAll("div.kpi").data(kpis).join("div").attr("class","kpi");cards.selectAll("*").remove();cards.append("strong").text(d=>d.n);cards.append("span").text(d=>d.label); el("status").textContent=`${state.population} · ${state.pillar} · ${current.length} de 24 atributos${state.selected?" · Selección: "+state.selected:""}`; renderDot();renderGaps();renderDetail(); if(restoreFocus){const next=[...el(restoreFocus.view).querySelectorAll(".row")].find(n=>n.getAttribute("data-attribute")===restoreFocus.name);next?.focus();} } el("population").addEventListener("change",e=>{state.population=e.target.value;render();}); el("sort").addEventListener("change",e=>{state.sort=e.target.value;render();}); el("search").addEventListener("input",e=>{state.query=e.target.value;render();}); el("reset").addEventListener("click",()=>{Object.assign(state,{population:populations[1],pillar:"Infraestructura",query:"",sort:"gap",selected:"Bien ubicadas",visible:new Set(brands.slice(0,3))});el("population").value=state.population;el("sort").value=state.sort;el("search").value="";legend.select("input").property("checked",d=>state.visible.has(d));render();}); el("export").addEventListener("click",()=>{const csv=d3.csvFormat(current);const url=URL.createObjectURL(new Blob(["\ufeff",csv],{type:"text/csv;charset=utf-8"}));const a=document.createElement("a");a.href=url;a.download="copec_datos_visibles.csv";a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);}); render(); })(); display(copecTabRaiz); 33:[{"id":"6e03757d3f4b4d084f5f95641d025105c50a335f5765b1ca7113d5efe6e97bcb49b64e3c1acc981a31139d12c7f39d0e753fe45c94f0cc296cbfd794988d0d48","href":"https://static.observableusercontent.com/files/6e03757d3f4b4d084f5f95641d025105c50a335f5765b1ca7113d5efe6e97bcb49b64e3c1acc981a31139d12c7f39d0e753fe45c94f0cc296cbfd794988d0d48","name":"copec_pilares_2026.csv","type":"text/csv","lastModified":1791219557441,"size":6366}] 30:{"id":"420e77923d577e4b","slug":"pilaresmarca","title":"Untitled","thumbnail":"e1059a5d522df333e99d5a1b946e99a2a87555dbe98344d4010efbc087635bd7","access_level":"public","create_time":"$D2026-10-05T15:25:44.907Z","update_time":"$D2026-10-05T17:00:07.411Z","view_time":null,"first_public_time":"$D2026-10-05T17:03:40.796Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a0e039927996f57","login":"luis-jofre","name":"Luis Jofre","avatar_url":"https://avatars-next.observableusercontent.com/2665995baca4b9321896c44ab5c802ae459c1a6f558452bcbe67224c45c5a4d5","tier":"free_2026"},"version":50,"publish_version":50,"role":null,"authored":false,"authors":[{"type":"individual","id":"a373f856441e32ee","login":"luis-jofre","name":"Luis Jofre","avatar_url":"https://avatars-next.observableusercontent.com/2665995baca4b9321896c44ab5c802ae459c1a6f558452bcbe67224c45c5a4d5","tier":null}],"members":[{"type":"team","id":"7a0e039927996f57","login":"luis-jofre","name":"Luis Jofre","avatar_url":"https://avatars-next.observableusercontent.com/2665995baca4b9321896c44ab5c802ae459c1a6f558452bcbe67224c45c5a4d5","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Untitled","cells":[{"id":16,"value":"$32","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"