2b:null 2c:["$","title",null,{"children":"Exploring Female Participation at the Summer Olympics ☀️ | Columbia Data Viz Sp21 | Observable"}] 32:T1965,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var box_height = 175 // for var box_width = 200 // for tool tip textbox var bar_colour = "#2896CE" //"#2896CE" var bar_text_color = grey var text_color = "white" var content_wrap = 26 var title_wrap = 25 var annotation_tooltip_color = yellow //"#FFC456" var annotation_textbox_color = grey //"#FED731" var f = d3.format(".4"); // for formatting floats var bars = svg.append("g") .selectAll("rect") .data(d3.entries(mutable selected_data)) .join("rect") .attr("x", (d, i) => { let yr_idx = actual_summer_years.findIndex(x=> x===d.key) return x(yr_idx) }) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("fill", bar_colour) .attr("width", x.bandwidth()) // add values to center of bar on mouseover .on("mouseover", function(d) { d3.select(this).attr("fill", yellow); // Get this rectangle's x/y values, then augment for the center var xpos = parseFloat(d3.select(this).attr("x")) + x.bandwidth(); var ypos = parseFloat(d3.select(this).attr("y")) + parseFloat(d3.select(this).attr("height"))/2 - 10; // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var h = d3.select(this).attr("height") console.log("height", h) var tgrp = svg.append("g") .attr("id", "valinfo") .attr("transform", (d, i) => `translate(${xpos},${ypos}) rotate(90)`); tgrp.append("text") .attr("x", function (wow) { if (h < 30) { return -20 } else{return bars.attr("width")/2} }) .attr("y", bars.attr("width")/2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "Helvetica") .attr("font-size", `${fontScale(d.value)}px`) .attr("font-weight", "bold") .attr("fill", bar_text_color) .text(`${f(d.value)}%`); }) .on("mouseout", function() { d3.select(this).attr("r", 5) d3.select(this).attr("fill", bar_colour) // Remove the tooltip d3.select("#valinfo").remove(); }) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis) .call(d3.axisLeft(y)); svg.call(yTitle); svg.call(xLabel); //add anotations var annotations = svg.append("g") .attr("class", "annotation"); annotations.selectAll("circle") .data(annotation_data) .enter() .append("circle") .attr("cx", (d, i) => { // console.log("d ",d.year) let idx = actual_summer_years.findIndex(x=>x===d.year) return x(idx) + bars.attr("width")/2 }) .attr("cy", d => { let yval = mutable selected_data[d.year] yval = yval==undefined ? y(0) : y(yval) return yval }) .attr("r", 5) .attr("fill",annotation_tooltip_color) .attr("stroke", "darkblue") .attr('stroke-width', '0.5px') .on("mouseover", function(d) { d3.select(this).attr("r", 8) // Get this circles's x/y values, then augment for the tooltip var xpos = parseFloat(d3.select(this).attr("cx") - box_width / 2); var ypos = parseFloat(d3.select(this).attr("cy")) - box_height - d3.select(this).attr("r") // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", box_width) .attr("height", box_height) .attr("fill", annotation_textbox_color) .attr("opacity", 0.9) .attr("rx", 15) .attr("ry", 15); tgrp.append("text") .attr("x",box_width/2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-family", "Helvetica") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", text_color) .text(`${(d.title)}`) .each(function(d, i) {wrap_text_nchar(d3.select(this), title_wrap)}); tgrp.append("text") .attr("x",box_width*.08) .attr("y", 80) .attr("text-anchor", "left") .attr("font-family", "Helvetica") .attr("font-size", "13px") // .attr("font-weight", "bold") .attr("fill", text_color) .text(`${(d.description)}`) .each(function(d, i) {wrap_text_nchar(d3.select(this), content_wrap)}); }) .on("mouseout", function() { d3.select(this).attr("r", 5) // Remove the tooltip d3.select("#tooltip").remove(); }) // reference line // prepare a helper function let data = [{x:x.range()[0],y:y(50)+0.5},{x:x.range()[1],y:y(50)+0.5}] var lineFunc = d3.line() .x(function(d) { return d.x }) .y(function(d) { return d.y }) // Add the path using this helper function svg.append('path') .attr('d', lineFunc(data)) .attr('stroke', grey) .style("stroke-dasharray", ("3, 3")) .attr('fill', 'none'); return svg.node(); }33:Td1f,md `# Evaluation and Discussion ### 1) Introduction to the Dataset & Visualization In 2020 the Olympic committee announced their commitment to equal representation of the sexes at the 2024 Olympics. To commemorate this milestone and International Women’s Day we selected a Kaggle dataset to facilitate an exploration of female representation in the olympics over the last 120 years, and by geography. ### 2) The Options & Work Split In order to generate ideas, we used the design phases for diverging and converging potential visualizations. Using a miro board we wrote down ideas on sticky notes. We found the idea of gender disparity most compelling to explore. We diverged again, and then narrowed down our ideas to three possible visualizations. We voted on the ones we felt would enable interactive exploration. The overarching concept we ended up with was a narrative of female participation at the Olympics over time & geography, tied in with the bigger picture.

