3f:null 40:["$","title",null,{"children":"Tokyo 2020 Olympics and Paralympics medals analysis | Hugo Tessier | Observable"}] 46:T1f78,makeChart = (dataset, categoryAccessor) => { dataset = [...dataset]; // Copy dataset // Parameters initialization const w = 500; const h = 500; const svg = d3.create('svg') .attr('width', w) .attr('height', h); // 📏 --------- SCALES --------- 📏 // x-scale const xScale = d3.scaleLinear() .rangeRound([40, w - 40]) .nice(); // y-scale const yScale = d3.scaleBand() .domain(dataset.map(d => d.name)) .rangeRound([20, h - 40]) .padding(.5) .align(-.6); // color-scale const subgroups = ["bronze", "silver", "gold"] const medalScale = d3.scaleOrdinal() .domain(subgroups) .range(['#A66953','#A8B5BF','#BF9D5E']) // https://color.adobe.com/fr/search?q=medal // ➡️ --------- AXES --------- ➡️ // label svg.append("text") .attr("class", "label") .attr("x", w/2) .attr("y", h) .text("Number of medals"); // x-axis const xAxis = d3.axisBottom(xScale); const xAxisGroup = svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${h-40})`) .call(xAxis.tickSizeOuter(0)); // y-axis const yAxis = d3.axisLeft(yScale); const yAxisGroup = svg.append('g') .attr('class', 'axis-country') .attr('transform', `translate(40,0)`) .call(yAxis.tickSizeOuter(0)); // 📄 --------- TOOLTIP --------- 📄 const tooltipContent = (d) => `

${d.Team}

${d.gold+d.silver+d.bronze} medals in total
${d.gold} gold medals
${d.silver} silver medals
${d.bronze} bronze medals

`; const tooltip = html` `; // 🖱️ --------- HOVER --------- 🖱️ const hoverFunc = (selection) => selection // Enter: display tooltip & change elements opacity .on('mouseenter', function(event,d){ d3.select(this) .attr('class', "selected-bar"); d3.selectAll('.hover-rects') .transition("hover").duration(200).ease(d3.easeSinOut) .attr('opacity', .6); d3.selectAll('.flags') .transition("hover").duration(200).ease(d3.easeSinOut) .attr('opacity', .4); }) // Move: update tooltip position .on('mousemove', function(event,d){ const [x, y] = d3.pointer(event); d3.selectAll('.tooltip') .style('top', `${y}px`) .style('left', `${x}px`) .style('visibility', 'visible') .select('#value') .html(tooltipContent(d)); }) // Out: reset elements opacity & hide tooltip .on('mouseout', function(event,d){ d3.select(this).attr('class', "hover-rects"); d3.selectAll('.hover-rects') .transition("hover").duration(200).ease(d3.easeSinOut) .attr('opacity', 0); d3.selectAll('.flags') .transition("hover").duration(200).ease(d3.easeSinOut) .attr('opacity', 1); d3.selectAll('.tooltip') .style('visibility', 'hidden'); }); // 🔄 --------- UPDATE --------- 🔄 const updateChartType = (newType) => { // 🚨 Dataset update 🚨 var accessor = () => null; switch(newType) { case "Paralympics": accessor = (d) => categoryAccessor(d.Paralympic); break; case "Olympics": accessor = (d) => categoryAccessor(d.Olympic); break; } const data = dataset.map( d => ({name:d.Code, Team: d.Team, flag: d.Code_alpha2.toLowerCase(), ...accessor(d)}) ).sort( (a,b) => (b.gold + b.silver + b.bronze) - (a.gold + a.silver + a.bronze) ).slice(0, 25) const stackedData = d3.stack() .keys(subgroups) (data) // 📏 Scales update 📏 xScale.domain([0, d3.max(data, d => d.gold + d.silver + d.bronze)]); yScale.domain(data.map(d => d.name)) // 🎬 Transition 🎬 const t = svg.transition().duration(500).ease(d3.easeSinOut) // 🏅 Medals rectangles 🏅 const groups = svg.selectAll('.groups') .data(stackedData) .join(enter => enter .append('g') .style("fill", (d) => medalScale(d.key)) .attr('class', 'groups') ); const rects = groups.selectAll('rect') .data((d) => d, (d) => d.data.name) .join( enter => enter .append('rect') .attr('y', d => yScale(d.data.name)) .attr('height', yScale.bandwidth()) .attr('x', d => xScale(0)) .attr('width', 0) .attr('opacity', 1) .transition(t) .attr('x', d => xScale(d[0])) .attr('width', d => xScale(d[1])-xScale(d[0])), update => update .transition(t) .attr('x', d => xScale(d[0])) .attr('y', d => yScale(d.data.name)) .attr('width', d => xScale(d[1])-xScale(d[0])) .attr('opacity', 1), exit => exit .transition(t) .attr('y', h+20) .attr('opacity', 0) ); // ⬛ Hover rectangles ⬛ const hover_rects = svg.selectAll('.hover-rects') .data(data, (d) => d.name) .join( enter => enter .append('rect') .attr('y', d => yScale(d.name)) .attr('height', yScale.bandwidth()) .attr('x', d => xScale(0)) .attr('width', 0) .attr('opacity', 0) .attr('fill', 'white') .transition(t) .attr('width', d => xScale(d.gold+d.silver+d.bronze) -xScale(0)) .attr('class', "hover-rects") .selection().call(hoverFunc), update => update .transition(t) .attr('y', d => yScale(d.name)) .attr('width', d => xScale(d.gold+d.silver+d.bronze) -xScale(0)) .attr('opacity', 0) .selection().call(hoverFunc), exit => exit .transition(t) .attr('y', h+20) .attr('opacity', 0) ); // 🏁 Flags 🏁 const flag_char = {w:20, h:15} const flags = svg.selectAll('.flags') .data(data, d => d.name) .join(enter => enter .append("svg:image") .attr('x', d => xScale(0)) .attr('width', 0) .attr('y', d => yScale(d.name)+(yScale.bandwidth()-flag_char.h)/2) .attr("xlink:href", d => `https://flagcdn.com/w20/${d.flag}.png`) .attr('filter', 'drop-shadow(0px 0px .5px black)') .attr('height', flag_char.h) .attr('opacity', 1) .transition(t) .attr('x', d => xScale(d.gold + d.silver + d.bronze) + flag_char.w/2) .attr('width', flag_char.w) .attr('class', 'flags'), update => update .transition(t) .attr('x', d => xScale(d.gold + d.silver + d.bronze) + flag_char.w/2) .attr('y', d => yScale(d.name)+(yScale.bandwidth()-flag_char.h)/2) .attr('opacity', 1), exit => exit .transition(t) .attr('y', h+20) .attr('opacity', 0) ); // ➡️ Axis update ➡️ xAxisGroup.transition(t).call(xAxis); yAxisGroup.transition(t).call(yAxis); }; // 🔀 --------- SELECTOR HANDLING --------- 🔀 const typeSelector = html` `; d3.select(typeSelector).on('change', () => { updateChartType(typeSelector.value); }); // Chart creation updateChartType("Olympics"); return html`

${typeSelector}
${tooltip} ${svg.node()}

`; }47:T1495,makeScatter = (dataset, x_acc, title, variable_param) => { dataset = [...dataset]; // Copy dataset // Parameters initialization const w = 600; const h = 400; const svg = d3.create('svg') .attr('width', w) .attr('height', h); // 📏 --------- SCALES --------- 📏 const xScale = d3.scaleLinear() .rangeRound([40, w - 40]); const yScale = d3.scaleLinear() .rangeRound([h-40, 40]); // ➡️ --------- AXES --------- ➡️ // labels svg.append("text") .attr("class", "label") .attr("x", -h/2) .attr("y", 10) .attr("transform", "rotate(-90)") .text("Number of medals"); svg.append("text") .attr("class", "label") .attr("x", w/2) .attr("y", h-6) .text(title); // x-axis const xAxis = d3.axisBottom(xScale); const xAxisGroup = svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${h-40})`) .call(xAxis .tickSizeOuter(0) .tickFormat(variable_param.tickFormat) ); // y-axis const yAxis = d3.axisLeft(yScale); const yAxisGroup = svg.append('g') .attr('class', 'axis-left') .attr('transform', `translate(40,0)`) .call(yAxis.tickSizeOuter(0)); // 📄 --------- TOOLTIP --------- 📄 const tooltipContent = (d) => `

