34:["$","title",null,{"children":"The Olympic Games: A Small Study | satsushi0 | Observable"}] 3c:T5a9,{ const svg = d3.create('svg') .attr('height', 80) .attr('width', 300) let minCircleRadius = 5 let maxCircleRadius = 15 let totMedalsByCountryExtent = d3.extent(d3.map(medals, row => row.Gold+ + row.Silver + row.Bronze)) let circleRadiusScaler = d3.scalePow() .exponent(1) .domain(totMedalsByCountryExtent) .range([minCircleRadius, maxCircleRadius]) console.log(totMedalsByCountryExtent) let legSizes = [[totMedalsByCountryExtent[0],1], [parseInt((totMedalsByCountryExtent[0] + totMedalsByCountryExtent[1])*0.25), 2], [parseInt((totMedalsByCountryExtent[0] + totMedalsByCountryExtent[1])*0.50), 3], [totMedalsByCountryExtent[1], 4]] const legend = svg.append('g') legend.append('g') .append('text') .attr('x', 45) .attr('y', 15) .attr('text-anchor', 'left') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .attr('font-size', 15) .text('No. of Medals') legend.append('g').selectAll('circle') .data(legSizes) .join('circle') .attr('cx', row => row[1]*50) .attr('cy', 40) .attr('r', row => circleRadiusScaler(row[0])) .attr('fill', 'steelblue') legend.append('g').selectAll('text') .data(legSizes) .join('text') .attr('x', row => row[1]*50) .attr('y', 70) .attr('font-size', 10) .attr('text-anchor', 'middle') .attr('fill', 'black') .text(row => row[0]) return svg.node() }3d:T5c16,//Third Graph { const width = 800 const maxHeight = 1400 const maxWidth = 950 let margins = { 'left' : 4, 'right' : 0, 'top': 0, 'bottom' : 4 } let barGHeight = 40 let barGWidth = 40 let sizeOfPie = 10 let minCircleRadius = 5 let maxCircleRadius = 15 let totMedalsByCountryExtent = d3.extent(d3.map(medals, row => row.Gold+ + row.Silver + row.Bronze)) let circleRadiusScaler = d3.scalePow() .exponent(1) .domain(totMedalsByCountryExtent) .range([minCircleRadius, maxCircleRadius]) console.log(totMedalsByCountryExtent) let legSizes = [[totMedalsByCountryExtent[0],1], [parseInt((totMedalsByCountryExtent[0] + totMedalsByCountryExtent[1])*0.25), 2], [parseInt((totMedalsByCountryExtent[0] + totMedalsByCountryExtent[1])*0.50), 3], [totMedalsByCountryExtent[1], 4]] let pieGenerator = d3.pie() .value(d => d.count) function arcGenerator(medalCol) { let total = medalCol[1] let outerRadius = circleRadiusScaler(total) let gen = d3.arc() .innerRadius(0) .outerRadius(outerRadius) let arc = gen(medalCol[0]) return arc } let nMedalsExtent = d3.extent(medals, row => d3.max([row.Gold, row.Silver, row.Bronze])) let countryToMedals = Object.fromEntries(d3.map(medals, row => [row['Team/NOC'], d3.sum([row.Gold, row.Silver, row.Bronze])])) let barGXScale = d3.scaleBand() .domain(['Gold', 'Silver', 'Bronze']) .range([0,barGWidth]) let barGYScale = d3.scaleLinear() .domain([0,200]) .range([0, barGHeight]) let europeMaxHeight = 700 let europeMaxWidth = 500 let europeVisHeight = europeMaxHeight - margins.top - margins.bottom let europeVisWidth = europeMaxWidth - margins.left - margins.right let europeProjection = d3.geoMercator().center([ 15, 55 ]) .scale([ width / 1.5 ]) .translate([ europeVisWidth / 2, europeVisHeight / 2 ]) const euroPath = d3.geoPath().projection(europeProjection) const geoJsonUrl = "https://gist.githubusercontent.com/spiker830/3eab0cb407031bf9f2286f98b9d0558a/raw/7edae936285e77be675366550e20f9166bed0ed5/europe_features.json" const europe = await d3.json(geoJsonUrl) const countoFeature = Object.fromEntries(d3.map(europe.features, row => [row.properties.name, row])) //--------------------------------------------------------------------------------------------------------------------------------------------- let americasMaxHeight = 500 let americasMaxWidth = 400 let americasVisHeight = americasMaxHeight - margins.top - margins.bottom let americasVisWidth = americasMaxWidth - margins.left - margins.right let americasProjection = d3.geoMercator().center([ -105, 16 ]) .scale([ width / 5.5 ]) .translate([ americasVisWidth / 2, americasVisHeight / 2 ]) const americasPath = d3.geoPath().projection(americasProjection) const americasGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/americas.geo.json" const americas = await d3.json(americasGeoJsonUrl) const countoFeatureAmericas = Object.fromEntries(d3.map(americas.features, row => [row.properties.name, row])) //----------------------------------------------------------------------------------------------------------------------------------------------- let africaMaxHeight = 500 let africaMaxWidth = 400 let africaVisHeight = africaMaxHeight - margins.top - margins.bottom let africaVisWidth = africaMaxWidth - margins.left - margins.right let africaProjection = d3.geoMercator().center([ 15,-10 ]) .scale([ width / 3 ]) .translate([ africaVisWidth / 2, africaVisHeight / 2 ]) const africaPath = d3.geoPath().projection(africaProjection) const africaGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/africa.geo.json" const africa = await d3.json(africaGeoJsonUrl) const countoFeatureAfrica = Object.fromEntries(d3.map(africa.features, row => [row.properties.name, row])) //------------------------------------------------------------------------------------------------------------------------------------------- let asiaMaxHeight = 500 let asiaMaxWidth = 500 let asiaVisHeight = asiaMaxHeight - margins.top - margins.bottom let asiaVisWidth = asiaMaxWidth - margins.left - margins.right let asiaProjection = d3.geoMercator().center([85,30]) .scale([ width / 3.5 ]) .translate([ asiaVisWidth / 2, asiaVisHeight / 2 ]) const asiaPath = d3.geoPath().projection(asiaProjection) const asiaGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/asia.geo.json" const asia = await d3.json(asiaGeoJsonUrl) const countoFeatureAsia = Object.fromEntries(d3.map(asia.features, row => [row.properties.name, row])) //------------------------------------------------------------------------------------------------------------------------------------------- let oceaniaMaxHeight = 400 let oceaniaMaxWidth = 400 let oceaniaVisHeight = oceaniaMaxHeight - margins.top - margins.bottom let oceaniaVisWidth = oceaniaMaxWidth - margins.left - margins.right let oceaniaProjection = d3.geoMercator().center([160,-45]) .scale([ width / 3]) .translate([ oceaniaVisWidth*(0.60), oceaniaVisHeight*(0.70)]) const oceaniaPath = d3.geoPath().projection(oceaniaProjection) const oceaniaGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/australia.geo.json" const oceania = await d3.json(oceaniaGeoJsonUrl) const countoFeatureOceania = Object.fromEntries(d3.map(oceania.features, row => [row.properties.name, row])) /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const svg = d3.create('svg') .attr('height', maxHeight) .attr('width', maxWidth) const euroMap = svg.append('g') euroMap.append('text') .attr('x', 25) .attr('y', 25) .attr('font-size', 22) .text('Europe') euroMap.append('rect') .attr('x', 0) .attr('y', 0) .attr('height', europeVisHeight) .attr('width', europeVisWidth) .attr('stroke', 'black') .attr('fill', 'None') const euroOutlines = euroMap.append('g') euroOutlines.selectAll('path') .data(europe['features']) .join('path') .attr('d', row => euroPath(row)) .attr('stroke', 'white') .attr('fill', row => Object.keys(countryToMedals).includes(row.properties.name) ? q1ColorScale(countryToMedals[row.properties.name]) : '#eeeeee') .attr('opacity', 1) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); // create tooltip const tooltip = euroMap.append('g') .attr('visibility', 'hidden'); const tooltipHeight = 16; // add a rectangle to the tooltip to serve as a background const tooltipRect = tooltip.append('rect') .attr('fill', '#d9d9d9') .attr('height', tooltipHeight); // add a text element to the tooltip to contain the label const tooltipText = tooltip.append('text') .attr('fill', 'black') .attr('font-family', 'cambria') .attr('font-size', 12) .attr('y', 2) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') function mouseEnter(event, d) { d3.select(this) .attr('stroke', 'black'); // update the label's text and get its width tooltipText.text(d.properties.name); const labelWidth = tooltipText.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRect.attr('width', labelWidth + 6); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = euroPath.centroid(d)[0] + 15; const yPos = euroPath.centroid(d)[1] + 5; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { d3.select(this) .attr('stroke', 'white'); tooltip .attr('visibility', 'hidden'); } const euroPoints = euroMap.append('g') const medalsGroup = euroPoints.selectAll('g') .data(d3.filter(medals, row => Object.keys(countoFeature).includes(row['Team/NOC']))) .join('g') .attr('transform', row => `translate( ${euroPath.centroid(countoFeature[row['Team/NOC']])[0]} ,${euroPath.centroid(countoFeature[row['Team/NOC']])[1]} )`) medalsGroup.selectAll('path') .data(row => d3.map(pieGenerator( [Object.fromEntries([ ['MedalType', 'Gold'], ['count', row.Gold] ]), Object.fromEntries([ ['MedalType', 'Silver'], ['count', row.Silver] ]), Object.fromEntries([ ['MedalType', 'Bronze'], ['count', row.Bronze] ])]), d => [d, row.Total])) .join('path') .attr('d', row => arcGenerator(row)) .attr('stroke', row => row[0].data['MedalType']) .attr('fill', row => medalColorScale(row[0].data.MedalType)) //------------------------------------------------------------------------------------------------------------------------------- const americasMap = svg.append('g') .attr('transform', `translate(${europeMaxWidth},0)`) americasMap.append('rect') .attr('x', 0) .attr('y', 0) .attr('height', americasVisHeight) .attr('width', americasVisWidth) .attr('stroke', 'black') .attr('fill', 'None') const americasOutlines = americasMap.append('g') americasOutlines.selectAll('path') .data(americas['features']) .join('path') .attr('d', row => americasPath(row)) .attr('stroke', 'white') .attr('fill', row => Object.keys(countryToMedals).includes(row.properties.name) ? q1ColorScale(countryToMedals[row.properties.name]) : '#eeeeee') .attr('opacity', 1) .on('mouseenter', mouseEnterAm) .on('mouseleave', mouseLeaveAm); americasMap.append('text') .attr('x', americasVisWidth-25) .attr('y', 25) .attr('font-size', 22) .attr('text-anchor', 'end') .text('Americas') // create tooltip const tooltipAm = americasMap.append('g') .attr('visibility', 'hidden'); const tooltipHeightAm = 16; // add a rectangle to the tooltip to serve as a background const tooltipRectAm = tooltipAm.append('rect') .attr('fill', '#d9d9d9') .attr('height', tooltipHeightAm); // add a text element to the tooltip to contain the label const tooltipTextAm = tooltipAm.append('text') .attr('fill', 'black') .attr('font-family', 'cambria') .attr('font-size', 12) .attr('y', 2) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') function mouseEnterAm(event, d) { d3.select(this) .attr('stroke', 'black'); // update the label's text and get its width tooltipTextAm.text(d.properties.name); const labelWidthAm = tooltipTextAm.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRectAm.attr('width', labelWidthAm + 6); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = americasPath.centroid(d)[0] + 15; const yPos = americasPath.centroid(d)[1] + 5; tooltipAm.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeaveAm(event, d) { d3.select(this) .attr('stroke', 'white'); tooltipAm .attr('visibility', 'hidden'); } const americasPoints = americasMap.append('g') const medalsGroupAmericas = americasPoints.selectAll('g') .data(d3.filter(medals, row => Object.keys(countoFeatureAmericas).includes(row['Team/NOC']))) .join('g') .attr('transform', row => `translate( ${americasPath.centroid(countoFeatureAmericas[row['Team/NOC']])[0]} ,${americasPath.centroid(countoFeatureAmericas[row['Team/NOC']])[1]} )`) medalsGroupAmericas.selectAll('path') .data(row => d3.map(pieGenerator( [Object.fromEntries([ ['MedalType', 'Gold'], ['count', row.Gold] ]), Object.fromEntries([ ['MedalType', 'Silver'], ['count', row.Silver] ]), Object.fromEntries([ ['MedalType', 'Bronze'], ['count', row.Bronze] ])]), d => [d, row.Total])) .join('path') .attr('d', row => arcGenerator(row)) .attr('stroke', row => row[0].data['MedalType']) .attr('fill', row => medalColorScale(row[0].data.MedalType)) //---------------------------------------------------------------------------------------------------------------------------------------- const africaMap = svg.append('g') .attr('transform', `translate(${europeMaxWidth},${americasMaxHeight})`) africaMap.append('text') .attr('x', africaVisWidth-25) .attr('y', 25) .attr('font-size', 22) .attr('text-anchor', 'end') .text('Africa') africaMap.append('rect') .attr('x', 0) .attr('y', 0) .attr('height', africaVisHeight) .attr('width', africaVisWidth) .attr('stroke', 'black') .attr('fill', 'None') const africaOutlines = africaMap.append('g') africaOutlines.selectAll('path') .data(africa['features']) .join('path') .attr('d', row => africaPath(row)) .attr('stroke', 'white') .attr('fill', row => Object.keys(countryToMedals).includes(row.properties.name) ? q1ColorScale(countryToMedals[row.properties.name]) : '#eeeeee') .attr('opacity', 1) .on('mouseenter', mouseEnterAf) .on('mouseleave', mouseLeaveAf); // create tooltip const tooltipAf = africaMap.append('g') .attr('visibility', 'hidden'); const tooltipHeightAf = 16; // add a rectangle to the tooltip to serve as a background const tooltipRectAf = tooltipAf.append('rect') .attr('fill', '#d9d9d9') .attr('height', tooltipHeightAf); // add a text element to the tooltip to contain the label const tooltipTextAf = tooltipAf.append('text') .attr('fill', 'black') .attr('font-family', 'cambria') .attr('font-size', 12) .attr('y', 2) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') function mouseEnterAf(event, d) { d3.select(this) .attr('stroke', 'black'); // update the label's text and get its width tooltipTextAf.text(d.properties.name); const labelWidthAf = tooltipTextAf.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRectAf.attr('width', labelWidthAf + 6); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = africaPath.centroid(d)[0] + 15; const yPos = africaPath.centroid(d)[1] + 5; tooltipAf.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeaveAf(event, d) { d3.select(this) .attr('stroke', 'white'); tooltipAf .attr('visibility', 'hidden'); } const africaPoints = africaMap.append('g') const medalsGroupAfrica = africaPoints.selectAll('g') .data(d3.filter(medals, row => Object.keys(countoFeatureAfrica).includes(row['Team/NOC']))) .join('g') .attr('transform', row => `translate( ${africaPath.centroid(countoFeatureAfrica[row['Team/NOC']])[0]} ,${africaPath.centroid(countoFeatureAfrica[row['Team/NOC']])[1]} )`) medalsGroupAfrica.selectAll('path') .data(row => d3.map(pieGenerator( [Object.fromEntries([ ['MedalType', 'Gold'], ['count', row.Gold] ]), Object.fromEntries([ ['MedalType', 'Silver'], ['count', row.Silver] ]), Object.fromEntries([ ['MedalType', 'Bronze'], ['count', row.Bronze] ])]), d => [d, row.Total])) .join('path') .attr('d', row => arcGenerator(row)) .attr('stroke', row => row[0].data['MedalType']) .attr('fill', row => medalColorScale(row[0].data.MedalType)) //------------------------------------------------------------------------- const asiaMap = svg.append('g') .attr('transform', `translate(0,${europeMaxHeight})`) asiaMap.append('text') .attr('x', 25) .attr('y', 25) .attr('font-size', 22) .text('Asia') asiaMap.append('rect') .attr('x', 0) .attr('y', 0) .attr('height', asiaVisHeight) .attr('width', asiaVisWidth) .attr('stroke', 'black') .attr('fill', 'None') const asiaOutlines = asiaMap.append('g') asiaOutlines.selectAll('path') .data(asia['features']) .join('path') .attr('d', row => asiaPath(row)) .attr('stroke', 'white') .attr('fill', row => Object.keys(countryToMedals).includes(row.properties.name) ? q1ColorScale(countryToMedals[row.properties.name]) : '#eeeeee') .attr('opacity', 1) .on('mouseenter', mouseEnterAs) .on('mouseleave', mouseLeaveAs); // create tooltip const tooltipAs = asiaMap.append('g') .attr('visibility', 'hidden'); const tooltipHeightAs = 16; // add a rectangle to the tooltip to serve as a background const tooltipRectAs = tooltipAs.append('rect') .attr('fill', '#d9d9d9') .attr('height', tooltipHeightAs); // add a text element to the tooltip to contain the label const tooltipTextAs = tooltipAs.append('text') .attr('fill', 'black') .attr('font-family', 'cambria') .attr('font-size', 12) .attr('y', 2) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') function mouseEnterAs(event, d) { d3.select(this) .attr('stroke', 'black'); // update the label's text and get its width tooltipTextAs.text(d.properties.name); const labelWidthAs = tooltipTextAs.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRectAs.attr('width', labelWidthAs + 6); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = asiaPath.centroid(d)[0] + 15; const yPos = asiaPath.centroid(d)[1] + 5; tooltipAs.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeaveAs(event, d) { d3.select(this) .attr('stroke', 'white'); tooltipAs .attr('visibility', 'hidden'); } const asiaPoints = asiaMap.append('g') const medalsGroupAsia = asiaPoints.selectAll('g') .data(d3.filter(medals, row => Object.keys(countoFeatureAsia).includes(row['Team/NOC']))) .join('g') .attr('transform', row => `translate( ${asiaPath.centroid(countoFeatureAsia[row['Team/NOC']])[0]} ,${asiaPath.centroid(countoFeatureAsia[row['Team/NOC']])[1]} )`) medalsGroupAsia.selectAll('path') .data(row => d3.map(pieGenerator( [Object.fromEntries([ ['MedalType', 'Gold'], ['count', row.Gold] ]), Object.fromEntries([ ['MedalType', 'Silver'], ['count', row.Silver] ]), Object.fromEntries([ ['MedalType', 'Bronze'], ['count', row.Bronze] ])]), d => [d, row.Total])) .join('path') .attr('d', row => arcGenerator(row)) .attr('stroke', row => row[0].data['MedalType']) .attr('fill', row => medalColorScale(row[0].data.MedalType)) //--------------------------------------------------------------------------------------------------------------------------------------- const oceaniaMap = svg.append('g') .attr('transform', `translate(${europeMaxWidth},${americasMaxHeight + africaMaxHeight})`) oceaniaMap.append('text') .attr('x', 25) .attr('y', 25) .attr('font-size', 22) .text('Oceania') oceaniaMap.append('rect') .attr('x', 0) .attr('y', 0) .attr('height', oceaniaVisHeight) .attr('width', oceaniaVisWidth) .attr('stroke', 'black') .attr('fill', 'None') const oceaniaOutlines = oceaniaMap.append('g') oceaniaOutlines.selectAll('path') .data(oceania['features']) .join('path') .attr('d', row => oceaniaPath(row)) .attr('stroke', 'white') .attr('fill', row => Object.keys(countryToMedals).includes(row.properties.name) ? q1ColorScale(countryToMedals[row.properties.name]) : '#eeeeee') .attr('opacity', 1) .attr('opacity', 0.6) .on('mouseenter', mouseEnterO) .on('mouseleave', mouseLeaveO); // create tooltip const tooltipO = oceaniaMap.append('g') .attr('visibility', 'hidden'); const tooltipHeightO = 16; // add a rectangle to the tooltip to serve as a background const tooltipRectO = tooltipO.append('rect') .attr('fill', '#d9d9d9') .attr('height', tooltipHeightO); // add a text element to the tooltip to contain the label const tooltipTextO = tooltipO.append('text') .attr('fill', 'black') .attr('font-family', 'cambria') .attr('font-size', 12) .attr('y', 2) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') function mouseEnterO(event, d, path) { d3.select(this) .attr('stroke', 'black'); // update the label's text and get its width tooltipTextO.text(d.properties.name); const labelWidthO = tooltipTextO.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRectO.attr('width', labelWidthO + 6); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = oceaniaPath.centroid(d)[0] + 15; const yPos = oceaniaPath.centroid(d)[1] + 5; tooltipO.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeaveO(event, d) { d3.select(this) .attr('stroke', 'white'); tooltipO .attr('visibility', 'hidden'); } const oceaniaPoints = oceaniaMap.append('g') const medalsGroupOceania = oceaniaPoints.selectAll('g') .data(d3.filter(medals, row => Object.keys(countoFeatureOceania).includes(row['Team/NOC']))) .join('g') .attr('transform', row => `translate( ${oceaniaPath.centroid(countoFeatureOceania[row['Team/NOC']])[0]} ,${oceaniaPath.centroid(countoFeatureOceania[row['Team/NOC']])[1]} )`) medalsGroupOceania.selectAll('path') .data(row => d3.map(pieGenerator( [Object.fromEntries([ ['MedalType', 'Gold'], ['count', row.Gold] ]), Object.fromEntries([ ['MedalType', 'Silver'], ['count', row.Silver] ]), Object.fromEntries([ ['MedalType', 'Bronze'], ['count', row.Bronze] ])]), d => [d, row.Total])) .join('path') .attr('d', row => arcGenerator(row)) .attr('stroke', row => row[0].data['MedalType']) .attr('fill', row => medalColorScale(row[0].data.MedalType)) return svg.node() }3e:T1479,{ const maxHeight = 600 const maxWidth = 1000 let margins = { 'left' : 70, 'right' : 50, 'top': 50, 'bottom' : 50 } let visHeight = 300 - margins.top - margins.bottom let visWidth = 700 - margins.left - margins.right const xScale = d3.scaleLinear() .domain([1890,2022]) .range([0, visWidth]) const yScale = d3.scaleLinear() .domain([0,countriesNOC.length]) .range([visHeight, 0]) const xAxis = d3.axisBottom(xScale) .tickFormat(d3.format('d')) const yAxis = d3.axisLeft(yScale) .tickFormat(d3.format('d')) const lineGen = d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1])) const svg = d3.create('svg') .attr('height',maxHeight) .attr('width', maxWidth) const countGraph = svg.append('g') .attr('transform', `translate(${margins.left + 100},${margins.top})`) .attr('height', visHeight) .attr('width', visWidth) countGraph.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) countGraph.append('g').call(yAxis) countGraph.append('text') .attr('transform', `translate(${-margins.left/2},${visHeight/2}) rotate(270)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('No. of Countries') .attr('fill', 'black') countGraph.append('text') .attr('transform', `translate(${visWidth/2},${visHeight + margins.top})`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('Year') .attr('fill', 'black') const lines = countGraph.append('g') lines.append('path') .attr('d', lineGen(q3_data['Country'][0][1])) .attr('stroke', '#fdb462') .attr('fill', 'None') .attr('stroke-width', 2) lines.append('path') .attr('d', lineGen(q3_data['Country'][1][1])) .attr('stroke','#80b1d3') .attr('fill', 'None') .attr('stroke-width', 2) let marginsP = { 'left' : 150, 'right' : 50, 'top': 50, 'bottom' : 150 } let visHeightP = maxHeight - margins.top - margins.bottom - 300 let visWidthP = (maxWidth/2 - margins.left - margins.right) const xScaleP = d3.scaleLinear() .domain([1890,2022]) .range([0, visWidthP]) const yScaleP = d3.scaleLinear() .domain([0,12000]) .range([visHeightP, 0]) const xAxisP = d3.axisBottom(xScaleP) .tickFormat(d3.format('d')) const yAxisP = d3.axisLeft(yScaleP) .tickFormat(d3.format('d')) const lineGenP = d3.line() .x(d => xScaleP(d[0])) .y(d => yScaleP(d[1])) const playerGraph = svg.append('g') .attr('transform', `translate(${margins.left},${margins.top + 300})`) .attr('height', visHeight) .attr('width', visWidth) playerGraph.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxisP) playerGraph.append('g').call(yAxisP) playerGraph.append('text') .attr('transform', `translate(${-margins.left/2},${visHeightP/2}) rotate(270)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('No. of Players') .attr('fill', 'black') playerGraph.append('text') .attr('transform', `translate(${visWidthP/2},${visHeightP + margins.top})`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('Year') .attr('fill', 'black') const linesP = playerGraph.append('g') linesP.append('path') .attr('d', lineGenP(q3_data['Players'][0][1])) .attr('stroke', '#fdb462') .attr('fill', 'None') .attr('stroke-width', 2) linesP.append('path') .attr('d', lineGenP(q3_data['Players'][1][1])) .attr('stroke', '#80b1d3') .attr('fill', 'None') .attr('stroke-width', 2) let visHeightS = maxHeight - margins.top - margins.bottom - 300 let visWidthS = (maxWidth/2 - margins.left - margins.right) const xScaleS = d3.scaleLinear() .domain([1890,2022]) .range([0, visWidthS]) const yScaleS = d3.scaleLinear() .domain([0,50]) .range([visHeightS, 0]) const xAxisS = d3.axisBottom(xScaleS) .tickFormat(d3.format('d')) const yAxisS = d3.axisLeft(yScaleS).ticks(8) .tickFormat(d3.format('d')) const lineGenS = d3.line() .x(d => xScaleS(d[0])) .y(d => yScaleS(d[1])) const sportsGraph = svg.append('g') .attr('transform', `translate(${margins.left + (maxWidth/2)},${margins.top + 300})`) .attr('height', visHeightS) .attr('width', visWidthS) sportsGraph.append('g') .attr('transform', `translate(0,${visHeightS})`) .call(xAxisS) sportsGraph.append('g').call(yAxisS) sportsGraph.append('text') .attr('transform', `translate(${-margins.left/2},${visHeightP/2}) rotate(270)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('No. of Sports') .attr('fill', 'black') sportsGraph.append('text') .attr('transform', `translate(${visWidthP/2},${visHeightP + margins.top})`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('Year') .attr('fill', 'black') const linesS = sportsGraph.append('g') linesS.append('path') .attr('d', lineGenS(q3_data['Sports'][0][1])) .attr('stroke', '#fdb462') .attr('fill', 'None') .attr('stroke-width', 2) linesS.append('path') .attr('d', lineGenS(q3_data['Sports'][1][1])) .attr('stroke', '#80b1d3') .attr('fill', 'None') .attr('stroke-width', 2) return svg.node() }3f:Ta7e,{ const maxHeight = 450 const maxWidth = 940 let margins = { 'left' : 70, 'right' : 10, 'top': 50, 'bottom' : 10 } let visHeight = maxHeight - margins.top - margins.bottom let visWidth = maxWidth - margins.left - margins.right const xScale = d3.scaleBand() .domain(years) .range([0, visWidth]) .padding(0.2) const yScale = d3.scaleBand() .domain(d3.map(highVarCountries, row => row[0])) .range([0,visHeight]) .padding(0.3) const xAxis = d3.axisTop(xScale) .tickFormat(d3.format('d')) const yAxis = d3.axisLeft(yScale) const svg = d3.create('svg') .attr('height', maxHeight) .attr('width', maxWidth) const graph = svg.append('g') .attr('transform', `translate(${margins.left}, ${margins.top})`) .attr('height', visHeight) .attr('width', visWidth) graph.append('text') .attr('transform', `translate(${-margins.left/2},${visHeight/2}) rotate(270)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Countries') .attr('fill', 'black') graph.append('text') .attr('transform', `translate(${visWidth/2},${ - margins.top/2})`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('Year') .attr('fill', 'black') const colorScale =d3.scaleSequentialPow() .exponent(0.4) .domain(medalsExtent) .interpolator(d3.interpolateBlues) .unknown('#eeeeee') .nice() const grid = graph.append('g') grid.append('g') .selectAll('line') .data(medalByCountry) .join('line') .attr('x1', 0) .attr('y1', row => yScale(row[0]) + yScale.bandwidth() + 2) .attr('x2', visWidth) .attr('y2', row => yScale(row[0]) + yScale.bandwidth() + 2) .attr('stroke', "#eeeeee") .attr('stroke-width', 2) grid.append('g') .selectAll('line') .data(years) .join('line') .attr('x1', row => xScale(row) + xScale.bandwidth() + 2) .attr('y1', 0) .attr('x2', row => xScale(row) + xScale.bandwidth() + 2) .attr('y2', visHeight) .attr('stroke', "#eeeeee") .attr('stroke-width', 2) graph.append('g').call(yAxis) graph.append('g').call(xAxis) const countries = graph.append('g').selectAll('g') .data(medalByCountry) .join('g') .attr('transform', row =>{ console.log(`translate(0,${yScale(row[0])})`) return `translate(0,${yScale(row[0])})` } ) const rects = countries.append('g') rects.selectAll('rect') .data(row => { console.log(row[1]) return row[1] }) .join('rect') .attr('x', row => xScale(row[0])) .attr('y', 0) .attr('height',yScale.bandwidth()) .attr('width', row => xScale.bandwidth()) .attr('fill', row => colorScale(row[1])) return svg.node() }40:T15bc,{ const maxHeight = 450 const maxWidth = 940 const margins = { 'left' : 50, 'right' : 50, 'top' : 75, 'bottom' : 50 } const visHeight = maxHeight - margins.top - margins.bottom const visWidth = maxWidth - margins.left - margins.right const svg = d3.create('svg') .attr('height', maxHeight) .attr('width', maxWidth) const graph = svg.append('g') .attr('transform', `translate(${margins.left}, ${margins.top})`) .attr('height', visHeight) .attr('width', visWidth) const excellenceDataObj = Object.fromEntries(excellenceData) const topCountriesOfSport = d3.map( excellenceDataObj[sportDropDown], row => row[0]) let medalsBySportByCountryByTypeExent = Array.from(excellenceDataMedalDetails.get(sportDropDown)) medalsBySportByCountryByTypeExent = d3.map( medalsBySportByCountryByTypeExent, countryRow => { let res = d3.map( Array.from(countryRow[1]), yearRow => { return [...yearRow[1].values()] } ) return res } ) medalsBySportByCountryByTypeExent = d3.map( medalsBySportByCountryByTypeExent, row => { let temp = [] d3.map(row, subrow => { temp = temp.concat(subrow) return 0 }) return temp }) let temp = [] temp = d3.map(medalsBySportByCountryByTypeExent, row => { temp = temp.concat(row) console.log(temp) return temp }) console.log(medalsBySportByCountryByTypeExent) console.log(temp) medalsBySportByCountryByTypeExent = d3.extent(temp[temp.length-1]) console.log(medalsBySportByCountryByTypeExent) let circleIR = 1 let circleOR = 6 let circleRadiusScaler = d3.scalePow() .exponent(0.2) .domain(medalsBySportByCountryByTypeExent) .range([circleIR, circleOR]) const legend = svg.append('g') let legSizes = [[medalsBySportByCountryByTypeExent[0],1], [parseInt((medalsBySportByCountryByTypeExent[0] + medalsBySportByCountryByTypeExent[1])*0.25), 2], [parseInt((medalsBySportByCountryByTypeExent[0] + medalsBySportByCountryByTypeExent[1])*0.75), 3], [medalsBySportByCountryByTypeExent[1], 4]] legend.append('g') .append('text') .attr('x', 45) .attr('y', 15) .attr('text-anchor', 'left') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .attr('font-size', 15) .text('No. of Medals') legend.append('g').selectAll('circle') .data(legSizes) .join('circle') .attr('cx', row => row[1]*50) .attr('cy', 40) .attr('r', row => circleRadiusScaler(row[0])) .attr('fill', 'steelblue') legend.append('g').selectAll('text') .data(legSizes) .join('text') .attr('x', row => row[1]*50) .attr('y', 58) .attr('font-size', 10) .attr('text-anchor', 'middle') .attr('fill', 'black') .text(row => row[0]) const yScale = d3.scaleBand() .domain(topCountriesOfSport) .range([0, visHeight]) const xScale = d3.scaleLinear() .domain(d3.extent(years)) .range([0,visWidth]) .nice() const yAxis = d3.axisLeft(yScale) const xAxis = d3.axisBottom(xScale) .ticks(10) .tickFormat(d3.format('d')) let xDiff = xScale(years[0] + 2)-xScale(years[0]) let gridYears = [] for(let i=years[0]; i<=years[years.length-1]; i=i+2){ gridYears = gridYears.concat([i]) } graph.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) graph.append('g') .selectAll('line') .data(topCountriesOfSport) .join('line') .attr('y1', d => yScale(d)) .attr('y2', d=> yScale(d)) .attr('x1', visWidth) .attr('x2', 0) .attr('stroke', '#eeeeee') graph.append('g') .selectAll('line') .data(gridYears) .join('line') .attr('x1', d => xScale(d) - xDiff/2) .attr('x2', d=> xScale(d) - xDiff/2) .attr('y1', visHeight) .attr('y2', 0) .attr('stroke', '#eeeeee') graph.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) const points = graph.append('g') const countryLevel = points.selectAll('g') .data(topCountriesOfSport) .join('g') .attr('transform', row => `translate(0,${yScale(row) + yScale.bandwidth()/2})`) const countryYearLevel = countryLevel.selectAll('g') .data(noc => d3.map(years, year => [noc, year])) .join('g') .attr('transform', row => `translate(${xScale(row[1])}, 0)`) countryYearLevel.selectAll('circle') .data( nocYear => d3.map( ['Gold', 'Silver', 'Bronze'], medal => [nocYear[0], nocYear[1], medal] ) ) .join('circle') .attr('transform', row => { let y = 0; switch(row[2]){ case 'Gold' : y = - yScale.bandwidth()*(1/5) break; case 'Silver' : y = 0 break; case 'Bronze' : y = yScale.bandwidth()*(1/5) break; } return `translate(0,${y})` }) .attr('r', row => { console.log(row) if( [...excellenceDataMedalDetails.get(sportDropDown).get(row[0]).keys()].includes(row[1]) ){ console.log(excellenceDataMedalDetails.get(sportDropDown).get(row[0])) if([...excellenceDataMedalDetails.get(sportDropDown).get(row[0]).get(row[1]).keys()].includes(row[2])){ console.log(excellenceDataMedalDetails.get(sportDropDown).get(row[0]).get(row[1])) return circleRadiusScaler(excellenceDataMedalDetails.get(sportDropDown).get(row[0]).get(row[1]).get(row[2])) } } return 0 }) .attr('fill', row => medalColorScale(row[2])) return svg.node() } 41:T781,{ const margin = {left: 30, right: 30, top: 30, bottom: 30}; const visWidth = 600; const visHeight = 600; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const nodeRadius = 15; const simulation = d3.forceSimulation(nodesForce) .force('link', d3.forceLink(linksForce).id(d => d.id)) .force('center', d3.forceCenter(visWidth / 2, visHeight / 2)) .force('manyBody', d3.forceManyBody().strength(-700)) .force('collision', d3.forceCollide(nodeRadius)); const lineWidth = d3.scaleLinear() .domain([0, rivals[0].weight]) .range([0, 5]); const lineColor = d3.scaleSequential() .domain([0, rivals[0].weight]) .interpolator(d3.interpolateHcl('yellow', 'red')); const edges = g.append('g') .selectAll('line') .data(linksForce) .join('line') .attr('stroke', d => lineColor(d.weight)) .attr('fill', 'none') .attr('stroke-width', d => lineWidth(d.weight)); const vertices = g.append('g') .selectAll('g') .data(nodesForce) .join('g'); vertices.append('circle') .attr('r', nodeRadius) .attr('fill', 'lightgray'); vertices.append('text') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('font-size', '12') .text(d => d.id); simulation.on('tick', () => {vertices.attr('transform', d => `translate(${d.x}, ${d.y})`); edges.attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }42:Tec6,{ const margin = {left: 80, right: 20, top: 70, bottom: 0}; const cellSize = 15; const innerMargin = {left: 0, right: 100, top: 0, bottom: 0}; const visWidthSummer = cellSize * summerGames.length; const visHeightSummer = cellSize * summerHosts.length; const visWidthWinter = cellSize * winterGames.length; const visHeightWinter = cellSize * winterHosts.length; const svg = d3.create('svg') .attr('width', margin.left + margin.right + (innerMargin.left + innerMargin.right) * 2 + visWidthSummer + visWidthWinter) .attr('height', margin.top + margin.bottom + innerMargin.top + innerMargin.bottom + d3.max([visHeightSummer, visHeightWinter])); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const sx = d3.scaleBand() .domain(summerGames) .range([0, visWidthSummer]) .padding(0.1); const sy = d3.scaleBand() .domain(summerHosts) .range([0, visHeightSummer]) .padding(0.1); const wx = d3.scaleBand() .domain(winterGames) .range([0, visWidthWinter]) .padding(0.1); const wy = d3.scaleBand() .domain(winterHosts) .range([0, visHeightWinter]) .padding(0.1); const color = d3.scaleSequential() .domain([-3, 3]) .interpolator(d3.piecewise(d3.interpolateHsl, ["#8A93E3", 'white', "#9B9F14"])); const round = d => d > 0 ? d3.min([d, 3]) : d3.max([d, -3]); const summer = g.append('g') .attr('transform', `translate(${innerMargin.left}, ${innerMargin.top})`); summer.selectAll('g') .data(s5_summer) .join('g') .attr('transform', d => `translate(0, ${sy(d.country)})`) .selectAll('rect') .data(d => d.data) .join('rect') .attr('x', d => sx(d.game)) .attr('y', 0) .attr('width', sx.bandwidth()) .attr('height', sy.bandwidth()) .attr('fill', d => color(round(d.value))) .attr('stroke', d => d.host === 1 ? "black" : "none"); summer.append('g') .call(d3.axisTop(sx)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .text(d => d.slice(0,4)) .style("text-anchor", "start") .style('dominant-baseline', 'middle') .attr("transform", "translate(5, -5) rotate(-60)"); summer.append('g') .call(d3.axisLeft(sy)) .call(g => g.selectAll('.domain').remove()); summer.append('text') .attr('x', visWidthSummer / 2) .attr('y', -50) .attr("text-anchor", "middle") .attr('dominant-baseline', 'middle') .attr('font-size', 15) .text('Summer Games') const winter = g.append('g') .attr('transform', `translate(${innerMargin.left + visWidthSummer + innerMargin.right + innerMargin.left}, ${innerMargin.top})`); winter.selectAll('g') .data(s5_winter) .join('g') .attr('transform', d => `translate(0, ${wy(d.country)})`) .selectAll('rect') .data(d => d.data) .join('rect') .attr('x', d => wx(d.game)) .attr('y', 0) .attr('width', wx.bandwidth()) .attr('height', wy.bandwidth()) .attr('fill', d => color(round(d.value))) .attr('stroke', d => d.host === 1 ? "black" : "none"); winter.append('g') .call(d3.axisTop(wx)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .text(d => d.slice(0,4)) .style("text-anchor", "start") .style('dominant-baseline', 'middle') .attr("transform", "translate(5, -5) rotate(-60)"); winter.append('g') .call(d3.axisLeft(wy)) .call(g => g.selectAll('.domain').remove()); winter.append('text') .attr('x', visWidthWinter / 2) .attr('y', -50) .attr("text-anchor", "middle") .attr('dominant-baseline', 'middle') .attr('font-size', 15) .text('Winter Games') return svg.node(); }43:T129b,{ const margin = {left: 100, right: 10, top: 30, bottom: 40}; const chartSize = 300; const innerMargin = 200; const radius = 3; const color = {host: "#F54CF0", visitor:"#298EAA" } const svg = d3.create('svg') .attr('width', margin.left + chartSize + innerMargin + chartSize + margin.right) .attr('height', margin.top + chartSize + margin.bottom); const summer = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const sx = d3.scaleLinear() .domain(d3.extent(host_summer.map(d => d.value))).nice() .range([0, chartSize]); const sy = d3.scaleLinear() .domain(d3.extent(host_summer.map(d => d.change))).nice() .range([chartSize, 0]); summer.append('line') .attr('x1', 0) .attr('y1', sy(0)) .attr('x2', chartSize) .attr('y2', sy(0)) .attr('stroke-width', 1) .attr('stroke', 'lightgray'); summer.append('line') .attr('x1', sx(0)) .attr('y1', chartSize) .attr('x2', sx(0)) .attr('y2', 0) .attr('stroke-width', 1) .attr('stroke', 'lightgray'); summer.selectAll('circle') .data(host_summer) .join('circle') .attr('cx', d => sx(d.value)) .attr('cy', d => sy(d.change)) .attr('r', radius) .attr('fill', d => d.host === 1 ? color.host : color.visitor) .attr('opacity', d => d.host === 1 ? 0.9 : 0.5); summer.append('g') .attr('transform', `translate(0, ${chartSize})`) .call(d3.axisBottom(sx)); summer.append('g') .call(d3.axisLeft(sy)); summer.append('text') .attr('x', 10) .attr('y', 10) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 15) .text('Summer Games'); summer.append('text') .attr('x', chartSize / 2) .attr('y', chartSize + 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Number of Medals (normalized)'); summer.append('text') .attr('transform', `translate(-30, ${chartSize / 2}) rotate(-90)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Change from Previous Game'); const winter = svg.append('g') .attr('transform', `translate(${margin.left + chartSize + innerMargin}, ${margin.top})`); const wx = d3.scaleLinear() .domain(d3.extent(host_winter.map(d => d.value))).nice() .range([0, chartSize]); const wy = d3.scaleLinear() .domain(d3.extent(host_winter.map(d => d.change))).nice() .range([chartSize, 0]); winter.append('line') .attr('x1', 0) .attr('y1', wy(0)) .attr('x2', chartSize) .attr('y2', wy(0)) .attr('stroke-width', 1) .attr('stroke', 'lightgray'); winter.append('line') .attr('x1', wx(0)) .attr('y1', chartSize) .attr('x2', wx(0)) .attr('y2', 0) .attr('stroke-width', 1) .attr('stroke', 'lightgray'); winter.selectAll('circle') .data(host_winter) .join('circle') .attr('cx', d => wx(d.value)) .attr('cy', d => wy(d.change)) .attr('r', radius) .attr('fill', d => d.host === 1 ? color.host : color.visitor) .attr('opacity', d => d.host === 1 ? 0.9 : 0.5); winter.append('g') .attr('transform', `translate(0, ${chartSize})`) .call(d3.axisBottom(wx)); winter.append('g') .call(d3.axisLeft(wy)); winter.append('text') .attr('x', 10) .attr('y', 10) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 15) .text('Winter Games'); winter.append('text') .attr('x', chartSize / 2) .attr('y', chartSize + 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Number of Medals (normalized)'); winter.append('text') .attr('transform', `translate(-30, ${chartSize / 2}) rotate(-90)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Change from Previous Game'); const legend = svg.append('g') .attr('transform', `translate(170, 10)`); legend.append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', radius) .attr('fill', color.host); legend.append('text') .attr('x', 10) .attr('y', 0) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Host Countries'); legend.append('circle') .attr('cx', 110) .attr('cy', 0) .attr('r', radius) .attr('fill', color.visitor); legend.append('text') .attr('x', 120) .attr('y', 0) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Non-host Countries'); return svg.node(); }44:T883,{ const margin = {left: 110, right: 300, top: 20, bottom: 0}; const visWidth = 400; const visHeight = 300; const numShow = 20; const data = s6.slice(0, numShow); const svg = d3.create('svg') .attr('width', margin.left + visWidth + margin.right) .attr('height', margin.top + visHeight + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const stack = d3.stack() .keys(["Gold", "Silver", "Bronze"]) .order(d3.stackOrderDscending); const stacked = stack(data); const y = d3.scaleBand() .domain(data.map(d => d.id)) .range([0, visHeight]) .padding(0.2); const x = d3.scaleLinear() .domain([0, data[0].total]) .range([0, visWidth]); g.selectAll('g') .data(stacked) .join('g') .attr('fill', d => medalColorScale(d.key)) .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => x(d[0])) .attr('y', d => y(d.data.id)) .attr('width', d => x(d[1] - d[0])) .attr('height', y.bandwidth()); g.append('g') .call(d3.axisTop(x)) .call(g => g.selectAll('.domain').remove()); g.append('g') .call(d3.axisLeft(y)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .text(d => idToName.filter(dd => dd.id === d)[0].name); g.append('g') .attr('transform', `translate(${visWidth + 10}, 0)`) .call(d3.axisRight(y)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .text(d => olympics_data.filter(dd => dd.ID === d)[0].team); g.append('g') .attr('transform', `translate(${visWidth + 100}, 0)`) .call(d3.axisRight(y)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .text(d => olympics_data.filter(dd => dd.ID === d)[0].sport); g.append('g') .attr('transform', `translate(${visWidth + 220}, 0)`) .call(d3.axisRight(y)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .text(d => { const temp = olympics_data.filter(dd => dd.ID === d && dd.medal != ""); return temp[0].year + " - " + temp[temp.length - 1].year }); return svg.node(); }45:T2a9e,{ const margin = {left: 0, right: 10, top: 70, bottom: 40}; const innerMargin = {left: 50, right: 0, top: 0, bottom: 0}; const plotWidth = (width - margin.left - margin.right - innerMargin.left * 2 - innerMargin.right * 2) / 2; const plotHeight = plotWidth; const visWidth = (innerMargin.left + plotWidth + innerMargin.right) * 2; const visHeight = innerMargin.top + plotHeight + innerMargin.bottom; const s3_use = {}; s3_use.men = s3.men.filter(d => sportsToShow.men.includes(d.sport)); s3_use.women = s3.women.filter(d => sportsToShow.women.includes(d.sport)); const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const weiMen = d3.scaleLinear() .domain(d3.extent(d3.merge(s3_use.men.map(d => [d.weightGold, d.weightAvg])))).nice() .range([0, plotWidth]); const heiMen = d3.scaleLinear() .domain(d3.extent(d3.merge(s3_use.men.map(d => [d.heightGold, d.heightAvg])))).nice() .range([plotHeight, 0]); const weiWomen = d3.scaleLinear() .domain(d3.extent(d3.merge(s3_use.women.map(d => [d.weightGold, d.weightAvg])))).nice() .range([0, plotWidth]); const heiWomen = d3.scaleLinear() .domain(d3.extent(d3.merge(s3_use.women.map(d => [d.heightGold, d.heightAvg])))).nice() .range([plotHeight, 0]); const men = g.append('g') .attr('transform', `translate(${innerMargin.left}, ${innerMargin.top})`); const menLine = men.append('g'); menLine.selectAll('path') .data(s3_use.men) .join('path') .attr('fill', '#8BB7BF') .attr('stroke', 'none') .attr('d', d => triangleGenerator([weiMen(d.weightAvg), heiMen(d.heightAvg)], [weiMen(d.weightGold), heiMen(d.heightGold)], 4)) .on('mouseenter', mouseEntermen) .on('mouseleave', mouseLeavemen); const menAvg = men.append('g'); menAvg.selectAll('circle') .data(s3_use.men) .join('circle') .attr('cx', d => weiMen(d.weightAvg)) .attr('cy', d => heiMen(d.heightAvg)) .attr('r', 4) .attr('fill', '#666559'); const menGold = men.append('g'); menGold.selectAll('circle') .data(s3_use.men) .join('circle') .attr('cx', d => weiMen(d.weightGold)) .attr('cy', d => heiMen(d.heightGold)) .attr('r', 4) .attr('fill', 'gold'); // menLine.selectAll('line') // .data(s3_use.men) // .join('line') // .attr('x1', d => weiMen(d.weightAvg)) // .attr('y1', d => heiMen(d.heightAvg)) // .attr('x2', d => weiMen(d.weightGold)) // .attr('y2', d => heiMen(d.heightGold)) // .attr('stroke', 'lightgray') // .attr('opacity', 0.7) // .attr('stroke-width', 2) // .on('mouseenter', mouseEntermen) // .on('mouseleave', mouseLeavemen); menLine.selectAll('text') .data(s3_use.men) .join('text') .attr('x', d => weiMen((d.weightAvg + d.weightGold) / 2)) .attr('y', d => heiMen((d.heightAvg + d.heightGold) / 2)) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 8) .text(d => d.sport); const tooltipmen = menLine.append('g') .attr('visibility', 'hidden'); const tooltipmenRect = tooltipmen.append('rect') .attr('fill', 'black') .attr('rx', 5) .attr('height', 16); const tooltipmenText = tooltipmen.append('text') .attr('fill', 'white') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 8); function mouseEntermen(event, d) { // d3.select(this) // .attr('stroke-width', 3) // .attr('stroke', 'black'); d3.select(this) .attr('fill', '#0EBFE5'); tooltipmenText.text(d.sport); tooltipmenText.attr('x', 0); tooltipmenText.attr('y', 0); tooltipmenText.attr('font-size', 12) const labelWidthmen = tooltipmenText.node().getComputedTextLength() + 6; tooltipmenRect.attr('width', labelWidthmen); tooltipmenRect.attr('x', -labelWidthmen / 2); tooltipmenRect.attr('y', -8) const xPos = weiMen((d.weightAvg + d.weightGold) / 2); const yPos = heiMen((d.heightAvg + d.heightGold) / 2); tooltipmen.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeavemen(event, d) { // d3.select(this) // .attr('stroke-width', 2) // .attr('stroke', 'lightgray'); d3.select(this) .attr('fill', '#8BB7BF'); tooltipmen .attr('visibility', 'hidden'); } men.append('g') .call(d3.axisLeft(heiMen)); men.append('g') .attr('transform', `translate(0, ${plotHeight})`) .call(d3.axisBottom(weiMen)); men.append('text') .attr('x', plotWidth / 2) .attr('y', 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 18) .text('Men Olympians'); men.append('text') .attr('x', plotWidth / 2) .attr('y', plotHeight + 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Weight (kg)'); men.append('text') .attr('transform', `translate(-40, ${plotHeight / 2}) rotate(-90)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Height (cm)'); const women = g.append('g') .attr('transform', `translate(${innerMargin.left + plotWidth + innerMargin.right + innerMargin.left}, ${innerMargin.top})`); const womenLine = women.append('g'); womenLine.selectAll('path') .data(s3_use.women) .join('path') .attr('fill', '#8BB7BF') .attr('stroke', 'none') .attr('d', d => triangleGenerator([weiWomen(d.weightAvg), heiWomen(d.heightAvg)], [weiWomen(d.weightGold), heiWomen(d.heightGold)], 4)) .on('mouseenter', mouseEnterwomen) .on('mouseleave', mouseLeavewomen); const womenAvg = women.append('g'); womenAvg.selectAll('circle') .data(s3_use.women) .join('circle') .attr('cx', d => weiWomen(d.weightAvg)) .attr('cy', d => heiWomen(d.heightAvg)) .attr('r', 4) .attr('fill', '#666559'); const womenGold = women.append('g'); womenGold.selectAll('circle') .data(s3_use.women) .join('circle') .attr('cx', d => weiWomen(d.weightGold)) .attr('cy', d => heiWomen(d.heightGold)) .attr('r', 4) .attr('fill', 'gold'); // womenLine.selectAll('line') // .data(s3_use.women) // .join('line') // .attr('x1', d => weiWomen(d.weightAvg)) // .attr('y1', d => heiWomen(d.heightAvg)) // .attr('x2', d => weiWomen(d.weightGold)) // .attr('y2', d => heiWomen(d.heightGold)) // .attr('stroke', 'lightgray') // .attr('opacity', 0.7) // .attr('stroke-width', 2) // .on('mouseenter', mouseEnterwomen) // .on('mouseleave', mouseLeavewomen); womenLine.selectAll('text') .data(s3_use.women) .join('text') .attr('x', d => weiWomen((d.weightAvg + d.weightGold) / 2)) .attr('y', d => heiWomen((d.heightAvg + d.heightGold) / 2)) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 8) .text(d => d.sport); const tooltipwomen = womenLine.append('g') .attr('visibility', 'hidden'); const tooltipwomenRect = tooltipwomen.append('rect') .attr('fill', 'black') .attr('rx', 5) .attr('height', 16); const tooltipwomenText = tooltipwomen.append('text') .attr('fill', 'white') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 8); function mouseEnterwomen(event, d) { // d3.select(this) // .attr('stroke-width', 3) // .attr('stroke', 'black'); d3.select(this) .attr('fill', '#0EBFE5'); tooltipwomenText.text(d.sport); tooltipwomenText.attr('x', 0); tooltipwomenText.attr('y', 0); tooltipwomenText.attr('font-size', 12) const labelWidthwomen = tooltipwomenText.node().getComputedTextLength() + 6; tooltipwomenRect.attr('width', labelWidthwomen); tooltipwomenRect.attr('x', -labelWidthwomen / 2); tooltipwomenRect.attr('y', -8) const xPos = weiWomen((d.weightAvg + d.weightGold) / 2); const yPos = heiWomen((d.heightAvg + d.heightGold) / 2); tooltipwomen.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeavewomen(event, d) { // d3.select(this) // .attr('stroke-width', 2) // .attr('stroke', 'lightgray'); d3.select(this) .attr('fill', '#8BB7BF'); tooltipwomen .attr('visibility', 'hidden'); } women.append('g') .call(d3.axisLeft(heiWomen)); women.append('g') .attr('transform', `translate(0, ${plotHeight})`) .call(d3.axisBottom(weiWomen)); women.append('text') .attr('x', plotWidth / 2) .attr('y', 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 18) .text('Women Olympians'); women.append('text') .attr('x', plotWidth / 2) .attr('y', plotHeight + 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Weight (kg)'); women.append('text') .attr('transform', `translate(-40, ${plotHeight / 2}) rotate(-90)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', 12) .text('Height (cm)'); const legend = svg.append('g') .attr('transform', `translate(100, 0)`); // legend.append('line') // .attr('x1', 5) // .attr('y1', 5) // .attr('x2', 5) // .attr('y2', 40) // .attr('stroke', 'lightgray') // .attr('opacity', 0.7) // .attr('stroke-width', 2); legend.append('path') .attr('fill', '#8BB7BF') .attr('stroke', 'none') .attr('d', d => triangleGenerator([5, 5], [5, 40], 4)); legend.append('circle') .attr('cx', 5) .attr('cy', 5) .attr('r', 4) .attr('fill', 'gray'); legend.append('circle') .attr('cx', 5) .attr('cy', 40) .attr('r', 4) .attr('fill', 'gold'); legend.append('text') .attr('x', 10) .attr('y', 5) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 8) .text('Average of All Athletes'); legend.append('text') .attr('x', 10) .attr('y', 40) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 8) .text('Average of Gold Medalists'); return svg.node(); }46:T1992,{ const margin = {left: 0, right: 10, top: 90, bottom: 0}; const visWidth = 900; const nameWidth = 130; const numSports = 7; const ageExtent = [15, 45]; const innerMargin = 10; const cellSize = (visWidth - nameWidth) / (ageExtent[1] - ageExtent[0]); const visHeight = cellSize * (1 + numSports + 1 + 1 + 1 + numSports) + 2 * innerMargin; const radius = d3.scaleSqrt() .domain([0, 0.25]) .range([0, cellSize / 2]); const svg = d3.create('svg') .attr('width', margin.left + visWidth + margin.right) .attr('height', margin.top + visHeight + margin.bottom); const legend = svg.append('g') .attr('transform', `translate(${cellSize / 2}, 0)`); legend.append('text') .attr('x', 0) .attr('y', 20) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 15) .text("The Proportion of the Medals by Age"); const ledprop = [0.25, 0.15, 0.05]; const colorLegend = d3.scaleSequential() .domain([0, 0.25]) .interpolator(d3.interpolateHcl("white", "#1797ED")); const ledpos = d3.scaleLinear() .domain(d3.extent(ledprop)) .range([50 * ledprop.length + 30, 30]); legend.selectAll('g') .data(ledprop) .join('g') .attr('transform', d => `translate(${ledpos(d)}, 50)`) .append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', d => radius(d)) .attr('fill', d => colorLegend(d)); legend.selectAll('g') .data(ledprop) .join('g') .append('text') .attr('x', d => radius(d) + 5) .attr('y', 0) .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('font-size', 10) .text(d => d); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleLinear() .domain(ageExtent) .range([0, visWidth - nameWidth]); const colorBelow = d3.scaleSequential() .domain([0, 0.25]) .interpolator(d3.interpolateHcl("white", "#3BA62C")); const titleBelow = g.append('g') .attr('transform', `translate(0, ${0 * cellSize})`); titleBelow.append('text') .attr('x', 10) .attr('y', cellSize / 2) .attr('text-anchor', 'start') .attr('dominant-baseline', 'text-after-edge') .attr('font-size', 15) .text('Top ' + numSports + " the Younger the Better Sports"); const below_mat = s4_mat.slice(0, numSports); const ybelow = d3.scaleBand() .domain(below_mat.map(d => d[0])) .range([0, cellSize * numSports]); const labelBelow = g.append('g') .attr('transform', `translate(0, ${1 * cellSize})`); labelBelow.selectAll('text') .data(below_mat) .join('text') .attr('x', nameWidth - 10) .attr('y', d => ybelow(d[0]) + cellSize / 2) .attr('text-anchor', 'end') .attr('dominant-baseline', 'middle') .attr('font-size', 10) .text(d => d[0]); const athletesBelow = g.append('g') .attr('transform', `translate(${nameWidth}, ${1 * cellSize})`); athletesBelow.selectAll('g') .data(below_mat) .join('g') .attr('transform', d => `translate(0, ${ybelow(d[0])})`) .selectAll('circle') .data(d => d[1].filter(dd => dd[0] >= ageExtent[0] && dd[0] <= ageExtent[1])) .join('circle') .attr('cx', d => x(d[0])) .attr('cy', cellSize / 2) .attr('r', d => radius(d[1])) .attr('fill', d => colorBelow(d[1])); athletesBelow.append('g') .call(d3.axisTop(x)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .style('font-size', 8); const colorAll = d3.scaleSequential() .domain([0, 0.25]) .interpolator(d3.interpolateHcl("white", "#1797ED")); const titleAll = g.append('g') .attr('transform', `translate(0, ${(1 + numSports) * cellSize + innerMargin})`); titleAll.append('text') .attr('x', 10) .attr('y', cellSize / 2) .attr('text-anchor', 'start') .attr('dominant-baseline', 'text-after-edge') .attr('font-size', 15) .text('All Medalists Average'); const athletesAll = g.append('g') .attr('transform', `translate(${nameWidth}, ${(1 + numSports + 1) * cellSize + innerMargin})`); athletesAll.selectAll('circle') .data(s4_mat.filter(d => d[0] === "All")[0][1] .filter(dd => dd[0] >= ageExtent[0] && dd[0] <= ageExtent[1])) .join('circle') .attr('cx', d => x(d[0])) .attr('cy', cellSize / 2) .attr('r', d => radius(d[1])) .attr('fill', d => colorAll(d[1])); athletesAll.append('g') .call(d3.axisTop(x)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .style('font-size', 8); const colorAbove = d3.scaleSequential() .domain([0, 0.25]) .interpolator(d3.interpolateHcl("white", "#D16CCA")); const titleAbove = g.append('g') .attr('transform', `translate(0, ${(1 + 1 + 1 + numSports) * cellSize + innerMargin * 2})`); titleAbove.append('text') .attr('x', 10) .attr('y', cellSize / 2) .attr('text-anchor', 'start') .attr('dominant-baseline', 'text-after-edge') .attr('font-size', 15) .text('Top ' + numSports + " the Experienced the Better Sports"); const above_mat = s4_mat.slice(s4_mat.length - numSports, s4_mat.length); const yabove = d3.scaleBand() .domain(above_mat.map(d => d[0])) .range([0, cellSize * numSports]); const labelAbove = g.append('g') .attr('transform', `translate(0, ${(1 + 1 + 1 + numSports + 1) * cellSize + innerMargin * 2})`); labelAbove.selectAll('text') .data(above_mat) .join('text') .attr('x', nameWidth - 10) .attr('y', d => yabove(d[0]) + cellSize / 2) .attr('text-anchor', 'end') .attr('dominant-baseline', 'middle') .attr('font-size', 10) .text(d => d[0]); const athletesAbove = g.append('g') .attr('transform', `translate(${nameWidth}, ${(1 + 1 + 1 + numSports + 1) * cellSize + innerMargin * 2})`); athletesAbove.selectAll('g') .data(above_mat) .join('g') .attr('transform', d => `translate(0, ${yabove(d[0])})`) .selectAll('circle') .data(d => d[1].filter(dd => dd[0] >= ageExtent[0] && dd[0] <= ageExtent[1])) .join('circle') .attr('cx', d => x(d[0])) .attr('cy', cellSize / 2) .attr('r', d => radius(d[1])) .attr('fill', d => colorAbove(d[1])); athletesAbove.append('g') .call(d3.axisTop(x)) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .style('font-size', 8); return svg.node(); }47:T1149,{ const maxHeight = 600 const maxWidth = 900 let margins = { 'left' : 70, 'right' : 10, 'top': 10, 'bottom' : 50 } let visHeight = maxHeight - margins.top - margins.bottom let visWidth = maxWidth - margins.left - margins.right const xScale = d3.scaleBand() .domain(years) .range([0, visWidth]) .padding(0.2) const yScale = d3.scaleLinear() .domain([0,2700]) .range([visHeight,0]) const xAxis = d3.axisBottom(xScale) .tickFormat(d3.format('d')) const yAxis = d3.axisLeft(yScale) const lineDraw = d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1])) const svg = d3.create('svg') .attr('height', maxHeight) .attr('width', maxWidth) const graph = svg.append('g') .attr('height', visHeight) .attr('width', visWidth) .attr('transform', `translate(${margins.left}, ${margins.top})`) graph.append('g').call(yAxis) graph.append('g').call(xAxis).attr('transform', `translate(0,${visHeight})`) graph.append('text') .attr('transform', `translate(${-margins.left/2},${visHeight/2}) rotate(270)`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('No. of Participants') .attr('fill', 'black') graph.append('text') .attr('transform', `translate(${visWidth/2},${visHeight + margins.top + margins.bottom/2})`) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'center') .text('Year') .attr('fill', 'black') const lines = graph.append('g') .selectAll('path') .data(sportParticipation) .join('path') .attr('transform', `translate(${ xScale.bandwidth()/2},0)`) .attr('d', row => { console.log(row[1]) return lineDraw(row[1]) }) .attr('stroke', row => highVarSports.includes(row[0]) ? 'red' : '#D3D3D3') .attr('fill', 'None') .attr('stroke-width', 2) graph.append('g').selectAll('text') .data(sportParticipation) .join('text') .attr('x', row => ['Athletics','Swimming', 'Gymnastics', 'Cross Country Skiing','Shooting'].includes(row[0])? xScale(row[1][row[1].length-2][0]): ['Cycling', 'Alpine Skiing','Biathlon'].includes(row[0]) ? xScale(row[1][5][0]) : 0) .attr('y', row => ['Athletics','Swimming', 'Gymnastics', 'Cross Country Skiing', 'Shooting'].includes(row[0])? yScale(row[1][row[1].length-2][1]): ['Cycling', 'Alpine Skiing','Biathlon'].includes(row[0]) ? yScale(row[1][5][1]) : 0) .text(row => highVarSports.includes(row[0])? row[0]:'') .attr('text-anchor', row => ['Cycling', 'Alpine Skiing', 'Biathlon'].includes(row[0])? 'start' : 'end') .attr('style', 'background-color:gray') .attr('font-size', 12) lines.on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); // create tooltip const tooltip = graph.append('g') .attr('visibility', 'hidden'); const tooltipHeight = 16; // add a rectangle to the tooltip to serve as a background const tooltipRect = tooltip.append('rect') .attr('fill', '#d9d9d9') .attr('height', tooltipHeight); // add a text element to the tooltip to contain the label const tooltipText = tooltip.append('text') .attr('fill', '#black') .attr('font-family', 'cambria') .attr('font-size', 12) .attr('y', 2) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') function mouseEnter(event, d) { // make the line bolder d3.select(this) .attr('stroke-width', 4); // update the label's text and get its width tooltipText.text(d[0]); const labelWidth = tooltipText.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRect.attr('width', labelWidth + 6); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = xScale(d[1][parseInt(d[1].length/2)][0]); const yPos = yScale(d[1][parseInt(d[1].length/2)][1]) - tooltipHeight / 2; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { // reset the stroke-width of the line d3.select(this) .attr('stroke-width', 2) // make the tooltip invisible tooltip .attr('visibility', 'hidden'); } return svg.node() }48:T6c2,olympics_data_ = { return d3.csv("https://raw.githubusercontent.com/satsushi0/InfoVis/main/athlete_events_firsthalf.csv" , d => ({ID: +d.ID, age: +d.Age, height: +d.Height, weight: +d.Weight, gender: d.Event.indexOf("Men's") != -1 ? "male" : "female", team: d.Team, NOC: d.NOC, games: d.Games, year: +d.Year, season: d.Season, city: d.City, sport: d.Sport, event: d.Event, medal: d.Medal})).then( (data_first) => { return d3.csv("https://raw.githubusercontent.com/satsushi0/InfoVis/main/athlete_events_secondhalf.csv" , d => ({ID: +d.ID, age: +d.Age, height: +d.Height, weight: +d.Weight, gender: d.Event.indexOf("Men's") != -1 ? "male" : "female", team: d.Team, NOC: d.NOC, games: d.Games, year: +d.Year, season: d.Season, city: d.City, sport: d.Sport, event: d.Event, medal: d.Medal})).then( (data_second) => { console.log(data_first) const data = data_first.concat(data_second); return data; })}) } 49:T4db,excellenceData = { let unsortedExc = d3.rollups( olympics_data, group => d3.filter(group, row => row.medal!="").length, row => row.sport, row => row.NOC) let sortedExc = d3.map(unsortedExc, row => [ row[0], d3.filter( d3.sort(row[1], (a,b) => d3.descending(a[1], b[1])).slice(0,5), d => d[1]!=0) ] ) let medalsCountryYear = d3.rollup( d3.filter(olympics_data, row => row.medal!=""), group => [... new Set(d3.map(group, row => row.year))], row => row.sport, row => row.NOC ) console.log(medalsCountryYear) let finalExec = d3.map( sortedExc, row => [ row[0], d3.map(row[1], innerRow => { console.log(row) console.log(innerRow) return [innerRow[0], innerRow[1], Object.fromEntries(d3.map(years, year =>[ year , 1 ? medalsCountryYear.get(row[0]).get(innerRow[0]).includes(year) : 0 ]))] }) ] ) finalExec = d3.sort( finalExec, (a,b) => d3.descending(sportsSortedAccParticipants[a[0]], sportsSortedAccParticipants[b[0]]) ) return finalExec } 4a:T4d5,rivals = { const data = []; for (let i = 0; i < medalCountries.length - 1; i++) { for (let j = i + 1; j < medalCountries.length; j++) { const obj = {}; obj.source = medalCountries[i]; obj.target = medalCountries[j]; obj.weight = 0; data.push(obj); } } const rival = d3.merge(d3.rollups(olympics_data.filter(d => d.medal != ""), group => Array.from(new Set(group.map(d => d.team))), d => d.year, d => d.event) .map(d => d[1])).map(d => d[1]); for (let i = 0; i < rival.length; i++) { if (rival[i].length === 2) { const t = rival[i].sort(); data.filter(d => d.source === t[0] && d.target === t[1])[0].weight += 1; } else if (rival[i].length === 3) { const t = rival[i].sort(); data.filter(d => d.source === t[0] && d.target === t[1])[0].weight += 1; data.filter(d => d.source === t[0] && d.target === t[2])[0].weight += 1; data.filter(d => d.source === t[1] && d.target === t[2])[0].weight += 1; } } data.sort((a, b) => d3.descending(a.weight, b.weight)) return data.filter(d => d.weight > 0); }4b:T84b,cityToCountry = [{city: "Athina", country: "Greece"}, {city: "Paris", country: "France"}, {city: "St. Louis", country: "United States"}, {city: "London", country: "Great Britain"}, {city: "Stockholm", country: "Sweden"}, {city: "Antwerpen", country: "Belgium"}, {city: "Chamonix", country: "France"}, {city: "Amsterdam", country: "Netherlands"}, {city: "Sankt Moritz", country: "Switzerland"}, {city: "Los Angeles", country: "United States"}, {city: "Lake Placid", country: "United States"}, {city: "Berlin", country: "Germany"}, {city: "Garmisch-Partenkirchen", country: "Germany"}, {city: "Helsinki", country: "Finland"}, {city: "Oslo", country: "Norway"}, {city: "Cortina d'Ampezzo", country: "Italy"}, {city: "Melbourne", country: "Australia"}, {city: "Squaw Valley", country: "United States"}, {city: "Roma", country: "Italy"}, {city: "Innsbruck", country: "Austria"}, {city: "Tokyo", country: "Japan"}, {city: "Mexico City", country: "Mexico"}, {city: "Grenoble", country: "France"}, {city: "Munich", country: "West Germany"}, {city: "Sapporo", country: "Japan"}, {city: "Montreal", country: "Canada"}, {city: "Moskva", country: "Soviet Union"}, {city: "Sarajevo", country: "Yugoslavia"}, {city: "Calgary", country: "Canada"}, {city: "Seoul", country: "South Korea"}, {city: "Barcelona", country: "Spain"}, {city: "Albertville", country: "France"}, {city: "Lillehammer", country: "Norway"}, {city: "Atlanta", country: "United States"}, {city: "Nagano", country: "Japan"}, {city: "Sydney", country: "Australia"}, {city: "Salt Lake City", country: "United States"}, {city: "Torino", country: "Italy"}, {city: "Beijing", country: "China"}, {city: "Vancouver", country: "Canada"}, {city: "Sochi", country: "Russia"}, {city: "Rio de Janeiro", country: "Brazil"}]4c:T5e0,s5_summer = { const data = []; for (let i = 0; i < summerHosts.length; i++) { const obj = {}; obj.country = summerHosts[i]; const arr = []; for (let j = 0; j < summerGames.length; j++) { const obj2 = {}; obj2.game = summerGames[j]; const temp = olympics_data.filter(d => d.team === summerHosts[i] && d.games === summerGames[j] && (d.medal === "Gold" || d.medal === "Silver" || d.medal === "Bronze")) obj2.medals = d3.sum(d3.rollups(temp, group => Array.from(new Set(group.map(d => d.medal))).length, d => d.event).map(d => d[1])) obj2.host = 0; if (obj2.medals != 0) { const city = olympics_data.filter(d => d.team === summerHosts[i] && d.games === summerGames[j])[0].city; if (cityToCountry.filter(d => d.city === city)[0].country === summerHosts[i]) { obj2.host = 1; } } arr.push(obj2); } obj.data = arr; data.push(obj); } for (let i = 0; i < data.length; i++) { let mean = d3.mean(data[i].data.map(d => d.medals)); let std = d3.deviation(data[i].data.map(d => d.medals)); for (let j = 0; j < data[i].data.length; j++) { data[i].data[j].value = (data[i].data[j].medals - mean) / std; } } return data; }4d:T5e0,s5_winter = { const data = []; for (let i = 0; i < winterHosts.length; i++) { const obj = {}; obj.country = winterHosts[i]; const arr = []; for (let j = 0; j < winterGames.length; j++) { const obj2 = {}; obj2.game = winterGames[j]; const temp = olympics_data.filter(d => d.team === winterHosts[i] && d.games === winterGames[j] && (d.medal === "Gold" || d.medal === "Silver" || d.medal === "Bronze")) obj2.medals = d3.sum(d3.rollups(temp, group => Array.from(new Set(group.map(d => d.medal))).length, d => d.event).map(d => d[1])) obj2.host = 0; if (obj2.medals != 0) { const city = olympics_data.filter(d => d.team === winterHosts[i] && d.games === winterGames[j])[0].city; if (cityToCountry.filter(d => d.city === city)[0].country === winterHosts[i]) { obj2.host = 1; } } arr.push(obj2); } obj.data = arr; data.push(obj); } for (let i = 0; i < data.length; i++) { let mean = d3.mean(data[i].data.map(d => d.medals)); let std = d3.deviation(data[i].data.map(d => d.medals)); for (let j = 0; j < data[i].data.length; j++) { data[i].data[j].value = (data[i].data[j].medals - mean) / std; } } return data; }4e:T485,idToName = [{id: 67046, name: "Larysa Latynina"}, {id: 4198, name: "Nikolai Andrianov"}, {id: 11951, name: "Ole Einar Bjørndalen"}, {id: 57998, name: "Sawao Kato"}, {id: 35550, name: "Birgit Fischer"}, {id: 23426, name: "Natalie Coughlin"}, {id: 21402, name: "Viktor Chukarin"}, {id: 18826, name: "Věra Čáslavská"}, {id: 11642, name: "Matt Biondi"}, {id: 33557, name: "Irving Baxter"}, {id: 39726, name: "Aladár Gerevich"}, {id: 58489, name: "Ágnes Keleti"}, {id: 5700, name: "Polina Astakhova"}, {id: 28790, name: "Nellie Kim"}, {id: 9747, name: "Stefania Belmondo"}, {id: 45039, name: "Gary Hall Jr."}, {id: 11943, name: "Marit Bjørgen"}, {id: 39077, name: "Giulio Gaudini"}, {id: 54647, name: "Sixten Jernberg"}, {id: 58702, name: "Akinori Nakayama"}, {id: 94406, name: "Michael Phelps"}, {id: 74420, name: "Edoardo Mangiarotti"}, {id: 89187, name: "Takashi Ono"}, {id: 109161, name: "Boris Shakhlin"}, {id: 87390, name: "Paavo Nurmi"}, {id: 121258, name: "Jenny Thompson"}, {id: 119922, name: "Ryan Lochte"}, {id: 85286, name: "Alexei Nemov"}, {id: 70965, name: "Dara Torres"}, {id: 89706, name: "Carl Osburn"}, {id: 113912, name: "Mark Spitz"}]4f:T40e,sportsToShow = { const data = {}; const arr_m = []; for (let i = 0; i < s3.men.length; i++) { let gap = Math.abs((s3.men[i].weightGold / s3.men[i].weightAvg - 1) * (s3.men[i].heightGold / s3.men[i].heightAvg - 1)); arr_m.push({sport: s3.men[i].sport, gap: gap}); } arr_m.sort((a, b) => d3.descending(a.gap, b.gap)); data.men = arr_m; const arr_w = []; for (let i = 0; i < s3.women.length; i++) { let gap = Math.abs((s3.women[i].weightGold / s3.women[i].weightAvg - 1) * (s3.women[i].heightGold / s3.women[i].heightAvg - 1)); arr_w.push({sport: s3.women[i].sport, gap: gap}); } arr_w.sort((a, b) => d3.descending(a.gap, b.gap)); data.women = arr_w; // const ret = Array.from(new Set(d3.merge([data.men.map(d => d.sport).slice(0,numEvents), // data.women.map(d => d.sport).slice(0,numEvents)]))); const ret = {}; ret.men = data.men.map(d => d.sport).slice(0,numEvents); ret.women = data.women.map(d => d.sport).slice(0,numEvents); return ret; }50:T414,s4_mat = { const data = d3.rollups(olympics_data.filter(d => d.age != 0) .filter(d => d.medal === "Gold" || d.medal === "Silver" || d.medal === "Bronze"), group => group.length, d => d.sport, d => d.age); data.push(["All", d3.rollups(olympics_data.filter(d => d.age != 0) .filter(d => d.medal === "Gold" || d.medal === "Silver" || d.medal === "Bronze"), group => group.length, d => d.age)]); const ret = data.map(d => [...d]); for (let i = 0; i < ret.length; i++) { let medals = 0; let sum = 0; for (let j = 0; j < ret[i][1].length; j++) { medals += data[i][1][j][1]; sum += data[i][1][j][0] * data[i][1][j][1]; } for (let j = 0; j < ret[i][1].length; j++) { ret[i][1][j][1] /= medals; } ret[i].push(sum / medals); ret[i].push(medals); } ret.sort((a, b) => d3.ascending(a[2], b[2])); return ret.filter(d => d[3] > 20) }51:T6491,ignore = 0 // //SecondGraph // { // const maxHeight = 1800 // const maxWidth = 950 // let margins = { // 'left' : 4, // 'right' : 0, // 'top': 0, // 'bottom' : 4 // } // let barGHeight = 100 // let barGWidth = 40 // let nMedalsExtent = d3.extent(medals, row => d3.max([row.Gold, row.Silver, row.Bronze])) // let countryToMedals = Object.fromEntries(d3.map(medals, row => [row['Team/NOC'], d3.sum([row.Gold, row.Silver, row.Bronze])])) // let barGXScale = d3.scaleBand() // .domain(['Gold', 'Silver', 'Bronze']) // .range([0,barGWidth]) // let barGYScale = d3.scaleLinear() // .domain([0,200]) // .range([0, barGHeight]) // let europeMaxHeight = 900 // let europeMaxWidth = 550 // let europeVisHeight = europeMaxHeight - margins.top - margins.bottom // let europeVisWidth = europeMaxWidth - margins.left - margins.right // let europeProjection = d3.geoMercator().center([ 15, 55 ]) // .scale([ width / 1.5 ]) // .translate([ europeVisWidth / 2, europeVisHeight / 2 ]) // const euroPath = d3.geoPath().projection(europeProjection) // const geoJsonUrl = "https://gist.githubusercontent.com/spiker830/3eab0cb407031bf9f2286f98b9d0558a/raw/7edae936285e77be675366550e20f9166bed0ed5/europe_features.json" // const europe = await d3.json(geoJsonUrl) // const countoFeature = Object.fromEntries(d3.map(europe.features, row => [row.properties.name, row])) // //--------------------------------------------------------------------------------------------------------------------------------------------- // let americasMaxHeight = 700 // let americasMaxWidth = 400 // let americasVisHeight = americasMaxHeight - margins.top - margins.bottom // let americasVisWidth = americasMaxWidth - margins.left - margins.right // let americasProjection = d3.geoMercator().center([ -105, 16 ]) // .scale([ width / 5.5 ]) // .translate([ americasVisWidth / 2, americasVisHeight / 2 ]) // const americasPath = d3.geoPath().projection(americasProjection) // const americasGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/americas.geo.json" // const americas = await d3.json(americasGeoJsonUrl) // const countoFeatureAmericas = Object.fromEntries(d3.map(americas.features, row => [row.properties.name, row])) // //----------------------------------------------------------------------------------------------------------------------------------------------- // let africaMaxHeight = 700 // let africaMaxWidth = 400 // let africaVisHeight = africaMaxHeight - margins.top - margins.bottom // let africaVisWidth = africaMaxWidth - margins.left - margins.right // let africaProjection = d3.geoMercator().center([ 15,-10 ]) // .scale([ width / 3 ]) // .translate([ africaVisWidth / 2, africaVisHeight / 2 ]) // const africaPath = d3.geoPath().projection(africaProjection) // const africaGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/africa.geo.json" // const africa = await d3.json(africaGeoJsonUrl) // const countoFeatureAfrica = Object.fromEntries(d3.map(africa.features, row => [row.properties.name, row])) // //------------------------------------------------------------------------------------------------------------------------------------------- // let asiaMaxHeight = 700 // let asiaMaxWidth = 550 // let asiaVisHeight = asiaMaxHeight - margins.top - margins.bottom // let asiaVisWidth = asiaMaxWidth - margins.left - margins.right // let asiaProjection = d3.geoMercator().center([85,30]) // .scale([ width / 3.5 ]) // .translate([ asiaVisWidth / 2, asiaVisHeight / 2 ]) // const asiaPath = d3.geoPath().projection(asiaProjection) // const asiaGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/asia.geo.json" // const asia = await d3.json(asiaGeoJsonUrl) // const countoFeatureAsia = Object.fromEntries(d3.map(asia.features, row => [row.properties.name, row])) // //------------------------------------------------------------------------------------------------------------------------------------------- // let oceaniaMaxHeight = 700 // let oceaniaMaxWidth = 600 // let oceaniaVisHeight = oceaniaMaxHeight - margins.top - margins.bottom // let oceaniaVisWidth = oceaniaMaxWidth - margins.left - margins.right // let oceaniaProjection = d3.geoMercator().center([160,-45]) // .scale([ width / 3]) // .translate([ oceaniaVisWidth / 2, oceaniaVisHeight / 2 ]) // const oceaniaPath = d3.geoPath().projection(oceaniaProjection) // const oceaniaGeoJsonUrl = "https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/australia.geo.json" // const oceania = await d3.json(oceaniaGeoJsonUrl) // const countoFeatureOceania = Object.fromEntries(d3.map(oceania.features, row => [row.properties.name, row])) // /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // const svg = d3.create('svg') // .attr('height', maxHeight) // .attr('width', maxWidth) // const euroMap = svg.append('g') // euroMap.append('text') // .attr('x', 25) // .attr('y', 25) // .attr('font-size', 22) // .text('Europe') // euroMap.append('rect') // .attr('x', 0) // .attr('y', 0) // .attr('height', europeVisHeight) // .attr('width', europeVisWidth) // .attr('stroke', 'black') // .attr('fill', 'None') // const euroOutlines = euroMap.append('g') // euroOutlines.selectAll('path') // .data(europe['features']) // .join('path') // .attr('d', row => euroPath(row)) // .attr('stroke', 'white') // .attr('fill', '#eeeeee') // .attr('opacity', 0.6) // .on('mouseenter', mouseEnter) // .on('mouseleave', mouseLeave); // // create tooltip // const tooltip = euroMap.append('g') // .attr('visibility', 'hidden'); // const tooltipHeight = 16; // // add a rectangle to the tooltip to serve as a background // const tooltipRect = tooltip.append('rect') // .attr('fill', 'black') // .attr('rx', 5) // .attr('height', tooltipHeight); // // add a text element to the tooltip to contain the label // const tooltipText = tooltip.append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 12) // .attr('y', 2) // offset it from the edge of the rectangle // .attr('x', 3) // offset it from the edge of the rectangle // .attr('dominant-baseline', 'hanging') // function mouseEnter(event, d) { // d3.select(this) // .attr('stroke', 'black'); // // update the label's text and get its width // tooltipText.text(d.properties.name); // const labelWidth = tooltipText.node().getComputedTextLength(); // // set the width of the tooltip's background rectangle // // to match the width of the label, plus some extra space // tooltipRect.attr('width', labelWidth + 6); // // move the tooltip to the position of the circle (offset by a bit) // // and make the tooltip visible // const xPos = euroPath.centroid(d)[0] + 15; // const yPos = euroPath.centroid(d)[1] + 5; // tooltip.attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeave(event, d) { // d3.select(this) // .attr('stroke', 'white'); // tooltip // .attr('visibility', 'hidden'); // } // const euroPoints = euroMap.append('g') // const medalsGroup = euroPoints.selectAll('g') // .data(d3.filter(medals, row => Object.keys(countoFeature).includes(row['Team/NOC']))) // .join('g') // .attr('transform', row => `translate( // ${euroPath.centroid(countoFeature[row['Team/NOC']])[0]} // ,${euroPath.centroid(countoFeature[row['Team/NOC']])[1]} // )`) // medalsGroup.append('rect') // .attr('x', barGXScale('Gold') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Gold)) // .attr('height', row => barGYScale(row.Gold)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','gold') // medalsGroup.append('rect') // .attr('x', barGXScale('Silver') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Silver)) // .attr('height', row => barGYScale(row.Silver)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Silver') // medalsGroup.append('rect') // .attr('x', barGXScale('Bronze') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Bronze)) // .attr('height', row => barGYScale(row.Bronze)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Brown') // // medalsGroup.append('text') // // .attr('x',-27) // // .attr('y',7.5) // // .attr('text-anchor', 'center') // // .attr('font-size', 12) // // .attr('dominant-baseline', 'middle') // // .attr('fill','black') // // .text( row => row.Gold) // // medalsGroup.append('text') // // .attr('x',-12) // // .attr('y',7.5) // // .attr('text-anchor', 'center') // // .attr('font-size', 12) // // .attr('dominant-baseline', 'middle') // // .attr('fill','black') // // .text( row => row.Silver) // // medalsGroup.append('text') // // .attr('x',3) // // .attr('y',7.5) // // .attr('text-anchor', 'center') // // .attr('dominant-baseline', 'middle') // // .attr('font-size', 12) // // .attr('fill','white') // // .text( row => row.Bronze) // //------------------------------------------------------------------------------------------------------------------------------- // const americasMap = svg.append('g') // .attr('transform', `translate(${europeMaxWidth},0)`) // americasMap.append('text') // .attr('x', americasVisWidth-25) // .attr('y', 25) // .attr('font-size', 22) // .attr('text-anchor', 'end') // .text('Americas') // americasMap.append('rect') // .attr('x', 0) // .attr('y', 0) // .attr('height', americasVisHeight) // .attr('width', americasVisWidth) // .attr('stroke', 'black') // .attr('fill', 'None') // const americasOutlines = americasMap.append('g') // americasOutlines.selectAll('path') // .data(americas['features']) // .join('path') // .attr('d', row => americasPath(row)) // .attr('stroke', 'white') // .attr('fill', '#d3d3d3') // .attr('opacity', 0.6) // .on('mouseenter', mouseEnterAm) // .on('mouseleave', mouseLeaveAm); // // create tooltip // const tooltipAm = americasMap.append('g') // .attr('visibility', 'hidden'); // const tooltipHeightAm = 16; // // add a rectangle to the tooltip to serve as a background // const tooltipRectAm = tooltipAm.append('rect') // .attr('fill', 'black') // .attr('rx', 5) // .attr('height', tooltipHeightAm); // // add a text element to the tooltip to contain the label // const tooltipTextAm = tooltipAm.append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 12) // .attr('y', 2) // offset it from the edge of the rectangle // .attr('x', 3) // offset it from the edge of the rectangle // .attr('dominant-baseline', 'hanging') // function mouseEnterAm(event, d) { // d3.select(this) // .attr('stroke', 'black'); // // update the label's text and get its width // tooltipTextAm.text(d.properties.name); // const labelWidthAm = tooltipTextAm.node().getComputedTextLength(); // // set the width of the tooltip's background rectangle // // to match the width of the label, plus some extra space // tooltipRectAm.attr('width', labelWidthAm + 6); // // move the tooltip to the position of the circle (offset by a bit) // // and make the tooltip visible // const xPos = americasPath.centroid(d)[0] + 15; // const yPos = americasPath.centroid(d)[1] + 5; // tooltipAm.attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeaveAm(event, d) { // d3.select(this) // .attr('stroke', 'white'); // tooltipAm // .attr('visibility', 'hidden'); // } // const americasPoints = americasMap.append('g') // const medalsGroupAmericas = americasPoints.selectAll('g') // .data(d3.filter(medals, row => Object.keys(countoFeatureAmericas).includes(row['Team/NOC']))) // .join('g') // .attr('transform', row => `translate( // ${americasPath.centroid(countoFeatureAmericas[row['Team/NOC']])[0]} // ,${americasPath.centroid(countoFeatureAmericas[row['Team/NOC']])[1]} // )`) // medalsGroupAmericas.append('rect') // .attr('x', barGXScale('Gold') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Gold)) // .attr('height', row => barGYScale(row.Gold)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','gold') // medalsGroupAmericas.append('rect') // .attr('x', barGXScale('Silver') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Silver)) // .attr('height', row => barGYScale(row.Silver)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Silver') // medalsGroupAmericas.append('rect') // .attr('x', barGXScale('Bronze') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Bronze)) // .attr('height', row => barGYScale(row.Bronze)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Brown') // //---------------------------------------------------------------------------------------------------------------------------------------- // const africaMap = svg.append('g') // .attr('transform', `translate(${europeMaxWidth},${americasMaxHeight})`) // africaMap.append('text') // .attr('x', africaVisWidth-25) // .attr('y', 25) // .attr('font-size', 22) // .attr('text-anchor', 'end') // .text('Africa') // africaMap.append('rect') // .attr('x', 0) // .attr('y', 0) // .attr('height', africaVisHeight) // .attr('width', africaVisWidth) // .attr('stroke', 'black') // .attr('fill', 'None') // const africaOutlines = africaMap.append('g') // africaOutlines.selectAll('path') // .data(africa['features']) // .join('path') // .attr('d', row => africaPath(row)) // .attr('stroke', 'white') // .attr('fill', '#d3d3d3') // .attr('opacity', 0.6) // .on('mouseenter', mouseEnterAf) // .on('mouseleave', mouseLeaveAf); // // create tooltip // const tooltipAf = africaMap.append('g') // .attr('visibility', 'hidden'); // const tooltipHeightAf = 16; // // add a rectangle to the tooltip to serve as a background // const tooltipRectAf = tooltipAf.append('rect') // .attr('fill', 'black') // .attr('rx', 5) // .attr('height', tooltipHeightAf); // // add a text element to the tooltip to contain the label // const tooltipTextAf = tooltipAf.append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 12) // .attr('y', 2) // offset it from the edge of the rectangle // .attr('x', 3) // offset it from the edge of the rectangle // .attr('dominant-baseline', 'hanging') // function mouseEnterAf(event, d) { // d3.select(this) // .attr('stroke', 'black'); // // update the label's text and get its width // tooltipTextAf.text(d.properties.name); // const labelWidthAf = tooltipTextAf.node().getComputedTextLength(); // // set the width of the tooltip's background rectangle // // to match the width of the label, plus some extra space // tooltipRectAf.attr('width', labelWidthAf + 6); // // move the tooltip to the position of the circle (offset by a bit) // // and make the tooltip visible // const xPos = africaPath.centroid(d)[0] + 15; // const yPos = africaPath.centroid(d)[1] + 5; // tooltipAf.attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeaveAf(event, d) { // d3.select(this) // .attr('stroke', 'white'); // tooltipAf // .attr('visibility', 'hidden'); // } // const africaPoints = africaMap.append('g') // const medalsGroupAfrica = africaPoints.selectAll('g') // .data(d3.filter(medals, row => Object.keys(countoFeatureAfrica).includes(row['Team/NOC']))) // .join('g') // .attr('transform', row => `translate( // ${africaPath.centroid(countoFeatureAfrica[row['Team/NOC']])[0]} // ,${africaPath.centroid(countoFeatureAfrica[row['Team/NOC']])[1]} // )`) // medalsGroupAfrica.append('rect') // .attr('x', barGXScale('Gold') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Gold)) // .attr('height', row => barGYScale(row.Gold)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','gold') // medalsGroupAfrica.append('rect') // .attr('x', barGXScale('Silver') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Silver)) // .attr('height', row => barGYScale(row.Silver)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Silver') // medalsGroupAfrica.append('rect') // .attr('x', barGXScale('Bronze') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Bronze)) // .attr('height', row => barGYScale(row.Bronze)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Brown') // //--------------------------------------------------------------------------------------------------------------------------------------- // const asiaMap = svg.append('g') // .attr('transform', `translate(0,${europeMaxHeight})`) // asiaMap.append('text') // .attr('x', 25) // .attr('y', 25) // .attr('font-size', 22) // .text('Asia') // asiaMap.append('rect') // .attr('x', 0) // .attr('y', 0) // .attr('height', asiaVisHeight) // .attr('width', asiaVisWidth) // .attr('stroke', 'black') // .attr('fill', 'None') // const asiaOutlines = asiaMap.append('g') // asiaOutlines.selectAll('path') // .data(asia['features']) // .join('path') // .attr('d', row => asiaPath(row)) // .attr('stroke', 'white') // .attr('fill', '#d3d3d3') // .attr('opacity', 0.6) // .on('mouseenter', mouseEnterAs) // .on('mouseleave', mouseLeaveAs); // // create tooltip // const tooltipAs = asiaMap.append('g') // .attr('visibility', 'hidden'); // const tooltipHeightAs = 16; // // add a rectangle to the tooltip to serve as a background // const tooltipRectAs = tooltipAs.append('rect') // .attr('fill', 'black') // .attr('rx', 5) // .attr('height', tooltipHeightAs); // // add a text element to the tooltip to contain the label // const tooltipTextAs = tooltipAs.append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 12) // .attr('y', 2) // offset it from the edge of the rectangle // .attr('x', 3) // offset it from the edge of the rectangle // .attr('dominant-baseline', 'hanging') // function mouseEnterAs(event, d) { // d3.select(this) // .attr('stroke', 'black'); // // update the label's text and get its width // tooltipTextAs.text(d.properties.name); // const labelWidthAs = tooltipTextAs.node().getComputedTextLength(); // // set the width of the tooltip's background rectangle // // to match the width of the label, plus some extra space // tooltipRectAs.attr('width', labelWidthAs + 6); // // move the tooltip to the position of the circle (offset by a bit) // // and make the tooltip visible // const xPos = asiaPath.centroid(d)[0] + 15; // const yPos = asiaPath.centroid(d)[1] + 5; // tooltipAs.attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeaveAs(event, d) { // d3.select(this) // .attr('stroke', 'white'); // tooltipAs // .attr('visibility', 'hidden'); // } // const asiaPoints = asiaMap.append('g') // const medalsGroupAsia = asiaPoints.selectAll('g') // .data(d3.filter(medals, row => Object.keys(countoFeatureAsia).includes(row['Team/NOC']))) // .join('g') // .attr('transform', row => `translate( // ${asiaPath.centroid(countoFeatureAsia[row['Team/NOC']])[0]} // ,${asiaPath.centroid(countoFeatureAsia[row['Team/NOC']])[1]} // )`) // medalsGroupAsia.append('rect') // .attr('x', barGXScale('Gold') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Gold)) // .attr('height', row => barGYScale(row.Gold)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','gold') // medalsGroupAsia.append('rect') // .attr('x', barGXScale('Silver') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Silver)) // .attr('height', row => barGYScale(row.Silver)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Silver') // medalsGroupAsia.append('rect') // .attr('x', barGXScale('Bronze') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Bronze)) // .attr('height', row => barGYScale(row.Bronze)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Brown') // //--------------------------------------------------------------------------------------------------------------------------------------- // const oceaniaMap = svg.append('g') // .attr('transform', `translate(${europeMaxWidth},${americasMaxHeight + africaMaxHeight})`) // oceaniaMap.append('text') // .attr('x', 25) // .attr('y', 25) // .attr('font-size', 22) // .text('Oceania') // oceaniaMap.append('rect') // .attr('x', 0) // .attr('y', 0) // .attr('height', oceaniaVisHeight) // .attr('width', oceaniaVisWidth) // .attr('stroke', 'black') // .attr('fill', 'None') // const oceaniaOutlines = oceaniaMap.append('g') // oceaniaOutlines.selectAll('path') // .data(oceania['features']) // .join('path') // .attr('d', row => oceaniaPath(row)) // .attr('stroke', 'white') // .attr('fill', '#d3d3d3') // .attr('opacity', 0.6) // .on('mouseenter', mouseEnterO) // .on('mouseleave', mouseLeaveO); // // create tooltip // const tooltipO = oceaniaMap.append('g') // .attr('visibility', 'hidden'); // const tooltipHeightO = 16; // // add a rectangle to the tooltip to serve as a background // const tooltipRectO = tooltipO.append('rect') // .attr('fill', 'black') // .attr('rx', 5) // .attr('height', tooltipHeightO); // // add a text element to the tooltip to contain the label // const tooltipTextO = tooltipO.append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 12) // .attr('y', 2) // offset it from the edge of the rectangle // .attr('x', 3) // offset it from the edge of the rectangle // .attr('dominant-baseline', 'hanging') // function mouseEnterO(event, d, path) { // d3.select(this) // .attr('stroke', 'black'); // // update the label's text and get its width // tooltipTextO.text(d.properties.name); // const labelWidthO = tooltipTextO.node().getComputedTextLength(); // // set the width of the tooltip's background rectangle // // to match the width of the label, plus some extra space // tooltipRectO.attr('width', labelWidthO + 6); // // move the tooltip to the position of the circle (offset by a bit) // // and make the tooltip visible // const xPos = oceaniaPath.centroid(d)[0] + 15; // const yPos = oceaniaPath.centroid(d)[1] + 5; // tooltipO.attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeaveO(event, d) { // d3.select(this) // .attr('stroke', 'white'); // tooltipO // .attr('visibility', 'hidden'); // } // const oceaniaPoints = oceaniaMap.append('g') // const medalsGroupOceania = oceaniaPoints.selectAll('g') // .data(d3.filter(medals, row => Object.keys(countoFeatureOceania).includes(row['Team/NOC']))) // .join('g') // .attr('transform', row => `translate( // ${oceaniaPath.centroid(countoFeatureOceania[row['Team/NOC']])[0]} // ,${oceaniaPath.centroid(countoFeatureOceania[row['Team/NOC']])[1]} // )`) // medalsGroupOceania.append('rect') // .attr('x', barGXScale('Gold') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Gold)) // .attr('height', row => barGYScale(row.Gold)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','gold') // medalsGroupOceania.append('rect') // .attr('x', barGXScale('Silver') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Silver)) // .attr('height', row => barGYScale(row.Silver)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Silver') // medalsGroupOceania.append('rect') // .attr('x', barGXScale('Bronze') - 1.5*barGXScale.bandwidth()) // .attr('y', row => barGHeight - barGYScale(row.Bronze)) // .attr('height', row => barGYScale(row.Bronze)) // .attr('width', barGXScale.bandwidth()) // .attr('fill','Brown') // return svg.node() // }52:[] 38:{"id":"ef9b7590d176427f","slug":"the-olympic-games-a-small-study","title":"The Olympic Games: A Small Study","thumbnail":"d373c9a1dac7bbe50ab7fd071fa807ab6babe8cafe1fc70cf245ebe7ff1c50ca","access_level":"public","create_time":"$D2021-11-24T21:43:40.199Z","update_time":"$D2022-03-01T15:31:45.367Z","view_time":null,"first_public_time":"$D2022-02-08T20:15:33.669Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c72417cd0a253087","login":"satsushi0","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1844,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1d1a1dd4a811a78","login":"satsushi0","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4f0d043e5be5c9af","login":"arjunns","name":"Arjun Siddappa","avatar_url":"https://avatars-next.observableusercontent.com/ab67b11a4284f5b3d38b18c3365ddadd7745c4f1d7f20e21849f2d79767a9ab2","tier":null,"role":"editor"},{"type":"individual","id":"b1d1a1dd4a811a78","login":"satsushi0","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Olympic Games: A Small Study","cells":[{"id":0,"value":"# The Olympic Games: A Small Study","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"Arjun Naga Siddappa (as15840), Atsushi Shimizu (as15106)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"Hello and welcome! We, Arjun and Atsushi want to take you on a journey where we learn about interesting facts and thrilling observations about the Olympics through visualizing data through various graphs! We hope you find it enjoyable! Bon Voyage! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## Olympic Game 2020","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"The Olympics has been one of the most popular sports events in the world. The most recent Olympics were held in Tokyo. I, Atsushi Shimizu, am from Japan, and we have prepared for hosting the Olympics since we were designated as host in 2013. Although it was once postponed for one year, and we couldn't welcome people from other countries due to the pandemic, many people were excited to watch Olympic games. It has been only a few months since the closing ceremony, let us look back how each country performed in the Tokyo 2020 Summer Olympics.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"$${textcolor('This graph is interactive!', d3.schemeTableau10[0])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":994,"value":"Legend(q1ColorScale,\n {'title': 'No. of Medals won in Olympics 2020'}\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"Swatches(medalColorScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"As we can see, athletes from many countries won medals, and some countries like the US, China, Japan, Italy, Germany, France and Australia did extremely well in terms of the number of medals they received.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"## Look how far we've come!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"We were excited to see great athletes compete with each other in 2020 Olympic games, but this is not the first time that talents have butt heads against one another to vie for victory and glory. Starting from way back in 1896, the first Olympic Games was held in Athens, and from then on history is written every four years. What started off as a tournament with a handful of countries in a handful of sports, Olympics has grown larger in scale and reputation. Countries have been coming together in co-operation to compete in and celebrate sports. As a pleasant matter of fact, a number of sports have been adopted into Olympics as well. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"Swatches(\n d3.scaleOrdinal()\n .domain(['Summer Olympics Games', 'Winter Olympic Games'])\n .range(['#fdb462','#80b1d3'])\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"## Top of the World","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"\n13 countries took the stage at Athens in the 1896 Olympics. Today, a total of 206 National Olympic Committees participate in the games. Over the years, countries have sent their athletes out to compete in various sports to achieve international merit and victory. While each country sends out their best of the best, it is always a spectacular battle of skill and talent. Some countries rise to the top with winning numerous events in different sports. Few of them perform consistently well to continue to go home with most medals where as others have improved their performance over time gaining more medals each time. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"Legend(\n d3.scaleSequentialPow()\n .exponent(0.4)\n .domain(medalsExtent)\n .interpolator(d3.interpolateBlues)\n .unknown('#eeeeee')\n .nice(),\n {\n 'title': 'No. of medals won',\n 'ticks': 5\n }\n )\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"## I Do What I Do Best","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"It wouldn't be fair to compare countries in the total number of medals won at the end. Each country has their own flavour and definitely their own favourite sport. Each sport most often than not have few handful of countries always ending up in the finals to cinch that gold to take back home. Not so common sports are usually dominated by those one or two countries that are just too good to be knocked off the pedestal. Such countries perform consistently well in those sports and earn medals each time. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"$${textcolor('This graph is interactive!', d3.schemeTableau10[0])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1079,"value":"viewof sportDropDown = Inputs.select(sports, {'value':'Athletics','label': 'Sport'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"Swatches(medalColorScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"## BFFs (Best Frenemies Forever)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1727,"value":"Now, we understand that some countries are doing well in many sports while other countries have strength for particular sports. For instance, my experience says Scandinavian countries are good at winter sports like skating, African countries are dominant in the track and field, and so on. It may be true that each country's geographical location greatly affects on in what sports they are good at. In addition, many other aspects determines their strength on a certain Olympic event. As a result, there are pairs of countries that are always competing for the gold medal, and pairs that rarely fight over the medals. The graph below shows how many times each pair of countries shared the victory stand.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1588,"value":"$${textcolor('This graph is interactive!', d3.schemeTableau10[0])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"viewof threshold = Inputs.range([1, 100], {value: 20, step: 1, label:'No. of Countries to show: '})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":" This simple network graph above clearly illustrates the friendly rivalry relationships. The US and Great Britain shared the victory stand the most. This may be because these two countries have provided a better environment for athletes based on their economic power since the first Olympics. Also, we can see some clusters. European countries like Great Britain, Germany, France, and Italy are strong in the same sports. Soviet Union, Romania, and Hungary are good in other sports. Finland and Sweden have been good rivals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"## Home Sweet Home","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"So far, we have seen how the Olympics has evolved from a variety of points of view. Now, it is a time to focus on the Olympics as a competition among athletes. Generally speaking, in sports, we distinguish home games from away games. Let's see if playing at a home country has positive impacts on the performance of athletes or not. Below are Heatmaps of the normalized number of medals for a country over the years. Host countries are marked with black borders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"legend({color: d3.scaleSequential()\n .domain([-3, 3])\n .interpolator(d3.piecewise(d3.interpolateHsl, [\"#8A93E3\", 'white', \"#9B9F14\"])),\n title: \"Number of Medals (normalized)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"From the Heatmaps, we can observe mainly two things. Most of the squares surrounded by black frames have a color of yellow-green, and they are darker than the other games. It goes to show that playing on the home ground with cheers from the audience actually push athletes to perform better! Olympics is such an amazing platform that creates special and powerful moments as this between an audience and the player. The same deductions can be made from the scatter plots where we can see different distributions in the number of medals that the athletes attained in their home country.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"## Hold My Medal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"However, playing in the home country is not the only factor that affects athletes' performance. Some athletes are at the top of their game no matter what. Here are the Olympians who have snatched the highest number of medals across different Olympic games, showing outstanding performances no matter where they played. This captures the excellency in sports of the mankind.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"Swatches( medalColorScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"## The Bigger, The Better? You'd Be Surprised!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"We got the two ingredients that make a winner: home base and pure talent. Another factor that we intuitively consider are physical makeup of the athletes. Does height and weight really matter? It may not be as simple to conclude that taller and heavier players have the advantage. Lets take a look at the following charts that show average measurements of participants for that sport and the displacement of average measurements of all the winners in that sport.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"$${textcolor('This graph is interactive!', d3.schemeTableau10[0])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"viewof numEvents = Inputs.range([1, 50], {value: 15, step: 1, label:'No. Of Sports:'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"We can see that being taller and heavier might push one towards success in sports such as Basketball, Swimming, Rugby Sevens etc. But this is not always the case in some sports like Gymnastics, Diving, and Table Tennis, having a shorter and lighter body seems to be the key to success.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"## Is Age Just A Number?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"One more important feature of athletes may be their ages. One's athletic ability develops year by year in one's teens, but gradually decreases in their thirties. On the other hand, athletes pile up experiences and skills over the years. How these affects the chances to get medals in the Olympic games? The following plots shows the relationship between the age of athletes and the number of medals they got. You can see that different sports demonstrate different distributions. In total, the age of 23 is the peak. However, different sports show different patterns, interestingly. While swimmers tend to reach their best performance around the age of 20, curling players are still on top of their game at 30. Sports are more profound than you can imagine. Athletic ability is just one factor that determines the competitiveness of athletes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"## Au Revoir","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"$${textcolor('This graph is interactive!', d3.schemeTableau10[0])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"Swatches(\n d3.scaleOrdinal()\n .domain(['Sport with high change in participants'])\n .range(['red'])\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"Though the max number of participants per country for each sports are limited by the International Olympic Committee, we can see the trend of increase in the number of participants. A contributing factor is countries more prepared and readily sending out their athletes to participate. Many sports have been added while a few discontinued but there are a few that have been seeing a defined increase in participation. The sports highlighted in red are the top sport that have much more participants in the recent years than when they were first inducted in the games. We hope, in the future, the trend continues for other sports as well. Last but not least, Olympics is not only for athletes but for people all over the world. Through sports, we remember the value of sportsmanship, making effort, team working, respecting each other, and so on. We won't forget that since the first Olympic game took place in 1896, one of the important role of Olympics has been promoting peace in the world.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"## APPENDIX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"olympics_data = olympics_data_.sort((a,b) => d3.ascending(a.year,b.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"sports = d3.sort([... new Set(d3.map(olympics_data, row => row.sport))],\n (a,b) => d3.ascending(a,b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"years = d3.sort([... new Set(d3.map(olympics_data, row => row.year))],\n (a,b) => d3.ascending(a,b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"nocToCountry = Object.fromEntries(d3.map(olympics_data, row => [row['NOC'], row['team']]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"countryToNOC = Object.fromEntries(\n [... new Set (\n d3.sort(\n d3.map(olympics_data, row => [\n row['team'].replace(/-\\d*/, ''), row['NOC']]),\n(a,b) => d3.ascending(a[0], b[0])\n)\n )].slice(8))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"countriesNOC = [... new Set(d3.map(olympics_data, row=>row.NOC))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import {Legend,Swatches, swatches, legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"function textcolor(content, style = {}) {\n function yiq(color) {\n const {r, g, b} = d3.rgb(color);\n return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1\n }\n const {\n background,\n color = yiq(background) >= 0.6 ? \"#111\" : \"white\", \n padding = \"0 5px\",\n borderRadius = \"4px\",\n fontWeight = 800,\n ...rest\n } = typeof style === \"string\" ? {background: style} : style;\n return htl.html`${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"### Q1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"medals = {\n let medals = await d3.csv(\"https://raw.githubusercontent.com/arjunnyu/Information-Visualization-Data-Hosting/main/Medals.csv\")\n\n medals = d3.map(medals, row => {\n row.Gold = parseInt(row.Gold)\n row.Silver = parseInt(row.Silver)\n row.Bronze = parseInt(row.Bronze)\n\n return row\n }\n )\n return medals\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"q1ColorScale = d3.scaleSequentialPow()\n.exponent(0.2)\n.domain(o2020MedalsExtent)\n.interpolator(d3.interpolateBlues)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"medalColorScale = d3.scaleOrdinal()\n.domain(['Gold', 'Silver', 'Bronze'])\n.range(['#ffed6f', '#d9d9d9', '#b15928'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"o2020MedalsExtent = d3.extent(medals, row => d3.sum([row.Gold , row.Silver , row.Bronze]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"### Q2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"q3_data = ({\n 'Country' : d3.rollups(d3.sort(olympics_data, row=> row.year), group => [... new Set(d3.map(group, row => row.NOC))].length, row => row.season, row => row.year),\n 'Players' : d3.rollups(d3.sort(olympics_data, row=> row.year), group => [... new Set(d3.map(group, row => row.ID))].length, row => row.season, row => row.year),\n 'Sports' : d3.rollups(d3.sort(olympics_data, row=> row.year), group => [... new Set(d3.map(group, row => row.sport))].length, row => row.season, row => row.year)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"### Q3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"highVarCountries = d3.sort(d3.map(\n d3.rollups(d3.filter(olympics_data, row => row.medal!=''),\n group => group.length,\n d => d.NOC,\n d => d.year),\n row => [row[0],Math.abs(row[1][row[1].length -1 ][1] - row[1][0][1] )]),\n (a,b) => d3.descending(a[1],b[1])).slice(0,22)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"medalByCountry = d3.rollups(\n d3.filter(olympics_data, row => row.medal!='' & d3.map(highVarCountries, row => row[0]).includes(row.NOC)),\n group => group.length,\n d => d.NOC,\n d => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"medalsExtent = d3.extent(d3.flatRollup(d3.filter(olympics_data, row => row.medal!=''),\n group => group.length,\n d => d.NOC,\n d => d.year), row => row[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"### Q4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"sportsSortedAccParticipants = Object.fromEntries(d3.sort(d3.rollups(olympics_data,\n group => group.length,\n row => row.sport),\n (a,b) => d3.descending(a[1],b[1])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"excellenceDataMedalDetails = d3.rollup(\n d3.filter(olympics_data, row => row.medal!=''),\n group => group.length,\n row => row.sport,\n row => row.NOC,\n row => row.year,\n row => row.medal\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"### Q5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"medalCountries = Array.from(new Set(olympics_data.filter(d => d.medal != \"\").map(d => d.team))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"links = rivals.slice(0, threshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"nodes = Array.from(new Set(d3.merge([links.map(d => d.source), \n links.map(d => d.target)]))).map(d => ({id: d}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"nodesForce = nodes.map(d => ({...d}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"linksForce = links.map(d => ({...d}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"### Q6","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"hostCountries = Array.from(new Set(cityToCountry.map(d => d.country)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"summerGames = Array.from(new Set(olympics_data.filter(d => d.games.slice(5,11) === \"Summer\").map(d => d.games))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"winterGames = Array.from(new Set(olympics_data.filter(d => d.games.slice(5,11) === \"Winter\").map(d => d.games))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"summerHosts = Array.from(new Set (olympics_data.filter(d => summerGames.includes(d.games))\n .map(d => cityToCountry.filter(dd => dd.city === d.city)[0].country)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"winterHosts = Array.from(new Set (olympics_data.filter(d => winterGames.includes(d.games))\n .map(d => cityToCountry.filter(dd => dd.city === d.city)[0].country)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"host_summer = {\n const data = [];\n\n for (let i = 0; i < s5_summer.length; i++) {\n for (let j = 0; j < s5_summer[i].data.length; j++) {\n const obj = {};\n obj.country = s5_summer[i].country;\n obj.game = s5_summer[i].data[j].game;\n obj.medals = s5_summer[i].data[j].medals;\n obj.host = s5_summer[i].data[j].host;\n obj.value = s5_summer[i].data[j].value;\n if (j === 0) {\n obj.change = s5_summer[i].data[j].value;\n }\n else {\n obj.change = s5_summer[i].data[j].value - s5_summer[i].data[j - 1].value;\n }\n data.push(obj);\n }\n }\n\n data.sort((a, b) => d3.ascending(a.host, b.host));\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"host_winter = {\n const data = [];\n\n for (let i = 0; i < s5_winter.length; i++) {\n for (let j = 0; j < s5_winter[i].data.length; j++) {\n const obj = {};\n obj.country = s5_winter[i].country;\n obj.game = s5_winter[i].data[j].game;\n obj.medals = s5_winter[i].data[j].medals;\n obj.host = s5_winter[i].data[j].host;\n obj.value = s5_winter[i].data[j].value;\n if (j === 0) {\n obj.change = s5_winter[i].data[j].value;\n }\n else {\n obj.change = s5_winter[i].data[j].value - s5_winter[i].data[j - 1].value;\n }\n data.push(obj);\n }\n }\n\n data.sort((a, b) => d3.ascending(a.host, b.host));\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"### Q7","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"s6 = d3.rollups(olympics_data.filter(d => d.medal === \"Gold\" \n || d.medal === \"Silver\" \n || d.medal === \"Bronze\"),\n group => ({id: group[0].ID,\n Gold: group.filter(d => d.medal === \"Gold\").length,\n Silver: group.filter(d => d.medal === \"Silver\").length,\n Bronze: group.filter(d => d.medal === \"Bronze\").length,\n total: group.length}),\n d => d.ID)\n .sort((a, b) => d3.descending(a[1].total, b[1].total))\n .map(d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"### Q8","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"s1 = olympics_data.filter(d => d.weight != 0 && d.height != 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"s2 = d3.rollups(s1,\n group => ({\n weight: d3.mean(group.map(d => d.weight)),\n height: d3.mean(group.map(d => d.height))\n }),\n d => d.gender,\n d => d.sport)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"s2_gold = d3.rollups(s1.filter(d => d.medal === \"Gold\"),\n group => ({\n weight: d3.mean(group.map(d => d.weight)),\n height: d3.mean(group.map(d => d.height))\n }),\n d => d.gender,\n d => d.sport)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"s3 = {\n const data = {};\n\n const arr_m = [];\n for (let i = 0; i < s2_gold[0][1].length; i++) {\n const obj_m = {};\n obj_m.sport = s2_gold[0][1][i][0];\n obj_m.weightGold = s2_gold[0][1][i][1].weight;\n obj_m.heightGold = s2_gold[0][1][i][1].height;\n obj_m.weightAvg = s2[0][1].filter(d => d[0] === obj_m.sport)[0][1].weight;\n obj_m.heightAvg = s2[0][1].filter(d => d[0] === obj_m.sport)[0][1].height;\n arr_m.push(obj_m);\n }\n data.men = arr_m;\n\n const arr_w = [];\n for (let i = 0; i < s2_gold[1][1].length; i++) {\n const obj_w = {};\n obj_w.sport = s2_gold[1][1][i][0];\n obj_w.weightGold = s2_gold[1][1][i][1].weight;\n obj_w.heightGold = s2_gold[1][1][i][1].height;\n obj_w.weightAvg = s2[1][1].filter(d => d[0] === obj_w.sport)[0][1].weight;\n obj_w.heightAvg = s2[1][1].filter(d => d[0] === obj_w.sport)[0][1].height;\n arr_w.push(obj_w);\n }\n data.women = arr_w;\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"function triangleGenerator(avg, gold, r) {\n const arr = [];\n const x = gold[0] - avg[0];\n const y = gold[1] - avg[1];\n const d = Math.sqrt(x * x + y * y);\n arr.push(gold);\n arr.push([-y / d * r + avg[0], x / d * r + avg[1]]);\n arr.push([y / d * r + avg[0], -x / d * r + avg[1]]);\n arr.push(gold);\n return d3.line()(arr);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"### Q9","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"ageExtent = d3.extent(olympics_data.filter(d => d.medal === \"Gold\" || \n d.medal === \"Silver\" || \n d.medal === \"Bronze\")\n .filter(d => d.age != 0).map(d => d.age))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"### Q10","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"sportParticipation = d3.sort(\n d3.rollups(olympics_data,\n group => group.length,\n d => d.sport,\n d => d.year),\n (a,b) => d3.ascending(a[1][a[1].length-1][1] - a[1][0][1], b[1][b[1].length-1][1] - b[1][0][1])) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"highVarSports = d3.map(sportParticipation, row => row[0]).slice(-8)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 33:null