3e:null 3f:["$","title",null,{"children":"D3 Scatterplot mundial historico goles - colores partes partido | ec-coberturas | Observable"}] 45:T453,data = Object.assign( await d3.csv( "https://ecformato.bitbucket.io/_minuto-de-oro-avanzado_v2.csv", ({ parte_es, resultado_equipo, goles_jugador_en_mundial, todos_los_goles_seleccion, resultado_partido, rango_5min_oro: rango_5min_oro, goles_seleccion_por_año: goles_total_seleccion, gol_a_favor_de: pais, nom_partido_es: partido, minuto: tiempo_gol, year: year, gol_en_propia, gol_de_penalti, t_extra, minuto, jugador_limpio: jugador, fase_es: fase, fecha }) => ({ parte_es, resultado_equipo, goles_jugador_en_mundial: +goles_jugador_en_mundial, todos_los_goles_seleccion: +todos_los_goles_seleccion, resultado_partido, rango_5min_oro, pais, partido, year: +year, tiempo_gol: +tiempo_gol, gol_en_propia: +gol_en_propia, gol_de_penalti: +gol_de_penalti, t_extra: +t_extra, minuto: +minuto, jugador, fase, fecha, goles_total_seleccion: +goles_total_seleccion }) ), {} )46:Tff9,chart = { const svg = d3.select(DOM.svg(width, height)); // círculo penalti svg .append("g") .attr("opacity", 0.8) .selectAll("circle") .data(filteredSelecciones) .join("circle") .attr("opacity", function (d) { return d.gol_de_penalti == 0 ? 0 : 1; // penalti o no }) .attr("fill", "#333333") .attr("cx", (d) => x(d.tiempo_gol)) .attr("cy", (d) => y(d.year)) .attr("r", (d) => 2); // círculo jugador svg .append("g") .attr("stroke-width", 0.5) .attr("fill", "none") .attr("opacity", 0.6) .selectAll("circle") .data(filteredSelecciones) .join("circle") .attr("stroke", function (d) { // perdido, empatado o ganado if (d.tiempo_gol < 46) { return "#88B4B2"; } else if (d.tiempo_gol > 45 && d.tiempo_gol < 91) { return "#2F4847"; } else { return "#CB5B5D"; } }) .attr("cx", (d) => x(d.tiempo_gol)) .attr("cy", (d) => y(d.year)) .attr("r", (d) => d.goles_jugador_en_mundial * 3); // EJE X ARRIBA svg .append("g") .call(xAxis) .attr("class", "x-axis") .selectAll("text") .attr("y", 25); // EJE X ABAJO svg .append("g") .call(xAxis2) .attr("class", "x-axis") .selectAll("text") .attr("y", height - 60); // EJE Y svg.append("g").call(yAxis).attr("class", "y-axis"); // TITULOS PARTES arriba svg .append("text") .attr("class", "label_x") .attr("text-anchor", "end") .attr("y", 10) .attr("x", width / 4) .text("1ª PARTE"); svg .append("text") .attr("class", "label_x") .attr("text-anchor", "end") .attr("y", 10) .attr("x", width / 1.67) .text("2ª PARTE"); svg .append("text") .attr("class", "label_x") .attr("text-anchor", "end") .attr("y", 10) .attr("x", width / ejeX_responsive_prorroga()) .text("PRÓRROGA"); // TITULOS PARTES abajo svg .append("text") .attr("class", "label_x") .attr("text-anchor", "end") .attr("y", height - 15) .attr("x", width / 4) .text("1ª PARTE"); svg .append("text") .attr("class", "label_x") .attr("text-anchor", "end") .attr("y", height - 15) .attr("x", width / 1.67) .text("2ª PARTE"); svg .append("text") .attr("class", "label_x") .attr("text-anchor", "end") .attr("y", height - 15) .attr("x", width / ejeX_responsive_prorroga()) .text("PRÓRROGA"); svg .selectAll("g.tick") .filter(function (d) { return d == 45 || d == 90; }) //only ticks that returned true for the filter will be included //in the rest of the method calls: .select("line") //grab the tick line .attr("class", "x-axis") //style with a custom class and CSS .style("stroke-opacity", 0.5); //or style directly with attributes or inline styles // círculo gol svg .append("g") .attr("opacity", 0.6) .attr("class", "circulo_gol") .selectAll("circle") .data(filteredSelecciones) .join("circle") .attr("fill", function (d) { // perdido, empatado o ganado if (d.tiempo_gol < 46) { return "#88B4B2"; } else if (d.tiempo_gol > 45 && d.tiempo_gol < 91) { return "#2F4847"; } else { return "#CB5B5D"; } }) .attr("cx", (d) => x(d.tiempo_gol)) .attr("cy", (d) => y(d.year)) .attr("r", (d) => 4) .on("mouseover", (d, i) => { svg .append("g") .attr("class", "tooltip") .attr("transform", `translate(${x(d.tiempo_gol)},${y(d.year)})`) .call( popover, `${d.partido} | ${d.resultado_partido} ${d.fase} | ${d.fecha} – Gol de ${d.jugador} en el minuto ${d.tiempo_gol} ${d.gol_de_penalti == 0 ? "" : "(Penalti)"}${ d.gol_en_propia == 0 ? "" : "(Gol en propia del contrario)" } ${ d.goles_jugador_en_mundial > 3 ? d.goles_jugador_en_mundial + " goles marcados " : "" } ` ); }) .on("mouseout", () => svg.selectAll(".tooltip").call(popover, null)); return svg.node(); }47:T421,popover = (g, value) => { if (!value) return g.style("display", "none"); // tooltip group g.style("display", null) .style("pointer-events", "none") .style("font", "13px sans-serif"); // tooltip container stroke const path = g .selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", "#333333"); // tooltip content const text = g .selectAll("text") .data([null]) .join("text") .call((text) => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .style("text-align", "center") .style("font-weight", (_, i) => (i ? 0 : "bold")) .text((d) => d) ); // tooltip positioning const { x, y, width: w, height: h } = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); // tooltip container path path.attr( "d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); }48:Tbe2,style = html``49:[{"id":"84d4ad182fbf8a8f07d9d1f231bf813585f2019b3cda7dcea290161cffd893ea91f27c5043ec0b05be069c3496e9e908fd7060280131069dcf76f6227f74805a","href":"https://static.observableusercontent.com/files/84d4ad182fbf8a8f07d9d1f231bf813585f2019b3cda7dcea290161cffd893ea91f27c5043ec0b05be069c3496e9e908fd7060280131069dcf76f6227f74805a","name":"_minuto-de-oro-avanzado_v2.csv","type":"text/csv","lastModified":1668884542042.069,"size":399085},{"id":"d1743e3ab8dd8d13664d19cafb99450baeae799009e9903faa6e4a4bbcb9545586eea84c24d1def261346d554d7dcfae189e761a01bfd5e3b14ef511f2b73dc4","href":"https://static.observableusercontent.com/files/d1743e3ab8dd8d13664d19cafb99450baeae799009e9903faa6e4a4bbcb9545586eea84c24d1def261346d554d7dcfae189e761a01bfd5e3b14ef511f2b73dc4","name":"pelota.svg","type":"image/svg+xml","lastModified":1668884542042.069,"size":40940},{"id":"e2a403a6201b73b49e9e4597fb2324523a91c94ecd9d27d10e376039dff01be2f7be532d0bb716c62c4b598774d6f135c9f272ab6e0077360cedb23d334d4dcc","href":"https://static.observableusercontent.com/files/e2a403a6201b73b49e9e4597fb2324523a91c94ecd9d27d10e376039dff01be2f7be532d0bb716c62c4b598774d6f135c9f272ab6e0077360cedb23d334d4dcc","name":"reloj.svg","type":"image/svg+xml","lastModified":1668884542042.069,"size":265},{"id":"438775e5f8caf739fda82eb80cf09524ce77a26b4c960b865aa9018543b658d8eb1f750bb9398f1e05eee69e885ad3749f0246f648204883e90cfd80772f12cd","href":"https://static.observableusercontent.com/files/438775e5f8caf739fda82eb80cf09524ce77a26b4c960b865aa9018543b658d8eb1f750bb9398f1e05eee69e885ad3749f0246f648204883e90cfd80772f12cd","name":"bolitas.svg","type":"image/svg+xml","lastModified":1668884542042.069,"size":256},{"id":"fedc0090534cb5c0ebaeeb4c7db02fa2f02c8a043f935799f1368d263a40f7f4e4ffcacc63c0afbb46b8815fc6cbcb0bfee2cdf39fb4f170312316c8896e8c74","href":"https://static.observableusercontent.com/files/fedc0090534cb5c0ebaeeb4c7db02fa2f02c8a043f935799f1368d263a40f7f4e4ffcacc63c0afbb46b8815fc6cbcb0bfee2cdf39fb4f170312316c8896e8c74","name":"bolitas@1.svg","type":"image/svg+xml","lastModified":1668885626975.337,"size":279}] 43:{"id":"7be1bee95db5ec22","slug":null,"title":"D3 Scatterplot mundial historico goles - colores partes partido","thumbnail":"5b3734a7f0753d54d5c4ade44f919637577f525c3a39975e9a0ff673e3861b82","access_level":"public","create_time":"$D2022-11-19T19:02:22.042Z","update_time":"$D2023-01-27T20:56:02.348Z","view_time":null,"first_public_time":"$D2022-11-19T19:02:22.042Z","has_unpublished_edits":null,"fork":{"id":"01e014441ad32905","slug":null,"title":"D3 Scatterplot mundial historico goles - colores partido ganado perdido o empatado","owner":{"id":"4ea7c7630133d6c7","login":"ec-coberturas","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","bio":"","following":false},"version":1442,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"role":"editor"},{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Scatterplot mundial historico goles - colores partes partido","cells":[{"id":1,"value":"md`# D3 Scatterplot mundial historico goles - colores partes partido\n\nHistórico goles por minuto de las selecciones`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"minutoDeOroAvanzado = await FileAttachment(\"_minuto-de-oro-avanzado_v2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"minutoDeOroAvanzado","database":"$undefined"},{"id":346,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"selecciones = _.uniqBy(data.map((d) => d[\"pais\"]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"filteredSelecciones = data.filter((d) => d.pais == selectorSelecciones)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"pelota = FileAttachment(\"pelota.svg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"reloj = FileAttachment(\"reloj.svg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"bolitas1 = FileAttachment(\"bolitas@1.svg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"

Histórico de goles marcados por selección

Seleccione un equipo para ver todos sus goles de la historia, sus minutos de oro (minutos en los que ha marcado más) y total de goles marcados en todos los mundiales.

Los minutos de oro de ${selectorSelecciones}, han sido entre los minutos ${filteredSelecciones[0].rango_5min_oro}

Total de goles marcados: ${filteredSelecciones[0].todos_los_goles_seleccion}

Gol marcado en la 1ª parte 2ª parte Prórroga

Goles totales del jugador que marca

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"leyenda","database":"$undefined"},{"id":10,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"

Se han excluido los años en los que no se disputaron Mundiales. Los goles durante el tiempo extra se muestran en el minuto 45 y 90.

Fuente: The Fjelstul World Cup Database v.1.0 | El Confidencial

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"fuente","database":"$undefined"},{"id":39,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"margin = ({ top: 80, right: 20, bottom: 100, left: 30 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"x = d3\n .scaleLinear()\n .domain([0, 120])\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"y = d3\n .scaleLinear()\n .domain([1930, 2018])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"years_eje = [\n \"1930\",\n \"1934\",\n \"1938\",\n \"1950\",\n \"1954\",\n \"1958\",\n \"1962\",\n \"1966\",\n \"1970\",\n \"1974\",\n \"1978\",\n \"1982\",\n \"1986\",\n \"1990\",\n \"1994\",\n \"1998\",\n \"2002\",\n \"2006\",\n \"2010\",\n \"2014\",\n \"2018\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"ejex_values_esc = [\n 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,\n 100, 105, 110, 115, 120\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"ejex_values_mov = [0, 20, 45, 70, 90, 105, 120]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"prorroga = 1.1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"function ejeX_responsive_prorroga() {\n if (window.screen.width < 700) {\n return prorroga - 0.1;\n } else {\n return prorroga;\n }\n return prorroga;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"function ejeX_responsive_values() {\n if (window.screen.width < 700) {\n return ejex_values_mov;\n } else {\n return ejex_values_esc;\n }\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"function ejeX_responsive() {\n if (window.screen.width < 700) {\n return 5;\n } else {\n return 30;\n }\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"ejeX_responsive()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"xAxis = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0,10)`)\n .call(\n d3\n .axisTop(x)\n .scale(x)\n .tickSize(-height + margin.bottom)\n .ticks(ejeX_responsive())\n .tickValues(ejeX_responsive_values())\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"xAxis2 = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0,10)`)\n .call(\n d3\n .axisBottom(x)\n .scale(x)\n .tickSize(0)\n .ticks(ejeX_responsive())\n .tickValues(ejeX_responsive_values())\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"yAxis = (g) =>\n g\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\", `translate(30,0)`)\n .call(\n d3\n .axisLeft(y)\n .scale(y)\n .ticks(25)\n .tickSize(-width)\n .tickPadding(5)\n .tickValues(years_eje)\n .tickFormat((d) => d.toString())\n )\n .call((g) =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 10)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"