3e:null 3f:["$","title",null,{"children":"D3 Scatterplot mundial historico goles - colores partido ganado.. voronoi | ec-coberturas | Observable"}] 45:T432,data = Object.assign( await d3.csv( "https://ecformato.bitbucket.io/minuto-de-oro-avanzado_v3.csv", ({ 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 }) => ({ 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:T1516,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("visibility", function (d) { return d.gol_de_penalti == 0 ? "hidden" : "visible"; // 0 no penalti o 1 sí }) .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.7) .selectAll("circle") .data(filteredSelecciones) .join("circle") .attr("stroke", function (d) { // perdido, empatado o ganado if (d.resultado_equipo == "perdido") { return "#EA5458"; } else if (d.resultado_equipo == "empatado") { return "#C2C2C2"; } else { return "#8DD881"; } }) .attr("cx", (d) => x(d.tiempo_gol)) .attr("cy", (d) => y(d.year)) .attr("r", (d) => d.goles_jugador_en_mundial * 4); // 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.9) .attr("class", "circulo_gol") .selectAll("circle") .data(filteredSelecciones) .join("circle") .attr("fill", function (d) { // perdido, empatado o ganado if (d.resultado_equipo == "perdido") { return "#EA5458"; } else if (d.resultado_equipo == "empatado") { return "#C2C2C2"; } else { return "#8DD881"; } }) .attr("cx", (d) => x(d.tiempo_gol)) .attr("cy", (d) => y(d.year)) .attr("r", (d) => 4.2); const voronoi = d3.Delaunay.from( filteredSelecciones, (d) => x(d.tiempo_gol), (d) => y(d.year) ).voronoi([ margin.left, margin.top, width - margin.right, height - margin.bottom ]); // ensures voronoi is limited to the chart area svg .append("g") .attr("class", "voronoiWrapper") .selectAll("path") .data(filteredSelecciones) .join("path") //.attr("opacity", 0.5) //.attr("stroke", "#ff1493") // Hide overlay .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d, i) => voronoi.renderCell(i)) .on("mouseover", (d, i) => { if (d.year > 0) { // You have to get the active id to highligth the right bar var id = filteredSelecciones[i].tiempo_gol; var id2 = filteredSelecciones[i].year; // Then you select every bars (with the common class) // to update opacities. svg.selectAll("circle").style("opacity", function (d) { return d.tiempo_gol == id && d.year == id2 ? 1 : 0.3; }); 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.t_extra == 0 ? "" : "+" + d.t_extra} ${ d.gol_de_penalti == 0 ? "" : "(Penalti)" }${d.gol_en_propia == 0 ? "" : "(Gol en propia)"} ${ d.goles_jugador_en_mundial > 3 ? d.goles_jugador_en_mundial + " goles marcados en el Mundial" : "" } `, d.tiempo_gol ); } }) .on("mouseout", function (d, i) { // To restore the initial states, select every bars and // set the opcitiy to 1 svg.selectAll("circle").style("opacity", 1); svg.selectAll(".tooltip").remove(); }); return svg.node(); }47:T690,popover = (g, value, data) => { if (!value) return g.style("display", "none"); // tooltip group g.style("display", null) .style("pointer-events", "none") .style("font", "12px sans-serif") .style("fill", "#333"); // tooltip container stroke const rect = g .selectAll("rect") .data([null]) .join("rect") .attr("fill", "white") .attr("stroke", "#333333") .attr("opacity", 0.9); // 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.2}em`) .style("text-align", "center") .style("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d) ); // tooltip positioning const { x, y, width: w, height: h } = text.node().getBBox(); if (data < 45) { text.attr("transform", `translate(${-w / 2 + 115},${y - 10})`); } else if (data > 80) { text.attr("transform", `translate(${-w / 2 - 110},${y - 10})`); } else { text.attr("transform", `translate(${-w / 2 + 10},${y + 50})`); } // tooltip container path if (data < 45) { rect .attr("width", w + 20) .attr("height", h + 20) .attr("transform", `translate(${-w / 2 + 105},${y - 30})`); } else if (data > 80) { rect .attr("width", w + 20) .attr("height", h + 20) .attr("transform", `translate(${-w / 2 - 120},${y - 30})`); } else { rect .attr("width", w + 20) .attr("height", h + 20) .attr("transform", `translate(${-w / 2},${y + 30})`); } }48:Tc61,style = html``49:[{"id":"d1743e3ab8dd8d13664d19cafb99450baeae799009e9903faa6e4a4bbcb9545586eea84c24d1def261346d554d7dcfae189e761a01bfd5e3b14ef511f2b73dc4","href":"https://static.observableusercontent.com/files/d1743e3ab8dd8d13664d19cafb99450baeae799009e9903faa6e4a4bbcb9545586eea84c24d1def261346d554d7dcfae189e761a01bfd5e3b14ef511f2b73dc4","name":"pelota.svg","type":"image/svg+xml","lastModified":1668892812674.369,"size":40940},{"id":"e2a403a6201b73b49e9e4597fb2324523a91c94ecd9d27d10e376039dff01be2f7be532d0bb716c62c4b598774d6f135c9f272ab6e0077360cedb23d334d4dcc","href":"https://static.observableusercontent.com/files/e2a403a6201b73b49e9e4597fb2324523a91c94ecd9d27d10e376039dff01be2f7be532d0bb716c62c4b598774d6f135c9f272ab6e0077360cedb23d334d4dcc","name":"reloj.svg","type":"image/svg+xml","lastModified":1668892812674.369,"size":265},{"id":"438775e5f8caf739fda82eb80cf09524ce77a26b4c960b865aa9018543b658d8eb1f750bb9398f1e05eee69e885ad3749f0246f648204883e90cfd80772f12cd","href":"https://static.observableusercontent.com/files/438775e5f8caf739fda82eb80cf09524ce77a26b4c960b865aa9018543b658d8eb1f750bb9398f1e05eee69e885ad3749f0246f648204883e90cfd80772f12cd","name":"bolitas.svg","type":"image/svg+xml","lastModified":1668892812674.369,"size":256},{"id":"2f3d4812ac28bda2961dcad23fd0ba61738f8a7760d228d8a3f9aa9f153a32a6eca85fb53ab665497080c44e8e2558fe4f7ecc3b084419869a50cc61983cb87a","href":"https://static.observableusercontent.com/files/2f3d4812ac28bda2961dcad23fd0ba61738f8a7760d228d8a3f9aa9f153a32a6eca85fb53ab665497080c44e8e2558fe4f7ecc3b084419869a50cc61983cb87a","name":"minuto-de-oro-avanzado_v3@2.csv","type":"text/csv","lastModified":1668909057359.091,"size":392582}] 43:{"id":"73cd61d19b3e1253","slug":null,"title":"D3 Scatterplot mundial historico goles - colores partido ganado.. voronoi","thumbnail":"de759c9caa19c1f32161734aa1e1e68f786223f3dc6899e92c122d8f70f9b124","access_level":"public","create_time":"$D2022-11-19T21:20:12.674Z","update_time":"$D2023-01-05T18:51:08.270Z","view_time":null,"first_public_time":"$D2022-11-19T21:20:12.674Z","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":1722,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Scatterplot mundial historico goles - colores partido ganado.. voronoi","cells":[{"id":1,"value":"md`# D3 Scatterplot mundial historico goles - colores partido ganado.. voronoi\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_v3@2.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":false,"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":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}

Gana partido Empata Pierde Penalti

Goles totales del jugador que marca

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":1454,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 1000","pinned":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"ejeX_responsive()","pinned":false,"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":false,"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":false,"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":false,"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":912,"value":"reloj = FileAttachment(\"reloj.svg\").url()","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"bolitas = FileAttachment(\"bolitas.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"magenta\");\n}","pinned":false,"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\", \"d3-delaunay@5\")","pinned":false,"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":false,"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"