${d.Team}

${variable_param.description(d)}

`; const tooltip = html` `; // 🖱️ --------- HOVER --------- 🖱️ const hoverFunc = (selection) => selection // Enter: display tooltip & change opacity .on('mouseenter', function(event,d){ d3.select(this) .attr('class', "selected-flag"); d3.selectAll('.flags') .transition().duration(200).ease(d3.easeSinOut) .attr('opacity', .4); }) // Move: update tooltip position .on('mousemove', function(event,d){ const [x, y] = d3.pointer(event); d3.selectAll(`${"#tooltip-" + title}`) .style('top', `${y}px`) .style('left', `${x}px`) .style('visibility', 'visible') .select('#value') .html(tooltipContent(d)); }) // Out: hide tooltip & reset opacity .on('mouseout', function(event,d){ d3.select(this).attr('class', "flags"); d3.selectAll('.flags') .transition().duration(200).ease(d3.easeSinOut) .attr('opacity', 1); d3.selectAll(`${"#tooltip-" + title}`) .style('visibility', 'hidden'); }); // 🔄 --------- UPDATE --------- 🔄 const updateChartType = (newType) => { // 🚨 Dataset update 🚨 var gender_acc = (d) => d.total; var cat_acc = () => null; switch(newType) { case "Paralympics": cat_acc = (d) => d.Paralympic; break; case "Olympics": cat_acc = (d) => d.Olympic; break; } const y_acc = (d) => gender_acc(cat_acc(d)).gold + gender_acc(cat_acc(d)).silver + gender_acc(cat_acc(d)).bronze; const data = dataset.map( d => ({flag:d.Code_alpha2.toLowerCase(), x:x_acc(d), y:y_acc(d), ...d}) ).sort(d => -d.y); //.slice(0,20); // 📏 Scales update 📏 xScale.domain(extent_by(data, d => d.x)); yScale.domain(extent_by(data, d => d.y)); // 🎬 Transition 🎬 const t = svg.transition().duration(500).ease(d3.easeSinOut) // 🏁 Flags 🏁 const flag = {w:24, h:18} const treatEmpty = d => (d.x==="")? -flag.w: xScale(d.x); svg.selectAll('.flags') .data(data, d => d.flag) .join( enter => enter .append("svg:image") .attr('class', 'flags') .attr('x', d => xScale(0) - flag.w/2) .attr('y', d => yScale(0) - flag.h/2) .attr('width', 0) .attr('opacity', 1) .attr("xlink:href", d => `https://flagcdn.com/h20/${d.flag}.png`) .attr('filter', 'drop-shadow(0px 0px .5px black)') .transition(t) .attr('x', d => treatEmpty(d) - flag.w/2) .attr('y', d => yScale(d.y) - flag.h/2) .attr('width', d => flag.w) .selection().call(hoverFunc), update => update .transition(t) .attr('x', d => treatEmpty(d) - flag.w/2) .attr('y', d => yScale(d.y) - flag.h/2) .selection().call(hoverFunc) ); // ➡️ Axis update ➡️ xAxisGroup.transition(t).call(xAxis); yAxisGroup.transition(t).call(yAxis); }; // 🔀 --------- SELECTOR CREATION --------- 🔀 const typeSelector = html` `; d3.select(typeSelector).on('change', () => { updateChartType(typeSelector.value); }); // --------- Chart creation updateChartType("Olympics"); return html`

