31:T186d,chart = { await(data); await(dataAgg); await(countriesFixed); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const twitter = svg.append('a') .attr('href', 'https://twitter.com/JoshuaFeIdman') .attr('target', '_blank') .style('pointer-events', 'initial') twitter.append("image") .attr("xlink:href", twitterLogo) .attr("x", width * 0.82) .attr("y", height - 22) .attr("width", width*0.025) twitter.append("text") .attr('x', width * 0.85) .attr('y', height - 10) .attr('font-size', 14) .attr('text-anchor', 'start') .attr('fill', 'black') .style("font-family", "Lato, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'") .text('@JoshuaFeldman') const tooltipCircles = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("border-radius", "5px") .style("margin", "auto"); const tooltipBoxes = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("pointer-events", "none") .style("background", "white") .style("border-radius", "5px") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("padding", "8px") .style("line-height", "1.3") .style("font-size", "11px") .style("opacity", "0.9") .style("margin", "auto") .style("font-family", "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"); const gx = svg.append("g") .call(xAxis) .style("font-size", 12) .style("font-family", "Lato, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'") gx .append("text") .attr("x", x(28)) .attr("y", 40) .attr('font-size', 18) .attr('fill', 'black') .text("Age"); const gy = svg.append("g") .call(yAxis) .style("font-size", 12) .style("font-family", "Lato, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"); // MIN-MAX LINES const minMaxLines = svg.append("g") .selectAll("vertLines") .data(dataAgg) .join("line") .attr("x1", d => x(d.min)) .attr("x2", d => x(d.max)) .attr("y1", d => y(d.country) + y.bandwidth()/2) .attr("y2", d => y(d.country)+ y.bandwidth()/2) .attr("stroke", "grey") .style("stroke-width", 0.5); // BOXES const boxes = svg.append("g") .selectAll("boxes") .data(dataAgg) .join("rect") .attr("x", d => x(d.q1)) .attr("width", d => x(d.q3) - x(d.q1)) .attr("y", d => y(d.country)+ y.bandwidth()/3) .attr("height", y.bandwidth() /3 ) .attr("stroke", "none") .style("fill", d => color(d.country)) .style("opacity", 0.5) boxes .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "black"); tooltipBoxes.html("" + d.country + "" + "
Median age: " + d.median.toFixed(1)); tooltipBoxes.style("left", (x(d.median) - 40) + "px").style("top", (parseFloat(d3.select(this).attr("y")) + 75) + "px"); tooltipBoxes.style("visibility", "visible"); }) .on("mouseout", function(event, d){ d3.select(this).attr("stroke", "none"); return tooltipBoxes.style("visibility", "hidden"); }); // MEDIAN LINES const medLines = svg.append("g") .selectAll("medianLines") .data(dataAgg) .join("line") .attr("y1", d => y(d.country) + y.bandwidth() / 3) .attr("y2", d => y(d.country) + y.bandwidth() / 1.5) .attr("x1", d => x(d.median)) .attr("x2", d => x(d.median)) .attr("stroke", "black") .style("width", 100); let jitterWidth = 10; // CIRCLES const circles = svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.age)) .attr("cy", function(d){ return( y(d.team) + (y.bandwidth()/2) - jitterWidth/2 + Math.random()*jitterWidth )}) .attr("r", 4) .style("fill", d => color(d.team)) .style("opacity", 0.75); circles.on("mouseover", function(event, d) { d3.select(this).attr("stroke", "black"); return tooltipCircles.style("visibility", "visible"); }) .on("mousemove", function(event, d){ tooltipCircles.html("" + d.name + "" + "
Age: " + Math.floor(d.age) + "
Position: " + d.position + "
Country: " + d.team + "
Club: " + d.club); return tooltipCircles.style("left", (d3.select(this).attr("cx") + 20) + "px").style("top", (parseFloat(d3.select(this).attr("cy")) + 30) + "px"); }) .on("mouseout", function(event, d){ d3.select(this).attr("stroke", "none"); return tooltipCircles.style("visibility", "hidden"); }); return Object.assign(svg.node(), { update(order) { y.domain(dataAgg.sort(order).map(d => d.country)); const t = svg.transition() .duration(750); gy.transition(t) .call(yAxis) .selectAll(".tick") .delay((d, i) => i * 20); circles.data(data, d => d.name) // .order() .transition(t) .attr("cx", d => x(d.age)) .attr("cy", function(d){ return( y(d.team) + (y.bandwidth()/2) - jitterWidth/2 + Math.random()*jitterWidth )}); medLines.data(dataAgg, d => d.country).transition(t).attr("y1", d => y(d.country) + y.bandwidth() / 3) .attr("y2", d => y(d.country) + y.bandwidth() / 1.5) .attr("x1", d => x(d.median)) .attr("x2", d => x(d.median)); boxes.data(dataAgg, d => d.country).transition(t).attr("x", d => x(d.q1)) .attr("y", d => y(d.country)+ y.bandwidth()/3); minMaxLines.data(dataAgg, d => d.country).transition(t).attr("x1", d => x(d.min)) .attr("x2", d => x(d.max)) .attr("y1", d => y(d.country) + y.bandwidth()/2) .attr("y2", d => y(d.country)+ y.bandwidth()/2); } }) }32:[{"id":"ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","href":"https://static.observableusercontent.com/files/ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","name":"Twitter_Bird.svg (3).png","type":"image/png","lastModified":1623363398657.355,"size":42796}] 2f:{"title":"Euro 2020 squads by age","cells":[{"id":0,"value":"md`# Euro 2020 squads by age`","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"viewof order = {\n const options = [\n {label: \"Youngest to oldest\", value: (a, b) => b.median - a.median},\n {label: \"Oldest to youngest\", value: (a, b) => a.median - b.median},\n {label: \"Alphabetical order\", value: (a, b) => b.country.localeCompare(a.country)}\n ];\n const form = html`