30:T4fb,animationGraph = { const panel = d3.create("div").classed("panel", true); const basedData = mock_data("Hello!","Continents", [1,1,1,1,3]); const segment = panel .append("div.segment") .classed("segment", true); const segmentTitle = segment .append("div") .classed("title-container", true) .append("div") .classed("title", true) .text("Intro"); const segmentContent = segment.append("div").classed("content", true); const contentBox = segmentContent .append("div.box") .classed("box", true) .call(drawBaseRings); const contentTitle = contentBox .append("div") .classed("box-title", true) .text("Hello!"); const commentBox = segmentContent .append("div") .classed("commentary-box", true) .append("div") .style("white-space", "break-spaces") .text("") function updateKeyframe(frame) { const {title, subtitle, rings, description, duration, mock} = frame; contentBox .selectAll("circle") .data(d => mock ? translateMockListintoRings(rings) : rings) .call(animateRingsd3); segmentTitle .text(title); contentTitle .text(subtitle) commentBox .text(description) } return Object.assign(panel.node(), {updateKeyframe}); }31:T15df,dynamicGraph = { const panel = d3.create("div").classed("main-panel", true); const titlePanel = panel.append("div").classed("panel title-panel", true) const contentPanel = panel.append("div").classed("panel content-panel", true); return Object.assign(panel.node(), { update(selection_data, selection_sorted_sports) { const animateEntry = node => node .style("opacity", 0) .transition() // .delay(1000) .duration(1000) .style("opacity", 1); const titleSegment = titlePanel .selectAll("div.title-segment") .data(selection_data, (d,i) => d[0]); titleSegment.join( // Creating new segments (lines) enter => enter .append("div") .classed("title-segment", true) .classed("segment", true) .call( node => node .append("div") .classed("title-container", true) .call( node => node .append("div") .classed("title", true) ) .call( node => node .append("div") .classed("subtitle", true) ) ) .call( node => node .append("div") .classed("content", true) .append("div") .classed("box", true) .call(drawBaseRings) .append("div") .classed("box-title", true) .text("Selected Sports") ) .call(animateEntry), update => update .call(animateEntry), exit => exit .call( node => node .remove() ) ) // Now updating the lines .call( segmentNode => segmentNode .select("div.title-container") .select("div.title") .text(d => d[0]) ) .call( segmentNode => segmentNode .select("div.subtitle") // Data processing to add continent color to city name .datum(d => ({...d, HostCity: [...d[1].values(0)][0][0].City, HostContinent: "ble"})) .datum(d => ({...d, HostContinent: HostContinentRef[d.HostCity]})) .text(d => d.HostCity) .style("color", d => ringsBase.find(f => f.dataKey == d.HostContinent).color) ) .call( segmentNode => segmentNode .select("div.box") .datum((d) => addCombinedLineTotalRings(d[1])[0]) .call( box => box .selectAll("circle") .data(translateListofAthletesintoRings) .call(animateRingsd3,{delay:1000}) ) .call( box => box .select("div.box-title") .text(d => d[0]) ) ) const uniqueSports = selection_sorted_sports.map(d => d.Sport) const ContentSegment = contentPanel .selectAll("div.content-segment") .data(selection_data, d => d[0]) .join( // Creating new segments (lines) enter => enter .append("div") .classed("content-segment", true) .classed("segment", true) .call(contentSegment => contentSegment .append("div") .classed("content", true) ) .call(animateEntry), update => update .call(animateEntry), exit => exit // .transition() // .duration(1000) // .style("opacity", 0) .remove() ) .select("div.content") // Creating baseline modalities based on sports from all years selected .selectAll("div.box") // Forcing data to be bound to each sport in whole selection, but keeping line data's or 'undefined' .data(d => selection_sorted_sports.map(({Sport}) => [Sport, d[1].get(Sport)]), d => d[0]) .join( enter => enter .append("div") .classed("box", true) .call(drawBaseRings) .call( contentBox => contentBox .append("div") .classed("box-title", true) .text(d => d[0]) ) .call( contentBox => contentBox .transition() .duration(1000) .style("opacity", 0.2) ), update => update, exit => exit .remove() ) .each( function checkIfSportHasData(data) { if (typeof data[1] == 'undefined') { return; } return d3.select(this) .call( contentBox => contentBox .transition() .duration(1500) .style("opacity", 1) ) .call( contentBox => contentBox .selectAll("circle") .data(d => d[1] ? translateListofAthletesintoRings(d) : false) .call((node) => node.datum() && animateRingsd3(node,{delay:1000})) ) .call( contentBox => contentBox .select("div.box-title") .text(d => d[0]) ) }) } }) }32:Te65,viewof selection = { // Specify the chart’s dimensions. const height = 1200; const marginTop = 60; const marginRight = 30; const marginBottom = 30; const marginLeft = 130; const paddingTop = 15; const paddingLeft = 15; // Create the horizontal (x) scale const uniqueYears = [...new Set(brush_raw_data.map(d => d.Year))]; const x = d3.scaleLinear() .domain(d3.extent(uniqueYears).reverse()) .range([marginLeft, width - marginRight]); // Create the vertical (y) scale const uniqueSports = [...new Set(brush_raw_data.map(d => d.Sport))]; const y = d3.scalePoint() .domain(uniqueSports.reverse()) .range([height - marginBottom, marginTop]) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []) // .style("font-family", `"Segoe UI", Tahoma, Geneva, Verdana, sans-serif`); function addGridLines(g, length, orientation) { return g .selectAll("g.tick") .append("line") .attr("stroke","currentColor") .attr(`${orientation}2`, length) .attr("opacity",0.5) .attr("stroke-dasharray", "1,4") } // Append the axes. svg.append("g") .attr("transform", `translate(0,${marginTop - paddingTop})`) .call(d3.axisTop(x) .tickValues(uniqueYears) .tickFormat(d3.format(".0f")) // .tickSize(-height) ) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", 0) .attr("y", -(marginTop - paddingTop)) .attr("y", -(17+paddingTop)) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "middle") .attr("line-anchor", "top") .text("Year")) .call(g => g .selectAll("g.tick text") .attr("transform", `rotate(-45)`) // Rotate by -45 degrees .style("text-anchor", "start") // Align the text at the end .attr("dx", "0.8em") // Adjust horizontal position .attr("dy", "0.5em") // Adjust vertical position ) .call(addGridLines, height - 65, "y") svg.append("g") .attr("transform", `translate(${marginLeft - paddingLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", -(marginLeft - paddingLeft) + 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Sport")) .call(addGridLines, width - 130, "x"); // Append the dots. const dot = svg.append("g") // .attr("fill", "none") // .attr("stroke", "steelblue") .attr("fill", "steelblue") .attr("stroke-width", 2) .selectAll("circle") .data(brush_raw_data) .join("circle") .attr("transform", d => `translate(${x(d["Year"])},${y(d["Sport"])})`) .attr("r", 3); // Create the brush behavior. svg.call(d3.brush().on("start brush end", ({selection}) => { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("fill", "gray") .filter(d => x0 <= x(d["Year"]) && x(d["Year"]) < x1 && y0 <= y(d["Sport"]) && y(d["Sport"]) < y1) .style("fill", "steelblue") .data(); } else { dot.style("fill", "steelblue"); } // Inform downstream cells that the selection has changed. svg.property("value", value).dispatch("input"); })); // debugger; return svg.node(); }33:Ta5d,34:T43e,ringsBase = { const { r, stroke, distUnit } = ringsBaseDefinitions; // Center of black circle reference const centerX = boxwidth / 2; const centerY = boxheight / 2 - r / 2; return [ { // Blue x: centerX - distUnit * 2, y: centerY, color: "#0093D0", class: "continent-americas", dataKey: "Americas", stroke }, { // Black x: centerX + distUnit * 0, y: centerY, color: "#000000", class: "continent-europe", dataKey: "Europe", stroke }, { // Red x: centerX + distUnit * 2, y: centerY, color: "#FF0000", class: "continent-asia", dataKey: "Asia", stroke }, { // Yellow x: centerX - distUnit * 1, y: centerY + r * 1, color: "#FFBE46", class: "continent-africa", dataKey: "Africa", stroke }, { // Green x: centerX + distUnit * 1, y: centerY + r * 1, color: "#00B165", class: "continent-oceania", dataKey: "Oceania", stroke } ]; }35:Tf29,country_continent = ({ Africa: [ "LES", "GAM", "RHO", "MTN", "LIB", "DZA", "AGO", "BEN", "BWA", "BFA", "BDI", "CPV", "CMR", "CAF", "TCD", "COM", "COD", "COG", "DJI", "EGY", "GNQ", "ERI", "SWZ", "ETH", "GAB", "GMB", "GHA", "GIN", "GNB", "CIV", "KEN", "LSO", "LBR", "LBY", "MDG", "MWI", "MLI", "MRT", "MUS", "MAR", "MOZ", "NAM", "NER", "NGA", "RWA", "STP", "SEN", "SYC", "SLE", "SOM", "ZAF", "SSD", "SDN", "TZA", "TGO", "UGA", "ZMB", "ZWE", "CHA", "SUD", "NGR", "ALG", "RSA", "TAN", "TUN", "LBA", "CGO", "NIG", "ANG", "SEY", "TOG", "GUI", "BOT", "SAA", "ZIM", "MAW", "ZAM" ], Asia: [ "EUN", // This is russia the after USRR. Asia or Europe? I don't know. Big importance in 1992 "MYA", "HKG", "YMD", "BAN", "PLE", "UAR", "AFG", "ARM", "AZE", "BHR", "BGD", "BTN", "BRN", "KHM", "CHN", "CYP", "GEO", "IND", "IDN", "IRN", "IRQ", "ISR", "JPN", "JOR", "KAZ", "KWT", "KGZ", "LAO", "LBN", "MYS", "MDV", "MNG", "MMR", "NPL", "PRK", "OMN", "PAK", "PHL", "QAT", "SAU", "SGP", "KOR", "LKA", "SYR", "TWN", "TJK", "THA", "TLS", "TUR", "TKM", "ARE", "UZB", "VNM", "YEM", "IRI", "KUW", "MAS", "KSA", "UAE", "YAR", "INA", "PHI", "BRU", "NBO", "OMA", "TPE", "VIE", "BHU", "UNK", "ROC", "EOR" ], Europe: [ "BOH", "TCH", "BUL", "DEN", "NED", "ALB", "AND", "ARM", "AUT", "AZE", "BLR", "BEL", "BIH", "BGR", "HRV", "CYP", "CZE", "DNK", "EST", "FIN", "FRA", "GEO", "DEU", "GRC", "HUN", "ISL", "IRL", "ITA", "KAZ", "XKX", "LVA", "LIE", "LTU", "LUX", "MLT", "MDA", "MCO", "MNE", "NLD", "MKD", "NOR", "POL", "PRT", "ROU", "RUS", "SMR", "SRB", "SVK", "SVN", "ESP", "SWE", "CHE", "TUR", "UKR", "GBR", "VAT", "GRE", "URS", "GER", "SUI", "GDR", "MON", "SLO", "POR", "PAR", "FRG", "CRO", "HAI", "LAT", "YUG", "ANT", "KOS" ], NorthAmerica: [ "GRN", "CRC", "ATG", "BHS", "BRB", "BLZ", "CAN", "CRI", "CUB", "DMA", "DOM", "SLV", "GRD", "GTM", "HTI", "HND", "JAM", "MEX", "NIC", "PAN", "KNA", "LCA", "VCT", "TTO", "USA", "NCA", "JAM", "BER", "ANZ", "ESA", "PUR", "HON", "MRI", "SKN", "VIN", "GUA", "HAI", "LAT", "IVB", "ISV", "MAD", "MAL", "GUM", "CAY", "BAR", "GBS", "BOT", "ROT", "CAM", "SOL", "CRT", "GEQ", "SAM", "CRO", "BIZ", "SCG", "IOA", "BAH", "GUA", "NFL", "BER", "GUM" ], SouthAmerica: [ "CHI", "ARG", "BOL", "BRA", "CHL", "COL", "ECU", "GUY", "PRY", "PER", "SUR", "URY", "VEN", "URU", "PAR", "AHO", "SAA", "HAI", "VAN", "BOT", "GUI" ], Oceania: [ "AUS", "FJI", "KIR", "MHL", "FSM", "NRU", "NZL", "PLW", "PNG", "WSM", "SLB", "TON", "TUV", "VUT", "FIJ", "SRI", "COK", "WIF", "BUR", "SAM", "ARU", "ASA", "VAN", "TGA", "NFL", "NEP", "MGL", "BER", "GUM" ] })36:[{"id":"40550734a2a8b17705496c52988b7443c1452e4deea8103837e94217b028ab0c718496bc4cdb1aed0c693684b835bec753177749147ebea7b0a217af34868dda","href":"https://static.observableusercontent.com/files/40550734a2a8b17705496c52988b7443c1452e4deea8103837e94217b028ab0c718496bc4cdb1aed0c693684b835bec753177749147ebea7b0a217af34868dda","name":"archive.zip","type":"application/zip","lastModified":1721850039197.793,"size":361820},{"id":"0c91cf6528b0c2456803d65626b142cd30824f7844d543b127090a7782902d4a475223441c2d71aa8cf0d5d6a4c664e618d3458058a96f965a1397e722d3fec9","href":"https://static.observableusercontent.com/files/0c91cf6528b0c2456803d65626b142cd30824f7844d543b127090a7782902d4a475223441c2d71aa8cf0d5d6a4c664e618d3458058a96f965a1397e722d3fec9","name":"athlete_events.csv","type":"text/csv","lastModified":1721850044364.354,"size":41500688}] 2e:{"title":"Olympics across the globe","cells":[{"id":1489,"value":"

Olympics across the globe

Share by continent","pinned":false,"hidden":false,"mode":"md"},{"id":1055,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"viewof playAnimation = html`

${Object.assign(html`