${title}

${tooltip}

Competition: ${typeSelector}

${svg.node()}

`; }48:T1549,makeScatter_HCI = (dataset, cat_acc, title, id) => { dataset = [...dataset]; // Copy dataset // Parameters initialization const w = 600; const h = 600; const svg = d3.create('svg') .attr('width', w) .attr('height', h); // 📏 --------- SCALES --------- 📏 const xScale = d3.scaleLinear() .rangeRound([40, w - 40]); const yScale = d3.scaleLinear() .rangeRound([h - 40, 40]); // ➡️ --------- AXES --------- ➡️ svg.append("text") .attr("class", "label") .attr("x", -h/2) .attr("y", 10) .attr("transform", "rotate(-90)") .text("Number of medals"); svg.append("text") .attr("class", "label") .attr("x", w/2) .attr("y", h-6) .text("HCI"); // x-axis const xAxis = d3.axisBottom(xScale); const xAxisGroup = svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${h-40})`) .call(xAxis.tickSizeOuter(0)); // y-axis const yAxis = d3.axisLeft(yScale); const yAxisGroup = svg.append('g') .attr('class', 'axis-left') .attr('transform', `translate(40,0)`) .call(yAxis.tickSizeOuter(0)); // 📄 --------- TOOLTIP --------- 📄 const tooltipContent = (d) => `

