25:["$","title",null,{"children":"Gender Gap in Education Worldwide Team 6 | FHOÖ Information Visualization | Observable"}] 49:T464,

As priviliged students in a first world country we might take it for granted that studying is very accessible. We are obligated to go to school to a certain degree and very encouraged to go on to study. But it surely is not the same for other countries, especially for women. Therefore, we thought we want to explore the current status of education with a focus on gender gaps and see how it changed over time. To compare if Austria, our homecountry, is holding up with the best standards or if we're being left behind and could improve. This might also lead to interessting dicussions on the "why's" behind the data.
To accomplish this we use the dataset: https://www.kaggle.com/datasets/imtkaggleteam/global-education which contains data on three education levels, primary, secondary and tertiary from the year 1820 to 2021. For most countries of the world and some summerized region data. Sadly there are some bigger gaps as there just isn't any available data for some countries in some years, which made it a little difficult to work with but we could still produce some interessting output.

4a:T8b5,{ const image = await FileAttachment("330-01.png").image(); image.style.height = "400px"; image.style.width = "auto"; const container = html`

Note regarding our data

The dataset contains different metrics for the education data. Data about primary and secondary education is given as "Combinded total net enrolment rate", but data about tertiary education is given as "Combined gross enrolemnt ratio". You may be wondering what's the difference between the two metrics. That's why we prepared a brief explanation for you.

Combined Total Net Enrolment Rate (NER)

The "Combined Total Net Enrolment Rate" (NER) measures the proportion of enrolled students who are within the official age- specific range for a particular level of education compared to the total population of that age group. NER provides more accurate information on how well an education system captures the children or youth who are at the typical age for attending a certain level of education. NER is generally lower than GER as it only considers students within the appropriate age group and cannot exceed 100%.

Combined Gross Enrolment Ratio (GER)

The "Combined Gross Enrolment Ratio" (GER) measures the number of students enrolled in a specific level of education (regardless of age) as a percentage of the population of the age group that officially corresponds to that level of education. This ratio can exceed 100% if, for instance, older students who start or continue their education later than usual or younger students enrolled earlier are included in the count. GER provides a general overview of the level of education and indicates the extent to which educational resources are utilized.

${image}

`; return container; } 4b:T1439,dotPlotChart = { const margin = { top: 30, right: 0, bottom: 30, left: 60 }; const width = 1028 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; let educationLevel = 'Combined_total_net_enrolment_rate_primary'; if(selectedButton !== null){ educationLevel = selectedButton; } let titleWithoutUnderscores = educationLevel.replace(/_/g, " "); // Filtern der Daten, um nur Jahre mit gültigen Werten einzuschließen, die auf 0 oder 5 enden const validData = austrianData.filter(d => { const yearLastDigit = d.Year % 10; // Berechnet die letzte Ziffer des Jahres const educationLevelKey = educationLevel + '_female'; return ( (d[educationLevelKey] !== null && // Überprüft, ob Daten für die gewählte Bildungsebene vorhanden sind d[educationLevelKey] !== '' && !isNaN(Number(d[educationLevelKey]))) && (d[educationLevel + '_male'] !== null && // Überprüft, ob Daten für männliche Daten vorhanden sind d[educationLevel + '_male'] !== '' && !isNaN(Number(d[educationLevel + '_male']))) && (yearLastDigit === 0 || yearLastDigit === 5) // Überprüft, ob das Jahr auf 0 oder 5 endet ); }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]) .attr("style", "max-width: 100%; height: auto;"); // Erstellen der x-Skalierung const x = d3.scaleBand() .domain(validData.map(d => d.Year)) .range([margin.left, width - margin.right]) .padding(0.1); const xAxis = svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // Beschriftung für die X-Achse am Ende der Achse xAxis.append("text") .attr("transform", `translate(${width}, +35)`) .attr("text-anchor", "end") .attr("fill", "black") .style("font-size", "12px") .text("years"); // Erstellen der y-Skalierung const y = d3.scaleLinear() .domain([0, 105]) .range([height, 0]); // Hinzufügen der Achsen svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // Hinzufügen der Y-Achse mit Prozentformatierung const yAxis = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d => `${d}%`)); yAxis.append("text") .attr("transform", `translate(-45, ${height / 2}) rotate(-90)`) .attr("text-anchor", "middle") .attr("fill", "black") .style("font-size", "12px") .text(titleWithoutUnderscores); // Hilfslinien für Y-Achse yAxis.selectAll("line") .attr("x2", width - margin.right) .attr("stroke-dasharray", "2,2") .attr("stroke", "lightgray"); // Vertikale Hilfslinien für jedes Jahr svg.selectAll(".vertical-lines") .data(x.domain()) .enter().append("line") .attr("x1", d => x(d) + x.bandwidth() / 2) .attr("x2", d => x(d) + x.bandwidth() / 2) .attr("y1", 0) .attr("y2", height) .attr("stroke-dasharray", "2,2") .attr("stroke", "lightgray"); validData.forEach(d => { const group = svg.append("g"); // Festlegen des y-Werts für den männlichen und weiblichen Punkt const yMale = y(d[educationLevel + '_male']); const yFemale = y(d[educationLevel + '_female']); // Punkte für weibliche Daten group.append("circle") .attr("class", "dot-female") .attr("cx", x(d.Year) + x.bandwidth() / 2) .attr("cy", yFemale) .attr("r", 3) .attr("fill", "#FF69B4"); // Punkte für männliche Daten group.append("circle") .attr("class", "dot-male") .attr("cx", x(d.Year) + x.bandwidth() / 2) .attr("cy", yMale) .attr("r", 3) .attr("fill", "#6495ED"); // Verbindungslinien zwischen den Punkten group.append("line") .attr("x1", x(d.Year) + x.bandwidth() / 2) .attr("y1", yFemale) .attr("x2", x(d.Year) + x.bandwidth() / 2) .attr("y2", yMale) .attr("stroke", "gray") .attr("stroke-width", 2); // Gemeinsamer Tooltip für die ganze Gruppe group.append("title") .text(`Year: ${d.Year}\nMale: ${d[educationLevel + '_male']}%\nFemale: ${d[educationLevel + '_female']}%`); }); // Legende hinzufügen const legend = svg.append("g") .attr("transform", `translate(${margin.left}, ${height + 40})`); // Positionierung unter dem Diagramm // Legenden-Element für "Female" legend.append("circle") .attr("cx", 0) .attr("cy", 4) // Leicht angehoben für bessere Ausrichtung .attr("r", 6) .style("fill", "#FF69B4"); legend.append("text") .attr("x", 10) .attr("y", 5) .text("female") .style("font-size", "12px") .style("font-family", "Arial") .attr("alignment-baseline","middle"); // Legenden-Element für "Male" legend.append("circle") .attr("cx", 80) // Abstand zur "Female"-Beschriftung .attr("cy", 4) // Leicht angehoben für bessere Ausrichtung .attr("r", 6) .style("fill", "#6495ED"); legend.append("text") .attr("x", 90) // Abstand zur "Female"-Beschriftung .attr("y", 5) .text("male") .style("font-size", "12px") .style("font-family", "Arial") .attr("alignment-baseline","middle"); return svg.node(); } 4c:T1047,viewof dotPlotDescription = { let educationLevel = 'Combined_total_net_enrolment_rate_primary'; let start1 = "Increasing Enrollment Over Time:"; let text1 = "The data shows a consistent upward trend in net enrollment rates for primary education, for both girls and boys, from the early 19th century onwards."; let start2 = "Gender Discrepancy:"; let text2 = "In the initial years, there was a significant gender gap in enrollment rates, with boys having considerably higher enrollment rates than girls. This gap was most pronounced in the early 1800s and gradually narrowed over time."; let start3 = "Achievement of Gender Parity:"; let text3 = "Achievement of Gender Parity: By the mid-20th century, the gender gap in primary education enrollment had effectively closed. Specifically, the gap was less than 1% by 1950."; let title = "Taking a closer look on primary education in Austria"; if(selectedButton !== null){ educationLevel = selectedButton; if(educationLevel == 'Combined_total_net_enrolment_rate_primary'){ title = "Taking a closer look on primary education in Austria"; start1 = "Increasing Enrollment Over Time:"; text1 = "The data shows a consistent upward trend in net enrollment rates for primary education, for both girls and boys, from the early 19th century onwards."; start2 = "Gender Discrepancy:"; text2 = "In the initial years, there was a significant gender gap in enrollment rates, with boys having considerably higher enrollment rates than girls. This gap was most pronounced in the early 1800s and gradually narrowed over time."; start3 = "Achievement of Gender Parity:"; text3 = "By the mid-20th century, the gender gap in primary education enrollment had effectively closed. Specifically, the gap was less than 1% by 1950."; } else if(educationLevel == 'Combined_total_net_enrolment_rate_secondary'){ title = "Taking a closer look on secondary education in Austria"; start1 = "Long-term Enrollment Increase:"; text1 = "There has been a long-term increase in the secondary education enrollment rates for both genders, reflecting improved access to secondary education over the decades."; start2 = "Gender Gap Closure:"; text2 = "The gender gap in secondary education enrollment rates has periodically closed, particularly noted in 1980."; start3 = "Early Data Limitations:"; text3 = "The data from the early 1800s (1820s to 1845s) show very low enrollment rates for both genders, likely reflecting the limited scope of formal education during that period rather than a true representation of gender parity."; } else if(educationLevel == 'Combined_gross_enrolment_ratio_for_tertiary_education'){ title = "Taking a closer look on tertiary education in Austria"; start1 = "Gradual Increase in Enrollment:"; text1 = "Both male and female gross enrollment ratios in tertiary education have shown a steady increase over time."; start2 = "Later Start for Female Enrollment:"; text2 = "Female enrollment in tertiary education started from a very low base and has increased significantly over the years, catching up with male enrollment rates."; start3 = "Achieving Gender Equality:"; text3 = "In more recent decades, female enrollment has occasionally matched or even exceeded male enrollment, indicating significant strides towards gender equality in higher education."; } } const image = await FileAttachment("330-02.png").image(); image.style.height = "300px"; image.style.width = "auto"; const container = html`

${title}

${start1} ${text1}

${start2} ${text2}

${start3} ${text3}

${image}

`; return container; }4d:T944,

Austria compared to Europe

Now that we have looked at Austria in isolation, let's compare it to other countries, starting with Europe. The x-axis in our next visualization represents the enrollment ratio for females, while the y-axis is for the male one. This means, that whenever a country is above the diagonal dashed line, tertiary education was male-dominated, and if it is below it was female dominated. A quick Note: the circles without a color simbolize that the data is missing for a specific country in that year. In those cases, the last available data was taken, to give an estimation of where the country could have placed at that point.

Initially, the year is set to 1900. Since the combined gross enrollment rate was much lower back then than it is now, we can click the zoom button to take a better look at our earlier data. Now, we can see that Austria had a very high male enrollment ratio, it was actually the highest in Europe for a very long time, if you disregard the WW1 drop in 1915. While a few countries had a higher female enrollment ratio in the early 1900s than Austria, it managed to place at the top of Europe quite a lot between 1920 and 1950. One notable exception would be during WW2 in 1945.

Overall, Austria was at the top of Europe regarding tertiary enrollment ratio most of the time between 1900 and 1950. However, from 1955 to now, Austria fell behind quite a bit, often placing just in the middle of the pack.

Europe as a whole

If we now look at the grander scheme of things, we can see that tertiary education was male-dominated in Europe for a very long time. Starting with the 1990s, male-to-female ratio could be considered somewhat equal. In 2020, however, the picture is quite different than it was in 1900, with every country in Europe having more females in tertiary education than men.

You can now also look at different regions of Europe by selecting them in the drop-down-menu. Let's look at Scandinavia, for example. While they were a bit behind in the early 1900s regarding combined enrollment ratio, they started to pull ahead around the 1960s. They also had more women than men in tertiary eduction earlier than other regions, which was already the case in 1990.

Feel free to play around with the chart a bit and also explore other regions!

4e:T421,

Now we want to look at Austria in comparison to the entire world. With this bivariate choropleth map you can easily see the gender distribution and general participation in tertiary education with one glance. One axis of the legend shows the female enrollment ratio and the other the male one, both have corresponding colors. The mixture of the colors shows the combination of all enrollments. Therefore, if both enrollment rates are high the color is darker due to both colors being fully present. Hover over the colors in the legend to see what they are made of!
Choose what year you want to explore. Some years have more data than others. You can also turn the globe around to get a better view of other countries. If the color scheme is not to your liking, there's some other options. The one with the best contrast is probably "BuOr" (in this case green means a smaller gap).
Note: The colors are calculated new every time the year changes, to map on the maximum of that year. So you can better compare countries in that year.

4f:Ta88,worldchart = { const width = 1180; const marginTop = 26; const height = width / 2 + marginTop; let m0; let o0; // Define the projection as an orthographic projection with rotation const projection = d3.geoOrthographic() .fitExtent([[2, marginTop + 2], [width - 2, height]], {type: "Sphere"}) .rotate([0, 0]) // Initial rotation .precision(0.1); // Set precision for smoother rendering const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Draw grid lines const meridians = d3.geoGraticule10(); svg.append("path") .datum(meridians) .attr("fill", "none") .attr("stroke", "rgba(0, 0, 0, 0.1)") // Adjust line color and opacity .attr("d", path); let maleMax = d3.max(Array.from(data.values(), d => d[0])); let femaleMax = d3.max(Array.from(data.values(), d => d[1])); let max = d3.max([maleMax, femaleMax]); //const x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n)); const x = d3.scaleQuantile([0,max], d3.range(n)); //const y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n)); const y = d3.scaleQuantile([0,max], d3.range(n)); const color = (value) => { if (!value) return "#e8e8e8"; let [a, b] = value; return colors[y(b) + x(a) * n]; }; const format = (value) => { if (!value) return "N/A"; let [a, b] = value; return `${a} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`} ${b} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`; }; svg.append(legend) .attr("transform", "translate(950,530)"); svg.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => color(data.get(d.properties.name))) .attr("d", path) .append("title") .text(d => `${d.properties.name}, ${format(data.get(d.properties.name))}`); // Add an interactive rotation behavior svg.call(d3.drag() .on("start", () => { const r = projection.rotate(); m0 = [d3.event.x, d3.event.y]; o0 = [-r[0], -r[1]]; }) .on("drag", () => { if (m0) { const m1 = [d3.event.x, d3.event.y]; const o1 = [o0[0] + (m0[0] - m1[0]) / 6, o0[1] + (m1[1] - m0[1]) / 6]; projection.rotate([-o1[0], -o1[1]]); svg.selectAll("path").attr("d", path); } }) .on("end", () => { m0 = null; })); // Add a white mesh. svg.append("path") .datum(countrymesh) .attr("fill", "none") .attr("stroke", "white") .attr("d", path); return svg.node(); }50:T44c,legend = () => { const k = 30; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} `; }51:Tc7b,function filterDataEurope(){ let europeData = rawdata; const regions = { "Northern Europe": ["Estonia", "Iceland", "Ireland", "Latvia", "Lithuania","United Kingdom"], "Scandinavia": ["Denmark", "Finland", "Norway", "Sweden"], "Western Europe": ["France", "Portugal", "Spain"], "Central Europe": ["Czechia", "Germany", "Hungary", "Slovakia", "Switzerland", "Belgium", "Luxembourg", "Netherlands", "Slovenia"], "Eastern Europe": ["Belarus", "Bulgaria", "Moldova", "Poland", "Romania", "Russia", "Ukraine", "Albania", "Bosnia and Herzegovina", "Croatia", "Montenegro", "North Macedonia", "Serbia"], "Southern Europe": ["Greece", "Italy", "Malta", "Cyprus"], "Austria" : ["Austria"], "World": ["World"] }; console.log(selectRegion); let filteredData; if(selectRegion === "All"){ filteredData = europeData.filter(d => europeCountries.includes(d.Entity)); }else{ //console.log(regions) filteredData = europeData.filter(d => regions[selectRegion].includes(d.Entity)); } //filteredData = filteredData.filter(d => activeCountries.includes(d.Entity)); filteredData = filteredData.filter(d => d.Year == year); filteredData = filteredData.filter(d => +d["Combined gross enrolment ratio for tertiary education, female"] !== 0 && +d["Combined gross enrolment ratio for tertiary education, male"] !== 0); let maleString = "Combined gross enrolment ratio for tertiary education, male"; let femaleString = "Combined gross enrolment ratio for tertiary education, female"; /* switch(level){ case "Secondary": maleString = "Combined total net enrolment rate, secondary, male"; femaleString = "Combined total net enrolment rate, secondary, female"; break; case "Tertiary": maleString = "Combined gross enrolment ratio for tertiary education, male"; femaleString = "Combined gross enrolment ratio for tertiary education, female"; break; case "Primary": maleString = "Combined total net enrolment rate, primary, male"; femaleString = "Combined total net enrolment rate, primary, female"; break; } */ for (let i = 0; i < europeCountries.length; i++) { let contained = false; //if(activeCountries.includes(europeCountries[i])){ for (let j = 0; j < filteredData.length; j++) { if(filteredData[j].Entity == europeCountries[i]){ contained = true; j = filteredData.length; } } if(!contained){ let yearTemp = year - 1; while(yearTemp > 1900){ let lastYear = rawdata.filter(d => d.Entity === europeCountries[i]); lastYear = lastYear.filter(d => d.Year == yearTemp.toString()); if(lastYear.length > 0){ if(lastYear[0][maleString] > 0 && lastYear[0][femaleString] > 0){ filteredData.unshift(lastYear[0]); yearTemp = 1; } } yearTemp--; } } //} } const austriaIndex = europeData.findIndex(d => d.Entity === "Austria"); const austriaData = europeData.splice(austriaIndex, 1)[0]; europeData.push(austriaData); return filteredData; }52:T12df,function gapMinderEurope(data) { const regions = { "Northern Europe": ["Estonia", "Iceland", "Ireland", "Latvia", "Lithuania", "United Kingdom"], "Scandinavia": ["Denmark", "Finland", "Norway", "Sweden"], "Western Europe": ["France", "Portugal", "Spain"], "Central Europe": ["Czechia", "Germany", "Hungary", "Slovakia", "Switzerland", "Belgium", "Luxembourg", "Netherlands", "Slovenia"], "Eastern Europe": ["Belarus", "Bulgaria", "Moldova", "Poland", "Romania", "Russia", "Ukraine", "Albania", "Bosnia and Herzegovina", "Croatia", "Montenegro", "North Macedonia", "Serbia"], "Southern Europe": ["Greece", "Italy", "Malta", "Cyprus"], "Austria": ["Austria"], "World": ["World"] }; const margin = { top: 105, right: 160, bottom: 105, left: 50 }; const width = 600; const height = 600; let maleString = "Combined gross enrolment ratio for tertiary education, male"; let femaleString = "Combined gross enrolment ratio for tertiary education, female"; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); if (!zoom) { xScale.domain([0, 160]); yScale.domain([0, 160]); } else { let maleMax = d3.max(data, d => +d[maleString]); let femaleMax = d3.max(data, d => +d[femaleString]); let max = d3.max([maleMax, femaleMax]); xScale.domain([0, max]); yScale.domain([0, max]); } const customColors = ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5"]; const colorScale = d3.scaleOrdinal() .domain(Object.keys(regions)) .range(customColors); svg.append("line") .attr("x1", margin.left) .attr("y1", height - margin.bottom) .attr("x2", width - margin.right) .attr("y2", margin.top) .style("stroke", "grey") .style("stroke-width", 1) .style("stroke-dasharray", "4 4"); const legendEurope = svg.append("g") .attr("class", "legend") .attr("transform", `translate(${width - 150}, ${height - 300})`); const legendRects = legendEurope.selectAll("rect") .data(Object.keys(regions)) .enter().append("rect") .attr("x", 0) .attr("y", (d, i) => i * 20) .attr("width", 10) .attr("height", 10) .attr("fill", d => colorScale(d)) .append("title") .text(d => `Countries: ${regions[d].join(", ")}`); const legendText = legendEurope.selectAll("text") .data(Object.keys(regions)) .enter().append("text") .attr("x", 15) .attr("y", (d, i) => i * 20 + 9) .text(d => d) .attr("alignment-baseline", "middle") .style("font", "12px arial") .append("title") .text(d => `Countries: ${regions[d].join(", ")}`); svg.append("text") .attr("class", "x-axis-label") .attr("x", (width / 2) - 50) .attr("y", height - 60) .attr("text-anchor", "middle") .text(femaleString) .style("font", "12px arial"); svg.append("text") .attr("class", "y-axis-label") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", +15) .attr("text-anchor", "middle") .text(maleString) .style("font", "12px arial"); const dots = svg.selectAll(".dot") .data(data, d => d.Entity) .join( enter => { const circle = enter.append("circle") .attr("class", "dot") .attr("r", 10) .attr("cx", d => xScale(+d[femaleString])) .attr("cy", d => yScale(+d[maleString])) .style("fill", d => { for (const region in regions) { if (regions[region].includes(d.Entity)) { return d.Year !== year.toString() ? "none" : colorScale(region); } } }) .style("stroke", d => d.Year === year.toString() ? "none" : "grey") .style("stroke-width", 1) .style("stroke-dasharray", d => d.Year !== year.toString() ? "4 4" : "none") .append("title") .text(d => { const femaleEnrollment = +d[femaleString]; const roundedFemaleEnrollment = femaleEnrollment.toFixed(1); const maleEnrollment = +d[maleString]; const roundedMaleEnrollment = maleEnrollment.toFixed(1); return `Entity: ${d.Entity}\nYear: ${d.Year}\nMale: ${roundedMaleEnrollment}%\nFemale: ${roundedFemaleEnrollment}%`; }); return circle; } ); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); } 53:[{"id":"778a250088c6348f71335a703a4235d037164c0c19f3e641da906c038dc90e008ef23b3fa67e0abfd54f4dbbefa58e49d68e5fd066f5c4d866b9be0b99560cc6","href":"https://static.observableusercontent.com/files/778a250088c6348f71335a703a4235d037164c0c19f3e641da906c038dc90e008ef23b3fa67e0abfd54f4dbbefa58e49d68e5fd066f5c4d866b9be0b99560cc6","name":"Updated_Austria_Education_Data.csv","type":"text/csv","lastModified":1714648719305.028,"size":3691},{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1715002033533.077,"size":756420},{"id":"2ebd19b7cdecf84e7d0b3af0ba6200e9c42dbc46fb5f2b7d4a02ddc5485a417d2677f4250a0b87a4295f8bad4f94642383b93b203c1b569cf004eef72d15cc7e","href":"https://static.observableusercontent.com/files/2ebd19b7cdecf84e7d0b3af0ba6200e9c42dbc46fb5f2b7d4a02ddc5485a417d2677f4250a0b87a4295f8bad4f94642383b93b203c1b569cf004eef72d15cc7e","name":"updated_gender_gap_education_levels.csv","type":"text/csv","lastModified":1715002029865.603,"size":480748},{"id":"efc0d9074ffce15aebd49ca9c92d19e5538e1b395d36f804c42351aa2941604f8c129ea277b14622401e6ebfb40c8951810c811bc7922a3bebfbaeb7b56e20d9","href":"https://static.observableusercontent.com/files/efc0d9074ffce15aebd49ca9c92d19e5538e1b395d36f804c42351aa2941604f8c129ea277b14622401e6ebfb40c8951810c811bc7922a3bebfbaeb7b56e20d9","name":"330-02.png","type":"image/png","lastModified":1715005027759.873,"size":112696},{"id":"83562bf6a45f84e9cd479547b9fcdc84e80452388d732b7fcc9ab89e0977211d357af6a3000af7de6350d1d9653c04ca7f4a4e0136ff999047a0be94e2e7fef1","href":"https://static.observableusercontent.com/files/83562bf6a45f84e9cd479547b9fcdc84e80452388d732b7fcc9ab89e0977211d357af6a3000af7de6350d1d9653c04ca7f4a4e0136ff999047a0be94e2e7fef1","name":"330-01.png","type":"image/png","lastModified":1714992736722.029,"size":103702}] 29:{"id":"2de1f7c6c3851033","slug":null,"title":"Gender Gap in Education Worldwide Team 6","thumbnail":"abdb79c812b7a39525d28c415160d533d7231f75dfb8a041f632293a5e16901e","access_level":"public","create_time":"$D2024-05-02T11:17:04.601Z","update_time":"$D2024-06-02T14:46:08.510Z","view_time":null,"first_public_time":"$D2024-06-03T12:22:56.317Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"511129ccab40f441","login":"laura-haberl","name":"Laura Haberl","avatar_url":"https://avatars-next.observableusercontent.com/17d43f165e62491f1e9da70a6268dbda674f9d20371827adfc0ff2722519bb8d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"},{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"40aef35df8476b62","slug":"im_infovis_2024","title":"IM_InfoVis_2024","owner":{"id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization"}},"type":"notebook","body":{"titling":"auto","title":"Gender Gap in Education Worldwide Team 6","cells":[{"id":0,"value":"# Gender Gap in Education Worldwide Team 6","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"