${await FileAttachment("d1.png").image()}

${await FileAttachment("d2.png").image()}

${await FileAttachment("d3.png").image()}

${await FileAttachment("d4.png").image()}

${await FileAttachment("d5.png").image()} Our work was split up focusing on two elements which were the bar chart and the map, and required research to better understand the international history of women's rights. We first split the tasks at the highest level to understand our context and get the two core elements to render in order to get third party opinions. We incrementally generated granular subtasks while incorporating feedback. ### 3) Design and technical challenges A design challenge that we faced was to make the process of selecting a country more interactive. The user could either search for a country using a search bar or having an actual map where they could click and select the country. At the end, we decided to go with a map because we could encode more information into the map, making it a choropleth. One of the technical challenges was working on the map functionality. The implementation of the map that we found did not have the features that we wanted, so we modified a lot of the map’s code to make our interactive graph works as we wanted. Lastly, the dataset was large and processing this each time detracted from the user experience so we pre-processed outside the notebook and imported the data structure. ### 4) User Testing While user testing we realised that users struggled with resetting the map view. Clicking away from the countries was not an intuitive way to zoom out and users tended to zoom out manually. Given more time, we’d add a reset button which would show up on zoom. We also noticed hovering over smaller countries affected the stability of the tooltips, which was distracting. We would want to overlay a Voronoi grid to make selection easier. Finally, one user attempted to select multiple countries by brushing in order to see trends in a specific geography. This is something we’d consider to expand this exploration. ### 5) Resources - D3 - [Map Regional with click callback](https://observablehq.com/@pablo-mayrgundter/map-regional-with-click-callback) - [Color Scales](https://colorbrewer2.org/#type=sequential&scheme=YlGn&n=3) `34:T6d5,// // This is how data_dict above was created // data_dict_new = { // let data_dict = {}; // full dict to be returned // let world_total_female_percent = {}; // actual_summer_years.forEach(year => { // world_total_female_percent[year] = {sum:0,total:0} // }) // let world_female_count = 0; // let world_total_count = 0; // country_list.forEach(country => { // let noc = country2NOC[country] // find NOC value // let noc_female_percent = {}; // actual_summer_years.forEach(year => { // // get data for that NOC and year // let data_noc_year = (data.filter(x => x["NOC"]=== noc & x["Year"]=== year)); // // calculate female count for that NOC and year // let female_count = (data_noc_year.filter(x => x["Sex"]==="F")).length; // // calculate total count for that NOC and year // let total_count = data_noc_year.length; // if (total_count ===0){ // // console.log(noc,year) // noc_female_percent[year] = undefined; // no one participated from , // } // else{ // // console.log(female_count/total_count); // noc_female_percent[year] = 100*female_count/total_count; // } // // add values for world total // world_total_female_percent[year]["sum"] += female_count // world_total_female_percent[year]["total"] += total_count // }) // data_dict[noc] = noc_female_percent; // let world_total_final = {}; // actual_summer_years.forEach(year => { // let sum = world_total_female_percent[year]["sum"] // let tot = world_total_female_percent[year]["total"] // world_total_final[year] = tot>0 ? 100*sum/tot : undefined // }) // data_dict["WORLD"] = world_total_final; // }); // return data_dict; // } 35:T17ca,makeMap = function(dimensions, cb, colorMapFn, makeNoteFn, initFn) { colorMapFn = colorMapFn; const zoom = d3.zoom() .scaleExtent([1, 8]) .on('zoom', zoomed); const svg = d3.create('svg') .attr('viewBox', [0, 0, dimensions.width, dimensions.height]) .style('background-color', colorMapFn('background')) .on('click', reset); const g = svg.append('g').attr('id', 'map'); g.append('g') .attr('cursor', 'pointer') .attr('fill', 'white') .selectAll('path') .data(topojson.feature(world, world.objects.countries).features) .join('path') .attr('d', path) // Create choropleth // If year selected, scale colour by country based on female percentage (fp) .style('fill', d => { let country = d.properties.Terr_Name; if (yearSelected === "None") { return "white" } else { country = map_countries2data_countries[country] || country if (country_list.includes(country)){ // if terrority is in our list of countries let fp = filter_years(data_dict[country2NOC[country]], [yearSelected])[0];//val for country if (fp === undefined) {return "lightgrey"} //undefined means we dont have data for country else { return mapColorScale(fp) } } else {return "lightgrey"} // we dont have any data on this country } }) .on('click', function(d) { mutable mapCountrySelected = d.properties.Terr_Name; mutable selectedCountry = map_countries2data_countries[d.properties.Terr_Name] || d.properties.Terr_Name clicked(d, this); }) // tool tip already exists in map .on('mouseover', function(d) { mutable countryHovered = d.properties.Terr_Name; var countryName = map_countries2data_countries[d.properties.Terr_Name] || d.properties.Terr_Name; var countryNOC = country2NOC[countryName]; // console.log(d.geometry, d3.polygonCentroid(d.geometry.coordinates)) let [[x0, y0], [x1, y1]] = path.bounds(d); var xpos = x0; var ypos = y0; // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); var tool_tip_txt = d.properties.Terr_Name+': '+parseFloat(data_dict[countryNOC][yearSelected]).toFixed(2)+'%' tgrp.append("rect") // .attr("x", d.centroid[0]) // .attr("y", d.centroid[1]) .attr("width", browserText.getWidth(tool_tip_txt,"11px","Helvetica")+37) .attr("height", "22px") .attr("fill", grey) .attr("opacity", "70%") tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("font-family", "Helvetica") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "white") .text(tool_tip_txt); }) .on('mouseout', function(d) { d3.select("#tooltip").remove(); }) .append('title') .text(d => d.properties.Terr_Name); g.append('path') .attr('fill', 'none') .attr('stroke', 'lightgrey') .attr('stroke-linejoin', 'round') .attr('d',path(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))); svg.call(zoom); function reset() { console.log('reset') d3.select('#activeSubject').remove(); svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()) .invert([dimensions.width / 2, dimensions.height / 2]) ); svg.selectAll('path') .style('fill', d => { let country = d.properties.Terr_Name; if (yearSelected === "None") { return "white" } else { country = map_countries2data_countries[country] || country if (country_list.includes(country)){ // if terrority is in our list of countries let fp = filter_years(data_dict[country2NOC[country]], [yearSelected])[0];//val for country if (fp === undefined) {return "lightgrey"} //undefined means we dont have data for country else { return mapColorScale(fp) } } else {return "lightgrey"} // we dont have any data on this country } }) } const cbs = []; function clicked(d, targetElt) { const [[x0, y0], [x1, y1]] = path.bounds(d); d3.event.stopPropagation(); svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity .translate(dimensions.width / 2, dimensions.height / 2) .scale(Math.min(8,0.9 / Math.max((x1 - x0) / dimensions.width, (y1 - y0) / dimensions.height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.mouse(svg.node()) ); for (let i = 0; i < cbs.length; i++) { cbs[i](d.properties, x0, y0, x1, y1, targetElt); } const note = makeNoteFn(d.properties); if (note) { makeAnnotation(note, x0, y0, x1, y1); } } function zoomed() { console.log('zoomed') const { transform } = d3.event; g.attr('transform', transform); g.attr('stroke-width', 1 / transform.k); } const node = svg.node(); node.addClickCallback = cb => {cbs.push(cb);}; if (cb) { node.addClickCallback(cb); } if (initFn) { initFn(g); } return node; }36:T9bd,annotation_data = [{year:"1900", title: "Olympics Accepts Women", description: "The first women\'s events are introduced at the Olympic Games. Just three - sailing, lawn tennis, and golf."}, {year:"1916", title: "WW1 Begins", description: "Austro-Hungarian heir Archduke Franz Ferdinand assassinated, kickstarting the First World War."}, {year:"1920", title: "WW1 Ends. Spanish Flu begins.", description: "Germany signs armistice, bringing an end to WW1. The Spanish Flu infects a third of the world's population."}, {year:"1940", title: "WW2 Begins", description: "Germany invades Poland, kickstarting the Second World War."}, {year:"1944", title: "WW2 Ends", description: "Japan surrenders, bringing an end to WW2."}, {year:"1920", title: "Woman\'s Suffrage Adopted in the US", description: "Three quarters of the state legislatures ratify the Nineteenth Amendment. American Women win full voting rights at a federal level."}, {year:"1948", title: "Commission on the Status of Women formed", description: "In 1946, the Commission on the Status of Women becomes the first global intergovernmental body exclusively dedicated to gender equality" }, {year:"1948", title: "Universal Declaration of Human Rights", description: "This landmark Declaration spells out basic rights and fundamental freedoms that all human beings should enjoy for the first time in human history."}, {year:"1972", title: "Women\'s Rights Activism Becomes Global", description: "The world celebrates the first International Women’s Year, UN Decade for Women and world conference on women in Mexico."}, {year:"1980", title: "CEDAW Written", description: "Convention on the Elimination of All Forms of Discrimination against Women is also dubbed the \"Women\'s Bill of Rights\""}, {year:"2016", title: "Women\'s March", description: "Estimated 3.5-5.5 million people joined a global protest in solidarity for women\'s rights."}, {year:"2020", title: "COVID-19 Pandemic Begins", description: "The COVID-19 Pandemic ravages the world, with most countries having their citizens quarantine at home."}, {year:"2024", title: "Women To Reach Equal Representation at the Olympics", description: "The Olympic Committee announces 2024 Tokyo Olympics to be the first to have 50% woman participation."} ]37:T422,md`## Team Member Contributions: Ravish: - Download, clean & filter dataset - Text alignment & bar hoverbaility (along with viren) - Created dataset of women’s & important historical events - Worked with Viren on choropleth color scale by year - Worked on filtering based on map or dropdown selection - Stylised & applied colour palette Viren: - Organizing data into data structures - Making bar chart interactive: - On-hover display of bar value - On-hover change of color - Interactive tool-tips for historical events (annotations) - Reference line - Turned map to choropleth and made legend (with Ravish) - Worked on filtering based on map or dropdown selection (with ravish) Hector: - Implement initial graph with the the cleaned data - Implemented smart search - Implemented dropdown - Fix selection & de-selection of map - Added on hover feature to the map Kamrul: - Added bar graph with axes - Fixed the size of chart independent of window size - Implemented text wrapping for the tooltips - Organized code and helper cells in Observable ` 38:[{"id":"5ccbf4482d061699b91d55b4c56c9ba4ab47d79889dbcab6af9418a3c9eaa5e61c6d41c90f66d3ab6ed88d4813a64ca8abff2118ba839229d93e8a7d7ece8cf8","href":"https://static.observableusercontent.com/files/5ccbf4482d061699b91d55b4c56c9ba4ab47d79889dbcab6af9418a3c9eaa5e61c6d41c90f66d3ab6ed88d4813a64ca8abff2118ba839229d93e8a7d7ece8cf8","name":"world-atlas-2.json","type":"application/json","lastModified":1615158293640.136,"size":209959},{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1615158293640.136,"size":82031},{"id":"506f750b619f22d0f0af3d1f63cf98110f6f409ef3416cbfb547fdf79a1f9100f9ec7473c4fa32484e16d3fb30e7b0d8101ced1c67ae063ac4772ce5eda6d258","href":"https://static.observableusercontent.com/files/506f750b619f22d0f0af3d1f63cf98110f6f409ef3416cbfb547fdf79a1f9100f9ec7473c4fa32484e16d3fb30e7b0d8101ced1c67ae063ac4772ce5eda6d258","name":"d1.png","type":"image/png","lastModified":1615259404306.418,"size":383592},{"id":"4df816871da595ae1b60d60384adb5943bf4bc541916dce22912a3945beb34a2f4648d38b4b03a86adf8e8f047a7dbd6d938b0aea107ba7153c3de0a69a5d0a8","href":"https://static.observableusercontent.com/files/4df816871da595ae1b60d60384adb5943bf4bc541916dce22912a3945beb34a2f4648d38b4b03a86adf8e8f047a7dbd6d938b0aea107ba7153c3de0a69a5d0a8","name":"d5.png","type":"image/png","lastModified":1615259404084.46,"size":200758},{"id":"1bd9a8a541989360bdd2351d83a4b4790236f11eb812a6332eb128fc1748a4b0ad805cf4ea06873c77253077b70c2f7667bd51c0c7cee762a29aacf6d29e8b0d","href":"https://static.observableusercontent.com/files/1bd9a8a541989360bdd2351d83a4b4790236f11eb812a6332eb128fc1748a4b0ad805cf4ea06873c77253077b70c2f7667bd51c0c7cee762a29aacf6d29e8b0d","name":"d3.png","type":"image/png","lastModified":1615259404055.121,"size":183201},{"id":"33202c4135cb94c344bd2dffd92eb80c73db1a09214011b5d962492cf51e94f03dfb45f52833ead10ba094ac2058caed705f0798a551c2b4d0431b70c7fa85df","href":"https://static.observableusercontent.com/files/33202c4135cb94c344bd2dffd92eb80c73db1a09214011b5d962492cf51e94f03dfb45f52833ead10ba094ac2058caed705f0798a551c2b4d0431b70c7fa85df","name":"d4.png","type":"image/png","lastModified":1615259403981.881,"size":133630},{"id":"6ad837f363f36f44e4f0a9980306ebd70590aabeeb452dddd0242e70993396d1676d7d8db0d0c9b441dba60c884b6b014d3b0ea930f5acaaf1def769fd95487b","href":"https://static.observableusercontent.com/files/6ad837f363f36f44e4f0a9980306ebd70590aabeeb452dddd0242e70993396d1676d7d8db0d0c9b441dba60c884b6b014d3b0ea930f5acaaf1def769fd95487b","name":"d2.png","type":"image/png","lastModified":1615259403934.151,"size":119328},{"id":"779cf182146334b2dee5918d597d285a9a0fa3285ddf934a0627c8d6582ce8577d4568f084e6a4db8e7cb4d214f48eece346e78f2ff255463c7f9b0910fc4ef7","href":"https://static.observableusercontent.com/files/779cf182146334b2dee5918d597d285a9a0fa3285ddf934a0627c8d6582ce8577d4568f084e6a4db8e7cb4d214f48eece346e78f2ff255463c7f9b0910fc4ef7","name":"noc_regions.csv","type":"text/csv","lastModified":1615158293640.136,"size":3595}] 2f:{"id":"3ba29db639f30119","slug":"exploring-female-participation-at-the-summer-olympics","title":"Exploring Female Participation at the Summer Olympics ☀️","thumbnail":"4e9746e37095ae44c5ff4b38a5a6ddf527f32629f873b4b7abcc7ee1f8d0bd7e","access_level":"public","create_time":"$D2021-03-07T23:04:53.640Z","update_time":"$D2021-03-19T01:54:19.373Z","view_time":null,"first_public_time":"$D2021-03-09T04:56:14.825Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":2756,"publish_version":2756,"role":null,"authored":false,"authors":[{"type":"individual","id":"cba500b0589ea806","login":"virenbajaj","name":"Viren Bajaj","avatar_url":"https://avatars-next.observableusercontent.com/80cf1a79d09732137813c2cad0ac77317f78ff3926a49359554a9bffffc1de6f","tier":null}],"members":[{"type":"individual","id":"bfb8c496de88dc0f","login":"chinisko","name":"Hector Liang","avatar_url":"https://avatars-next.observableusercontent.com/9bce6c831240d7106906dd1770b66f266e3582d681e2c612cd4458a45bcee49a","tier":null,"role":"editor"},{"type":"individual","id":"87ae93665ea1c455","login":"kamrulhossain5","name":"Kamrul Hossain","avatar_url":"https://avatars.githubusercontent.com/u/41009619?v=4","tier":null,"role":"editor"},{"type":"individual","id":"3baad0fa1a83eb72","login":"ravishrawal","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f2acb1377d0b85d32583a01cddbfe23838c42c27f5f6c571127c19211db56315","tier":null,"role":"editor"},{"type":"individual","id":"cba500b0589ea806","login":"virenbajaj","name":"Viren Bajaj","avatar_url":"https://avatars-next.observableusercontent.com/80cf1a79d09732137813c2cad0ac77317f78ff3926a49359554a9bffffc1de6f","tier":null,"role":"editor"},{"type":"individual","id":"8d5c31907af563e2","login":"agness","name":"Agnes Chang","avatar_url":"https://avatars-next.observableusercontent.com/93dc0da6b82c79bbfac62dd7a8227381dc4971ba857233bedf1b151a1da950f3","tier":null,"role":"viewer"},{"type":"individual","id":"583e0f52ced3f6df","login":"avivaweinbaum","name":"Aviva Weinbaum","avatar_url":"https://avatars-next.observableusercontent.com/631f73908aa80a976c0204fc6613dd28156613149cffddc939292f992b73332b","tier":null,"role":"viewer"},{"type":"individual","id":"9b9cc3418b0d4862","login":"rounakbera","name":"Rounak Bera","avatar_url":"https://avatars-next.observableusercontent.com/b89f9ef4cb857e6b973863714a1415ced210450439ff628841f43a28ecbfa04e","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Exploring Female Participation at the Summer Olympics ☀️","cells":[{"id":2198,"value":"md `# Exploring Female Participation at the Summer Olympics ☀️`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`*By \\n Kamrul Hossain (kh2857), Hector Jin Fan Liang Chan (hl3169), Viren Bajaj (vb2519), and Ravish Rawal (rr2914)*\n\n--------------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2295,"value":"md `The Olympic Committee announced in 2020 that by the 2024, the games will reach **50% female participation**. \n\nIn this visualization, we explore how the percentage of females in the summer olympics have evolved over the years around the world. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2317,"value":"md `## Global View \nThe world map displays a global picture of percentage of female participants per year. It highlights regions that need to increase female representation to realize the Olympic committee's goal.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2750,"value":"md`**Select a Year from the Slider and a Country from the Map** \n\n*Years when the games weren't held are skipped*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"viewof yearSelected = {\n const slider = d3.sliderBottom()\n .min(d3.min(summerYearsMap))\n .max(d3.max(summerYearsMap))\n .marks(summerYearsMap)\n .width(900)\n .tickFormat(d3.format(\"\"))\n .tickValues(summerYearsMap)\n .handle(\n d3\n .symbol()\n .type(d3.symbolCircle)\n .size(200)())\n .default('2016')\n .on(\"onchange\", () => svg.dispatch(\"input\"));\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-20, -20, 1000, 60])\n .attr(\"width\", 1000)\n .attr(\"height\", 60)\n .call(slider);\n\n return Object.defineProperty(\n svg.node(), \n \"value\", \n {get: () => slider.value()}\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1816,"value":"legend({\n color: mapColorScale,\n title: \"% Female Participation In The Summer Olympics\",\n tickValues:[0, 25, 50, 100]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2625,"value":"md`*Click on the black background to unselect the countries*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"map = \nmakeMap(\n dimensions,\n (clickedCountryProperties, x0, y0, x1, y1, clickedMapElement) => {\n clickedCountries.push(clickedMapElement);\n clickedCountries.forEach(el => {d3.select(el).style('fill', 'white')});\n d3.select(clickedMapElement).style('fill', 'white');\n },\n countryPropertiesForColoring => {\n if (countryPropertiesForColoring == 'background') {\n return \"black\";\n }\n else{\n if (testCountries.hasOwnProperty(countryPropertiesForColoring.properties.Terr_Name)){\n return yellow\n }\n else{\n 'white';\n }\n }\n },\n countryPropertiesForLabels => ({\n title: \"\",\n wrap: 0\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2372,"value":"md`## Country View \\n We can observe the female participation trends per country over the history of the olympics. \n\n### *An Open Question to Ponder*\n\nDid important historical events in the womens rights movements around the world, noted in the chart below, have any impact on female participation trends?\n\n**Select Country** on the map above or choose one from the drop down below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"selector = {\n let div = d3.create('div');\n let selector = div.append('select');\n selector.selectAll(\"option\")\n .data(country_list)\n .enter().append('option')\n .attr('value', d=>d)\n .text(d=>d)\n .property('selected', true);\n selector.on('change', function() {\n console.log('dropdown')\n mutable selectedCountry = this.value\n })\n \n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2304,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require.alias({\n \"d3-array\": \"d3@5\",\n \"d3-axis\": \"d3@5\",\n \"d3-dispatch\": \"d3@5\",\n \"d3-drag\": \"d3@5\",\n \"d3-ease\": \"d3@5\",\n \"d3-scale\": \"d3@5\",\n \"d3-selection\": \"d3@5\",\n \"d3-transition\": \"d3@5\"\n})(\"d3@5\", \"d3-simple-slider@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"import {autoSelect, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1814,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2223,"value":"md `Define Olympic Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"blue = \"#2896CE\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"red = \"#C83034\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"grey = \"#353535\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"yellow = \"#FED731\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"value":"green = \"#159844\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"md `Import csv data which we hosted on GitHub\nData are:\n1. Olympic Data \\n\n *Columns*: ID, Sex, NOC, Games, Year, Season, City, Event, Medal\n2. Olympic Country Codes \$NOC\$ and corresponding regions \\n\n *Columns*: NOC, region, notes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = d3.csv('https://raw.githubusercontent.com/ravishrawal/olympic-data-set/main/athlete_events_trunc.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"noc_data = d3.csvParse(await FileAttachment(\"noc_regions.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"data_dict = d3.json('https://raw.githubusercontent.com/virenbajaj/olympic-data-dict/main/data_dict_new.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"//Dict to map country name to NOC\ncountry2NOC = {\nlet country2NOC = {};\n// Populate dict\nnoc_data.forEach(x => {\n if (x[\"notes\"] === \"\") {\n country2NOC[x[\"region\"]] = x[\"NOC\"]\n }\n else {\n country2NOC[x[\"notes\"]] = x[\"NOC\"]\n };\n});\ncountry2NOC[\"WORLD\"] = \"WORLD\" // add for world total data \nreturn country2NOC\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"map_countries2data_countries = {\n let map_countries_to_data_countries = {\n \"United States of America\": \"USA\",\n \"Bolivia\":\"Boliva\",\n \"United Kingdom\": \"UK\",\n \"Czechia\":\"Czech Republic\"\n }\n return map_countries_to_data_countries\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"dimensions = ({\n width: 1000,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"testCountries = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"clickedCountries = ([])","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"mutable mapCountrySelected = \"N/A\" // Country selected from the map ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1767,"value":"mutable selectedCountry = \"WORLD\" // Country selected from the dropdown ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"mutable countryHovered = \"N/A\" // Country hovered on by the map","pinned":false,"hidden":false,"mode":"ojs"},{"id":2399,"value":"mapColorScale = d3.scaleLinear([\"0\", \"25\",\"50\",\"100\"]).domain([0, 25, 50, 100]).range([\"red\", \"#ffffbf\", \"darkgreen\", \"darkgreen\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2542,"value":"//https://stackoverflow.com/a/35373030\nbrowserText = (function () {\n var canvas = document.createElement('canvas'),\n context = canvas.getContext('2d');\n\n /**\n * Measures the rendered width of arbitrary text given the font size and font face\n * @param {string} text The text to measure\n * @param {number} fontSize The font size in pixels\n * @param {string} fontFace The font face (\"Arial\", \"Helvetica\", etc.)\n * @returns {number} The width of the text\n **/\n function getWidth(text, fontSize, fontFace) {\n context.font = fontSize + 'px ' + fontFace;\n return context.measureText(text).width;\n }\n\n return {\n getWidth: getWidth\n };\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"makeAnnotation = (note, x0, y0, x1, y1) => {\n d3.select('#activeSubject').remove();\n const fontSize = d3\n .scaleLinear()\n .range([0, 3])\n .clamp(true);\n const wrap = d3\n .scaleLinear()\n .range([0, 10])\n .clamp(true);\n let ratio = window.innerWidth / 200;\n\n d3.select('#map')\n .append('g')\n .attr('class', 'annotation-group')\n .attr('id', 'activeSubject')\n .style('font-size', fontSize(ratio))\n .call(\n d3_svg_annotation\n .annotation()\n .textWrap(wrap(ratio))\n .notePadding(5)\n .annotations([\n {\n note: note,\n x: (x0 + x1) / 2,\n y: (y0 + y1) / 2,\n dx: -10,\n dy: -10\n }\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"projection = d3\n .geoNaturalEarth1()\n .rotate([0, 0])\n .precision(0.1)\n .fitSize([dimensions.width, dimensions.height], { type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"world = FileAttachment(\"world-atlas-2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"d3_svg_annotation = require('d3-svg-annotation')","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"// Years from 1896 to 2020 in steps of 4 yrs\nsummerYears = {\n let ar = []\n for(let i=1896;i<2024; i+=4){\n ar.push(String(i))\n }\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2647,"value":"// Years from 1896 to 2020 in steps of 4 yrs\nsummerYearsMap = {\n let ar = []\n for(let i=1896;i<2024; i+=4){\n if( i==2020 || i==1944 || i==1940 || i==1916){\n continue;\n }\n ar.push(String(i))\n }\n return ar;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1068,"value":"// All years for summer olympics for which we have data\nactual_summer_years = {\n let years = [];\n data.forEach(x => {\n if (x[\"Season\"]===\"Summer\"){\n years.push(x[\"Year\"])\n }\n })\n let unique_years = [... new Set(years)]\n unique_years.push(\"1916\")\n unique_years.push(\"1940\")\n unique_years.push(\"1944\")\n unique_years.push(\"2020\")\n unique_years.push(\"2024\")\n return unique_years.sort()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"country_list = Object.keys(country2NOC) // A list of all countries in the data","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"// return array of female perecents from record: a record from the data_dict for the years in the list yrs\nfunction filter_years(record, yrs){\n let a = [];\n yrs.forEach(y => {a.push(record[y])})\n return a\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"mutable selected_data = {\n selectedCountry;\n let country = selectedCountry\n return data_dict[country2NOC[country]]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"width = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"margin = ({top: 175, right: 100, bottom: 30, left: 100}) \n// Important Note:\n// left,right margin >= annotation_box_width/2\n// top margin >= annotation_box_width","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"fontScale = d3.scaleLinear()\n .domain([0, d3.max(d3.entries(selected_data), d => d.value)]).nice()\n .range([8,14])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2020,"value":"d3.entries(mutable selected_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"x = d3.scaleBand()\n .domain(d3.range(actual_summer_years.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"x_scale = d3.scaleLinear()\n .domain([d3.min(d3.entries(selected_data), d=>Number(d.key)), d3.max(d3.entries(selected_data), d=>Number(d.key))])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(d3.entries(selected_data), d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => actual_summer_years[i]).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, selected_data.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(selected_data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"yTitle = g => g.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 20)\n .attr(\"y\", 20)\n .attr(\"x\", 210)\n .text(selectedCountry ===\"\"? `USA, % of Female Participants at the Summer Olympics \\n☀️`: `${selectedCountry}, % of Female Participants at the Summer Olympics \\n☀️ `)","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"xLabel = g => g.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .attr(\"y\", 500)\n .attr(\"x\", 500)\n // .text(\"Year\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2583,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"md`\n## Credits:\n\nhttps://www.pri.org/stories/2016-08-17/see-120-years-struggle-gender-equality-olympics\nhttps://interactive.unwomen.org/multimedia/timeline/womenunite/en/index.html#/2000\nhttps://observablehq.com/@pablo-mayrgundter/map-regional-with-click-callback\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"