${d.Team}

${d.y} medals won with a HCI (Human Capital Index) of ${d3.format(".3f")(d.x)}

`; const tooltip = html` `; // 🖱️ --------- HOVER --------- 🖱️ const hoverFunc = (selection) => selection // Enter: display tooltip & change opacity .on('mouseenter', function(event,d){ d3.select(this) .attr('class', "selected-flag"); d3.selectAll('.flags') .transition().duration(200).ease(d3.easeSinOut) .attr('opacity', .4); }) // Move: update tooltip position .on('mousemove', function(event,d){ const [x, y] = d3.pointer(event); d3.selectAll(`${"#tooltip-" + id}`) .style('top', `${y}px`) .style('left', `${x}px`) .style('visibility', 'visible') .select('#value') .html(tooltipContent(d)); }) // Out: hide tooltip & reset opacity .on('mouseout', function(event,d){ d3.select(this).attr('class', "flags"); d3.selectAll('.flags') .transition().duration(200).ease(d3.easeSinOut) .attr('opacity', 1); d3.selectAll(`${"#tooltip-" + id}`) .style('visibility', 'hidden'); }); // 🔄 --------- UPDATE --------- 🔄 const updateChartType = (newType) => { // 🚨 Dataset update 🚨 var gender_acc = () => null; var x_acc = () => null; switch(newType) { case "tot": gender_acc = (d) => d.total; x_acc = (d) => d.HCI; break; case "wom": gender_acc = (d) => d.women; x_acc = (d) => d.HCI_Women; break; case "men": gender_acc = d => d.men; x_acc = (d) => d.HCI_Men; break; } var y_acc= (d) => gender_acc(cat_acc(d)).gold + gender_acc(cat_acc(d)).silver + gender_acc(cat_acc(d)).bronze; const data = dataset.map( d => ({flag:d.Code_alpha2.toLowerCase(), x:x_acc(d), y:y_acc(d), ...d}) ).sort(d => -d.y); // 📏 Scales update 📏 xScale.domain(extent_by(data.filter(d => d.x!==""), d => d.x)); yScale.domain(extent_by(data, d => d.y)); // 🎬 Transition 🎬 const t = svg.transition().duration(500).ease(d3.easeSinOut) // 🏁 Flags 🏁 const flag = {w:24, h:18}; const treatEmpty = d => (d.x==="")? -flag.w: xScale(d.x); svg.selectAll('.flags') .data(data, d => d.flag) .join( enter => enter .append("svg:image") .attr('class', 'flags') .attr('x', d => xScale(0) - flag.w/2) .attr('y', d => yScale(0) - flag.h/2) .attr('width', 0) .attr("xlink:href", d => `https://flagcdn.com/h20/${d.flag}.png`) .attr('filter', 'drop-shadow(0px 0px .5px black)') .attr('opacity', 1) .transition(t) .attr('x', d => treatEmpty(d) - flag.w/2) .attr('y', d => yScale(d.y) - flag.h/2) .attr('width', d => flag.w) .selection().call(hoverFunc), update => update .transition(t) .attr('x', d => treatEmpty(d) - flag.w/2) .attr('y', d => yScale(d.y) - flag.h/2) .selection().call(hoverFunc) ); // ➡️ Axis update ➡️ xAxisGroup.transition(t).call(xAxis); yAxisGroup.transition(t).call(yAxis); }; // 🔀 --------- SELECTOR CREATION --------- 🔀 const xSelector = html` `; d3.select(xSelector).on('change', () => { updateChartType(xSelector.value); }); // Chart creation updateChartType('tot'); return html`

${title}

Medals count: ${tooltip} ${xSelector}

${svg.node()}