Example Data:

Austrian education

We start our excursus on the topic \"Gender Gap in Education Worldwide\" with a closer look at Austria. In the following dot plot, the individual educational levels can be viewed over time by clicking on the buttons. There are also some facts about each education level below the diagram.

Austria compared to the entire world

color scheme`;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof worldYear = Inputs.range([1900, 2020], {step: 1, value: 2020, label: \"What Year would you like to look at?\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"

Tertiary Education Worldwide (GER)

Imports and code

Button Input / Observable Inputs

Observable Inputs › Button · API

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"schemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#f7f0f0\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#f7f0f0\", \"#a7bfe8\", \"#6495e8\", \"#e8b0d1\", \"#a7b0d1\", \"#6495d1\", \"#e869b4\", \"#a769b4\", \"#6469b4\"\n ]\n },\n {\n name: \"BuOr\", \n colors: [\"#effaeb\", \"#a7e2da\", \"#5ac8c8\", \"#ecd789\", \"#a7d789\", \"#5ac889\", \"#e8b01d\", \"#a7b01d\", \"#5ab01d\"]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#f7f0f0\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"data = Object.assign(new Map(dataGap.map(d => [d.country, [d.tertiary_fem, d.tertiary_mal]])), {title: [\"Female %\", \"Male %\"]});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"dataGap = dataGap2020.map((row) => {\n\n // Map numbers to actual numbers instad of number strings\n // rename fields to more practical names which can be used in JS\n // remove empty column and \"Report type\" col\n return {\n country: row[\"Entity\"],\n code: row[\"Code\"],\n year: row[\"Year\"],\n tertiary_fem: parseFloat(row[\"Combined gross enrolment ratio for tertiary education, female\"]).toFixed(2),\n tertiary_mal: parseFloat(row[\"Combined gross enrolment ratio for tertiary education, male\"]).toFixed(2),\n secundary_fem: parseFloat(row[\"Combined total net enrolment rate, secondary, female\"]).toFixed(2),\n secundary_mal: parseFloat(row[\"Combined total net enrolment rate, secondary, male\"]).toFixed(2),\n primary_fem: parseFloat(row[\"Combined total net enrolment rate, primary, female\"]).toFixed(2),\n primary_mal: parseFloat(row[\"Combined total net enrolment rate, primary, male\"]).toFixed(2)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"dataGap2020 = dataNum.filter(d => d.Year === worldYear.toString());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"dataNum = rawdata.filter(d => d[\"Combined gross enrolment ratio for tertiary education, female\"] !== \"\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"rawdata = FileAttachment(\"updated_gender_gap_education_levels.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"europeCountries = [\n \"Belgium\", \"Bulgaria\", \"Croatia\", \"Cyprus\", \"Czechia\", \"Denmark\",\n \"Estonia\", \"Finland\", \"France\", \"Germany\", \"Greece\", \"Hungary\", \"Ireland\", \"Italy\",\n \"Latvia\", \"Lithuania\", \"Luxembourg\", \"Malta\", \"Netherlands\", \"Poland\", \"Portugal\",\n \"Romania\", \"Slovakia\", \"Slovenia\", \"Spain\", \"Sweden\", \"United Kingdom\", \"World\", \"Austria\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"filteredDataEurope = filterDataEurope();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 24:null