45:["$","title",null,{"children":"LAB REPORT 3: Observable | Haley Horton | Observable"}] 4d:Ta3c,chart5 = { const svg = d3.create("svg") .style("cursor", "default") .attr("viewBox", [0, 0, width, height]); //Generates an svg^. const g = svg.selectAll(".waffle") .data(waffles) .join("g") .attr("class", "waffle"); //Sets functions from d3 /*This sets an adaptive box depending on the set width. Below sets constants that get used in the loops below. It gives a grid and sets up color usage.*/ if (!whole) { const numPerRow = Math.floor(width / (waffleSize + padding.x)); g.attr("transform", (d, i) => { const r = Math.floor(i / numPerRow); const c = i - r * numPerRow; return `translate(${c * (waffleSize + padding.x)},${r * (waffleSize + padding.y)})` }); } /*This sets up the size of the rectangular matrix.This also allows for the circular and rectangular options.*/ const cellSize = scale.bandwidth(); const half = cellSize / 2; const cells = g.append("g") .selectAll(options.shape) .data(d => d) .join(options.shape) .attr("fill", d => d.index === -1 ? "#ddd" : color(d.index)); if (isRect) { cells.attr("x", d => scale(d.x)) .attr("y", d => whole ? 0 : scale(d.y)) .attr("rx", 3).attr("ry", 3) .attr("width", cellSize).attr("height", cellSize) } else { cells.attr("cx", d => scale(d.x) + half) .attr("cy", d => whole ? 0 : scale(d.y) + half) .attr("r", half); } /*This sets up motion, especially the transition section (bounce, delay, are all cues that this is happening.)*/ if (whole) { cells.append("title").text(d => { const cd = chartData[d.index]; return `${cd.Level}\n${cd.hl_numbers} (${cd.ratio.toFixed(1)}%)`; }); cells.transition() .duration(d => d.y * 100) .ease(d3.easeBounce) .attr(isRect ? "y" : "cy", d => scale(d.y) + (isRect ? 0 : half)); svg.transition().delay(550) .on("end", () => drawLegend(svg, cells)); } else { g.append("text") .style("font-size", 20) .style("font-weight", "bold") .attr("dy", "1.5em") .attr("text-anchor", "middle") .attr("fill", (d, i) => color(i)) .attr("transform", `translate(${waffleSize / 2},0)`) .text((d, i) => `${chartData[i].ratio.toFixed(0)}%`); g.append("g") .attr("transform", `translate(0,${waffleSize + padding.y / 2.5})`) .call(g => g.append("text").text((d, i) => chartData[i].level)) .call(g => g.append("text").attr("dy", "1em").text((d, i) => chartData[i].hl_numbers)); } /*^This generates front end creation of new objects, and translates lets it place items.*/ return svg.node(); }4e:Ta3c,chart1 = { const svg = d3.create("svg") .style("cursor", "default") .attr("viewBox", [0, 0, width, height]); //Generates an svg^. const g = svg.selectAll(".waffle") .data(waffles) .join("g") .attr("class", "waffle"); //Sets functions from d3 /*This sets an adaptive box depending on the set width. Below sets constants that get used in the loops below. It gives a grid and sets up color usage.*/ if (!whole) { const numPerRow = Math.floor(width / (waffleSize + padding.x)); g.attr("transform", (d, i) => { const r = Math.floor(i / numPerRow); const c = i - r * numPerRow; return `translate(${c * (waffleSize + padding.x)},${r * (waffleSize + padding.y)})` }); } /*This sets up the size of the rectangular matrix.This also allows for the circular and rectangular options.*/ const cellSize = scale.bandwidth(); const half = cellSize / 2; const cells = g.append("g") .selectAll(options.shape) .data(d => d) .join(options.shape) .attr("fill", d => d.index === -1 ? "#ddd" : color(d.index)); if (isRect) { cells.attr("x", d => scale(d.x)) .attr("y", d => whole ? 0 : scale(d.y)) .attr("rx", 3).attr("ry", 3) .attr("width", cellSize).attr("height", cellSize) } else { cells.attr("cx", d => scale(d.x) + half) .attr("cy", d => whole ? 0 : scale(d.y) + half) .attr("r", half); } /*This sets up motion, especially the transition section (bounce, delay, are all cues that this is happening.)*/ if (whole) { cells.append("title").text(d => { const cd = chartData[d.index]; return `${cd.Level}\n${cd.hl_numbers} (${cd.ratio.toFixed(1)}%)`; }); cells.transition() .duration(d => d.y * 100) .ease(d3.easeBounce) .attr(isRect ? "y" : "cy", d => scale(d.y) + (isRect ? 0 : half)); svg.transition().delay(550) .on("end", () => drawLegend(svg, cells)); } else { g.append("text") .style("font-size", 20) .style("font-weight", "bold") .attr("dy", "1.5em") .attr("text-anchor", "middle") .attr("fill", (d, i) => color(i)) .attr("transform", `translate(${waffleSize / 2},0)`) .text((d, i) => `${chartData[i].ratio.toFixed(0)}%`); g.append("g") .attr("transform", `translate(0,${waffleSize + padding.y / 2.5})`) .call(g => g.append("text").text((d, i) => chartData[i].level)) .call(g => g.append("text").attr("dy", "1em").text((d, i) => chartData[i].hl_numbers)); } /*^This generates front end creation of new objects, and translates lets it place items.*/ return svg.node(); }4f:T4a2,drawLegend = (svg, cells) => { const legend = svg.selectAll(".legend") .data(chartData.map(d => d.Level)) .join("g") .attr("opacity", 1) .attr("transform", (d, i) => `translate(${waffleSize + 20},${i * 30})`) .on("mouseover", highlight) .on("mouseout", restore); // this gives us mouse interactivity (it changes when you move the mouse)^. Below sets the grid/box size. legend.append("rect") .attr("rx", 3).attr("ry", 3) .attr("width", 30).attr("height", 20) .attr("fill", (d, i) => color(i)); //this sets the location and size of the text. legend.append("text") .attr("dx", 40) .attr("alignment-baseline", "hanging") .text((d, i) => `${d} (${chartData[i].ratio.toFixed(1)}%)`); /* finds hovered item (highlight think what did I click on?); this lets everything else turn to grey.*/ function highlight(e, d, restore) { const i = legend.nodes().indexOf(e.currentTarget); cells.transition().duration(500) .attr("fill", d => d.index === i ? color(d.index) : "#ccc"); } //this one sets up what happens after the click function restore() { cells.transition().duration(500).attr("fill", d => color(d.index)) } }50:T7c7,chart2 = { // Declare the chart dimensions and margins. const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; // Declare the x (horizontal position) scale. const x = d3.scaleUtc(d3.extent(data, d => d.session), [marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear([0, d3.max(data, d => d.students)], [height - marginBottom, marginTop]); // Declare the line generator. const line = d3.line() .x(d => x(d.session)) .y(d => y(d.students)); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Add the x-axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3.axisBottom(x) .tickValues( data .map(d => new Date(d.session)) .filter(d => d.getUTCMonth() === 4 || d.getUTCMonth() === 10) ) .tickFormat(d3.utcFormat("%b %Y")) .tickSizeOuter(0) ); // Add the y-axis, remove the domain line, add grid lines and a label. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Students Taking the Exam")); svg.append("path") .attr("fill", "lightblue") .attr("stroke", "steelblue") .attr("stroke-width", 6) .attr("d", line(data)); return svg.node(); }51:T74b,chart3 = { //sets grid size the 650 is the maximum pixels. const height = Math.min(width, 650); const radius = Math.min(width, height) / 2; //sets up the donuts const arc = d3.arc() .innerRadius(radius * 0.4) .outerRadius(radius - 1); //asigns the constants const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.sevenpoints); const color = d3.scaleOrdinal() .domain(hldata.map(d => d.sessionstring)) .range(d3.quantize(t => d3.interpolateWarm(t * 0.8 + 0.1), hldata.length)); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .selectAll("path") .data(pie(hldata)) .join("path") .attr("fill", d => color(d.data.sessionstring)) .attr("d", arc) .append("title") .text(d => `${d.data.sevenpoints}}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll("text") .data(pie(hldata)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.sevenpoints)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.3) .text(d => d.data.sessionstring)); /* this gives color, connects all of it to one variable (g), assings color to session string from data, adds a title to the DOM order, text is printed from data and then session string ^ data, seven points, to a secondary string. */ return svg.node(); }52:T785, chart4 = { //sets grid size the 650 is the maximum pixels. const height = Math.min(width, 650); const radius = Math.min(width, height) / 2; //sets up the donuts const arc = d3.arc() .innerRadius(radius * 0.4) .outerRadius(radius - 1); //asigns the constants const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.hl_numbers); const color = d3.scaleOrdinal() .domain(hldata1.map(d => d.Level)) .range(d3.quantize(t => d3.interpolateWarm(t * 0.8 + 0.1), hldata1.length)); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .selectAll("path") .data(pie(hldata1)) .join("path") .attr("fill", d => color(d.data.Level)) .attr("d", arc) .append("title") .text(d => `${d.data.hl_numbers}}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll("text") .data(pie(hldata1)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.hl_numbers)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.3) .text(d => d.data.Level)); /* this gives color, connects all of it to one variable (g), assings color to session string from data, adds a title to the DOM order, text is printed from data and then session string ^ data, seven points, to a secondary string. Ideally, I could have colored it based on the amount, but I didn't get that far. */ return svg.node(); }53:[{"id":"98503507406e03a8d861b6db6bcb356903a7f2926b7e778fa67fda152a3f44a9e0c64458566c31478e5b72f469ca2c3f7bbec5522355b98d285334437db62c93","href":"https://static.observableusercontent.com/files/98503507406e03a8d861b6db6bcb356903a7f2926b7e778fa67fda152a3f44a9e0c64458566c31478e5b72f469ca2c3f7bbec5522355b98d285334437db62c93","name":"2026_ib_updated","type":"text/csv","lastModified":1794251797936,"size":126},{"id":"c309026fecf76f1c8a52c1d581d24735e12a9f0234a7c3c51898d8ae003f94d51de9925beffd723f616493cbd2eb52d98169c72532be5ca330495efed7ee5d0f","href":"https://static.observableusercontent.com/files/c309026fecf76f1c8a52c1d581d24735e12a9f0234a7c3c51898d8ae003f94d51de9925beffd723f616493cbd2eb52d98169c72532be5ca330495efed7ee5d0f","name":"hl","type":"application/octet-stream","lastModified":1794234076547,"size":329},{"id":"0916230e813406a70550f4de4bcbd1024aea5f4f5c9d5466dd3c7a9e6ed79b1841f0270b568c37fd8c138c8cc9bad4f99eaced5d492f80aaf0b53beda21c7571","href":"https://static.observableusercontent.com/files/0916230e813406a70550f4de4bcbd1024aea5f4f5c9d5466dd3c7a9e6ed79b1841f0270b568c37fd8c138c8cc9bad4f99eaced5d492f80aaf0b53beda21c7571","name":"hl_string","type":"text/csv","lastModified":1794250785914,"size":488}] 49:{"id":"362ce1b3145295ec","slug":"lab-report-3-observable","title":"LAB REPORT 3: Observable","thumbnail":"d1796e9c69f9f8f2bb5325116b3e75c12383d1b4e93110b05d0c0a3ee073d14f","access_level":"public","create_time":"$D2026-11-11T23:55:30.773Z","update_time":"$D2026-11-11T23:59:39.813Z","view_time":null,"first_public_time":"$D2026-11-11T23:55:52.931Z","has_unpublished_edits":null,"fork":{"id":"de21ad8048937ba4","slug":"ib-waffle-chart","title":"LAB REPORT 3: Observable","owner":{"id":"84620d6578bb22d7","login":"haley-horton","name":"Haley Horton"}},"stars":0,"starred":false,"owner":{"type":"team","id":"84620d6578bb22d7","login":"haley-horton","name":"Haley Horton","avatar_url":"https://avatars-next.observableusercontent.com/5bcab6a50ce920e1029ac34ca1f3d80aa608ee9f9c09daf7da67056f7ee49838","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":530,"publish_version":530,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b28a6f4672a0688","login":"haley-horton","name":"Haley Horton","avatar_url":"https://avatars-next.observableusercontent.com/5bcab6a50ce920e1029ac34ca1f3d80aa608ee9f9c09daf7da67056f7ee49838","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"84620d6578bb22d7","login":"haley-horton","name":"Haley Horton","avatar_url":"https://avatars-next.observableusercontent.com/5bcab6a50ce920e1029ac34ca1f3d80aa608ee9f9c09daf7da67056f7ee49838","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"LAB REPORT 3: Observable","cells":[{"id":0,"value":"# LAB REPORT 3: Observable\n\n#### References:\n- Waffle Chart: https://observablehq.com/@analyzer2004/waffle-chart;\n- Line Graph: https://observablehq.com/@d3/line-chart/2\n- Donut chart: https://observablehq.com/@d3/donut-chart/2\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"## About My Data\nI used to be an IB teacher. The IB has exams on many topics & levels. I took data for the math exam and specifically for math HL, which is their hardest exam cycle. The exam is graded on a scale of 1-7 marks. Students needs 3-4 marks to pass the exam. They use a modified normal distribution for all of their exams. The exams are given twice per year (May and November). The May exam cycle has more schools/students that take it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"# Chart 1: Waffle Chart\n## *Topic: Students Taking the IB Math Exam Score Distribution November 2021 - May 2026*\nI modified a clickable waffle chart, because I think it clearly shows each level of score. I chose a color palette that clearly differentiated each level from the one previous. I think this could have been improved by using a larger data set OR by making a few different topics - one for Math vs. Global Politics. I may go into education after this, and this is a good way to present school data. Most school assessment data is presented on cluttered, confusing dashboards.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof options = form(html`

\n Style: \n Shape: \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"toLevel = num => d3.format(\"$,.2f\")(num)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"color = d3.scaleOrdinal(d3.schemeDark2)\n .domain(sequence(chartData.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"scale = d3.scaleBand()\n .domain(sequence(10))\n .range([0, waffleSize])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"sequence = (length) => Array.apply(null, {length: length}).map((d, i) => i);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"whole = options.style === \"whole\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"isRect = options.shape === \"rect\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"chartData = {\n const data = d3.csvParse(await FileAttachment(\"2026_ib_updated\").text(), d3.autoType);\n const total = data.reduce((a, b) => a + Math.abs(b.hl_numbers), 0);\n return data.map(d => ({\n Level: d.Level,\n hl_numbers: d.hl_numbers,\n ratio: d.hl_numbers/ total * 100\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"/* this also is for the array set up of the waffles.\n*/\nwaffles = {\n const array = [];\n if (whole) {\n const max = chartData.length;\n let index = 0, curr = 1,\n accu = Math.round(chartData[0].ratio), waffle = [];\n\n for (let y = 9; y >= 0; y--)\n for (let x = 0; x < 10; x ++) {\n if (curr > accu && (index +1) < max) {\n let r = Math.round(chartData[++index].ratio);\n while(r === 0 && (index + 1) < max) r = Math.round(chartData[++index].ratio);\n accu += r;\n }\n waffle.push({x, y, index});\n curr++;\n }\n array.push(waffle);\n }\n else {\n chartData.map((d, i) => {\n let curr = 0, waffle = [];\n for (let y = 9; y >= 0; y--)\n for(let x = 0; x < 10; x ++) {\n waffle.push(({x, y, index: curr < Math.round(d.ratio) ? i : -1}));\n curr++;\n }\n array.push(waffle);\n });\n }\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"padding = ({x: 10, y: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"waffleSize = whole ? width < height ? width : height : 150;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"# Graph 2: Shaded Line Graph\n## *Topic: Number of HL Students Taking the IB Math Exam*\nThe line graph shows the differences in number of higher level math students taking the exam in May vs. November. I shaded it, because I thought it highlighted this idea, but it may have made it more confusing to digest.It shows that very few take it in November and almost 10 times the November population take it in May.\nThe grade boundaries for both exams are different, but you can be awarded a diploma on either cycle. This makes this a nuanced issue, because if one sample is significantly smaller it could skew results. From a storytelling perspective, it might be most helpful to design a chart which highlights the percent difference between passing grades awarded in November vs. May to see if it's proportional.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"data = FileAttachment(\"hl\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"# Graph 3: Donut Chart\n## *Topic: Percent of Students to Get A Perfect Score *\nThe line graph shows the differences in percent of perfect scores awarded for higher level math students taking the exam in May vs. November. 2021 & 2022 have much higher percentages of 7's compared to later years. IB re-does the course every 7 years - sometimes only a little bit and sometimes they overhaul it. Likely because the % was so high in November '21 & November '22, they realigned the later exams to look more like their normalized distribution.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"hldata = FileAttachment(\"hl_string\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"## Graph 4: Marks Awarded in Math HL 2026\nThis shows how many were given out in one year, by the numbers. I think this donut chart illustrates this well as the visual cue of slice size matches the topic. It's clear the highest number is 5 marks and the lowest are 1-2 marks and no marks (students that didn't sit the exam). Most students pass. This is for the harder exam (there is an HL & SL level)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"hldata1 = FileAttachment(\"2026_ib_updated\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"## Final Takeways:\n\n- The IB gives an exam that is distributed in the favor of students passing. If I was in an IB school, having a chart like this to show students would be helpful so that they could understand how the exams are graded.\n- The last one shows how few students get a perfect score.\n- The second one is probably the least helpful as it just shows how many students took each exam.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 44:null