`; return svg.node() }49:T119e,--- ## Write-up of the process **1. Find a Data Set and a Question to Study** This step was the most difficult as there are a lot of data sets available. I decided to work on these questions as I am passionate by sport and that I have always wanted to analyze deeper the differences between men and women performances by country and the differences between Olympic and Paralympic Games. **2. Data Preprocessing** Obtaining the raw data was the easiest part from the sources referenced earlier. The data was clean and easily available. The hardest part was to merge all the information into a single data set as there were two sources that are the *Olympic Website* and *Data World*. I had to identify a common index and to create a specific data structure. For the preprocessing, I used Python and mainly the module `pandas`. **3. Data Set Description** The structure of the data is complex as each row of the data set correponds to an object representing a country with nested objects inside it. These nested objects are the medal counts for the Olympic Games and the Paralympic Games with their repartition. For the visualization, each chart selects fields of interest corresponding to the portion of the data they are representing. **4. Development of the stacked bar charts** The first step consisted in learning how to create stacked charts. One essential channel used in this chart that is linked with pre-attention is the color of the stacks corresponding to the metal of the medals (gold, silver, bronze). The work consisted into adding transition in order to let the reader follow a country when the selector is changed. Then, I wanted to make the identification of a country easier (more pre-attention), adding flags worked really well in my opinion. The last step was to add interactivity with a hover function to put emphasis on a country. Stacked charts give relative performances of the countries but I found the evaluation of the number of medals difficult with the chart. Adding a tooltip with transition was a good exercise and helps a lot for the readability. **5. Development of the scatter plot** For the scatter plots, I wanted to represent the countries with flags since the beginning. These charts were really interesting as they gave the opportunity to represent the entire dataset at once. The hardest part was to find a working API for this purpose and a way to append images into a `svg` element. However, it was difficult to distinguish the countries close to each others in the plot. The next step consisted into adding a tooltip to focus on a flag and give the proper coordinates of the country. On the other hand, I found interesting to also add interactivity to the visualization to show the evolution of some country in comparison to others without having to watch two separate static charts and find the differences. The last improvement consisted in adding the axis labels and modifying the format of the x-axis as it was hard to read for big numbers such as *GNI* or *Population*. **6. Reflexions** - *Genericity of the charts:* emphasis has been put on the generecity of the functions used for the creation of the charts if one would like to reuse these charts with new variables. - *Scale of the axis:* while visualizing the data and writing the story, I thought about how the relative scale is important between axis when one want to make cluster (of countries in our case). If we represent the x-axis on 600 pixels and the y-axis on 400 pixels, the reader may tend to create clusters on the y-axis as the screen distance is smaller on this dimension. It is the reason why the *HCI* graphs have the same screen distance for x and y axis. But, if I am using this effect by scaling an axis based on the relative sparsity of a variable, am I distorting the data? - *Labels the axis:* even if I created the charts I was confusing them a lot one with each other. Adding labels on the axis helps the reader understand the data represented. - *Interactivity:* I have learned in this project that interactivity and transition helps the readability a lot. I learned it with the scatter plots first but it has been also verified with the bar chart. - *Missing values:* Last reflexion was about how to treat missing values. For example, the data set has missing values for gendered-HCI for Japan, Brazil. In our case, those countries can't be removed (due to their good performances). But how to treat those? I had to implement a method for the HCI graphs.4a:[{"id":"c31828c38066c8fe9ff9ebc1282946f743d1ae3b6ea97dea9851d3f6655b5df30bd1ed8b9b97d3025e12f9455c3e5ebbb08203850b691f085f629824e9d148f0","href":"https://static.observableusercontent.com/files/c31828c38066c8fe9ff9ebc1282946f743d1ae3b6ea97dea9851d3f6655b5df30bd1ed8b9b97d3025e12f9455c3e5ebbb08203850b691f085f629824e9d148f0","name":"logo_olympics_paralympics.png","type":"image/png","lastModified":1635825138841.732,"size":137566},{"id":"5352ad07a694914a73c4123d3bfc86dbbb685000b5c1bb0bf690d613c4b9dbd997f9cb79e7eaaef1fe126b2ee7eb5b49078b902f76a3f452c29972f3b6407b47","href":"https://static.observableusercontent.com/files/5352ad07a694914a73c4123d3bfc86dbbb685000b5c1bb0bf690d613c4b9dbd997f9cb79e7eaaef1fe126b2ee7eb5b49078b902f76a3f452c29972f3b6407b47","name":"data_olympics_paralympics.json","type":"application/json","lastModified":1635825219572.659,"size":149492}] 44:{"id":"ea78edc315c6cf02","slug":"project1_olympic_paralympic_medals","title":"Tokyo 2020 Olympics and Paralympics medals analysis","thumbnail":"a95a5b6a14ed0ae9ab968d4d9a9b909cc852a7309bb508d4013a5b80a01f65d3","access_level":"public","create_time":"$D2021-10-12T21:36:13.046Z","update_time":"$D2021-11-02T06:13:02.029Z","view_time":null,"first_public_time":"$D2021-12-06T23:36:57.770Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7dabc650f4184c3e","login":"h-tes","name":"Hugo Tessier","avatar_url":"https://avatars-next.observableusercontent.com/b37d55f93b3da15ea7badaf9f19a2dfb8dfb3f43da50c0cc29c00a6b4c87d3fc","tier":"starter_2024","bio":"","following":false},"version":2119,"publish_version":2119,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b196d68f3f41bcf","login":"h-tes","name":"Hugo Tessier","avatar_url":"https://avatars-next.observableusercontent.com/b37d55f93b3da15ea7badaf9f19a2dfb8dfb3f43da50c0cc29c00a6b4c87d3fc","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8b196d68f3f41bcf","login":"h-tes","name":"Hugo Tessier","avatar_url":"https://avatars-next.observableusercontent.com/b37d55f93b3da15ea7badaf9f19a2dfb8dfb3f43da50c0cc29c00a6b4c87d3fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tokyo 2020 Olympics and Paralympics medals analysis","cells":[{"id":0,"value":"# Tokyo 2020 Olympics and Paralympics medals analysis\n***IGME-460 Project 1***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"md`${await FileAttachment(\"logo_olympics_paralympics.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1812,"value":"#### Introduction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"The objective of this article is to study the results of the Tokyo 2020 Olympic and Paralympic Games which happened between the 23rd of July and the 8th of August 2021 for the Olympic Games and between the 24th of August and 5th of September 2021 for the Paralympic Games.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"The story that will be told will focus on several questions. Those will lead our analysis:\n\n- *How are the medals split between the countries?*\n- *Are there significant differences between the Olympic and the Paralympic performances?*\n- *Can we find factors about the countries that can explain their results?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"#### Sources\n\nThe data used for this project is a combination of information on:\n- **Medal results** of the Tokyo 2020 Olympic and Paralympic Games that has been obtained on the [Olympics website](https://olympics.com/tokyo-2020/olympic-games) (for the [Paralympic](https://olympics.com/tokyo-2020/paralympic-games/en/results/all-sports/medal-standings.htm) and [Olympic](https://olympics.com/tokyo-2020/olympic-games/en/results/all-sports/medal-standings.htm) Games).\n\n- **Indexes on the countries** present in the competition, obtained from the [World Bank Group](https://www.worldbank.org/en/home). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"## Analysis of the medals repartition ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"The first analysis is made on the raw medals count of each country. The medals are split between gold, silver and bronze. It is interesting to have a first sense of the best performing countries. This **interactive visualization** helps to see the top 25 countries, sorted by their total number of medals for the **Olympic** and the **Paralympic** Games.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"### Total Medals Count - Olympic and Paralympic Games","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"makeChart(medals, d => d.total)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"One can observe that the four leading countries are the same for the Olympic and the Paralympic Games: the **United States** (USA), **China** (CHN), the **Russian Olympic Comitee** (ROC) and the **Great Britain** (GBR) even if there are not in the same order. \n\nThe shape of the stacked bar chart looks relatively similar between the two competitions with around five top performing countries and a dense group of countries fighting for the next ranks.\n\nWe can also see on this chart that the present countries are -for the majority- from the northern hemisphere. It seems less true for the Paralympic performances. The top performing countries also seem to have a higher ratio of gold medals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"### Women Medals Count - Olympic and Paralympic Games\n\nWe will now focus on the repartition of the medals between the **genders** to see if the overall shape of the chart significantly differs from the Total Medal Count chart. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"makeChart(medals, d => d.women)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"One can observe that the bars are more sparsed in the women repartition of the medals (for the Olympics and the Paralympics) than the men repartition. It is also interesting to note that the top four countries are the same no matter what is the gender. \n\nChanging the competition between Paralympics and Olympics helps to note that the great performance of China during the Paralympic Games is highly related to its dominance during the women events.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"### Men Medals Count - Olympic and Paralympic Games","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"makeChart(medals, d => d.men)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1988,"value":"Thus, even if the global performances silhouette is kept with some leading countries and a stacked group after. Medal count can differ a lot if we look more closely at the gender repartition of the medals for some countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"---\n## Analysis of external factors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"The observation drawn from the previous visualization may be related to other information on the countries. One could think of factors such as the population, the wealth of the level of Human Development of the countries that could affect the number of medals. The objective of the next part of this analysis is to focus on these **external factors**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"{\n const params = {\n \"tickFormat\": (s) => d3.format(\".3s\")(s).replace(/G/,\"B\"),\n \"description\": (d) => `${d.y} medals won with a population of ${d3.format(\".4s\")(d.x).replace(/G/,\"B\")} inhabitants`\n };\n \n return makeScatter(medals, (d) => d.Population, \"Population\", params)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"**Population** is one of the most common descriptor of a country. Representing the total medal count with the population can help making a **segmentation** of the countries as with a [Growth–share matrix](https://en.wikipedia.org/wiki/Growth%E2%80%93share_matrix). China being a populated country with a lot of medals, India a high populated country with few medals, European countries can make a segment with USA, Japan and Australia with lower population and a high number of medals. There would finally be a last segment of countries with relatively low population and low total medal count. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"{\n const params = {\n \"tickFormat\": (s) => d3.format(\"$.3s\")(s).replace(/G/,\"B\"),\n \"description\": (d) => `${d.y} medals won with a GNI of ${d3.format(\"$.4s\")(d.x).replace(/G/,\"B\")}`\n };\n \n return makeScatter(medals, (d) => d.GNI, \"GNI\", params)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"The Gross Domestic Product (GDP) is a well-known economic indicator to express the wealth of a country. However, the **Gross National Income** (GNI) is sometimes seen as a better metric for the overall economy a country as it includes the foreign investments. It is the one that we chosed for this visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1907,"value":"For this indicator the correlation between the two variables seems almost **positively linear** for the Olympic Games. We can conjuncture that the number of medals obtained is related to the investment that a country puts into sports. \n\nThis observation doesn't seem as observable for the Paralympic Games where the country may not put as much investment. It could be interesting to analyze if this last remark could be enriched with other factors such as the **investments in sports** of the countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"### Human Capital Index","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"From [Wikipedia](https://en.wikipedia.org/wiki/Human_Capital_Index), the **Human Capital Index** measures which countries are best in mobilizing the economic and professional potential of its citizens. This index can be calculated by genders and then can be represented with the correponding number of medals obtained by a country.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"makeScatter_HCI(medals, (d) => d.Olympic, \"Olympic Games\", 'olym')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"makeScatter_HCI(medals, (d) => d.Paralympic, \"Paralympic Games\", \"para\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1916,"value":"From these charts, we can see that this indicator, that could have been promising, doesn't explain the medal results well. It could help to make some clusters for example with the countries with a low index and a low number of medals. Identifying differences between the genders and between the Olympic and the Paralympic competitions is difficult with is index.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2011,"value":"## Conclusion\n\nAs a conclusion, I hope that the many visualizations of this article have helped getting more sense on the repartition of the medals between the countries as we have seen that the pattern observed can differ a lot between the Olympic and the Paralympic competitions for some countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"---\n\n## Notebook initialization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"*Data import:* each rows correponds to a country which obtained at least one medal during the competition. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"medals = await FileAttachment(\"data_olympics_paralympics.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1715,"value":"*CSS Styling*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"*Modules and global functions*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"function extent_by(data, accessor, padding=0.1) {\n var range = d3.extent(data, accessor)\n var offset = (range[1] - range[0])*padding\n return [range[0] - offset, range[1] + offset]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"