40:null 41:["$","title",null,{"children":"Week 3 Practice Pictogram | 2PurpleTown | Observable"}] 47:Td94,projectInfo = html`

School Performance Pictogram

Data source

Dataset: School Performance Analysis
Author: Kaggle – alizabrand

Dataset description

This dataset contains information about student performance in exams, along with demographic details such as gender, parental level of education, lunch type, and participation in a test preparation course. It was inspired by studies that analyze how social and educational factors affect academic outcomes. The data can be used for data analysis, visualization, and machine learning projects such as predicting student success or exploring education trends.

Design approach

In this notebook I focus on the relationship between lunch type (a proxy for socioeconomic status), test preparation course (completed vs. none), and exam performance. I define “high scorers” as students with math score ≥ 70 and reading score ≥ 70. For each combination of lunch type and preparation status, I compute the proportion of high scorers and visualize it using a 2×2 isotype / pictogram chart.

Each pictogram cell is a 10×10 grid of circles (100 dots = 100% of the students in that group). Dots are colored in a darker shade for high scorers and a lighter shade for other students. The x-axis encodes lunch type (free/reduced vs. standard), and the y-axis encodes whether students completed the test preparation course (completed vs. none). This design keeps the icon size constant and uses repetition to represent quantity, following Isotype principles.

Key insights

Within both lunch categories, students who completed the test preparation course have a noticeably higher share of high scorers than those with no preparation.
Across preparation status, students with standard lunch generally show a higher proportion of high scorers than students with free/reduced lunch, suggesting that socioeconomic factors are also associated with exam performance.
The 2×2 pictogram layout makes it easy to compare the combined effect of lunch type and preparation, and visually emphasizes that access to resources and preparation opportunities both matter.

` 48:T1209,{ // 0. This code assumes you already loaded the studentsperformance table: // studentsperformance = FileAttachment("StudentsPerformance.csv").csv({typed: true}) // 1. Define what counts as a "high score" const HIGH_MATH = 70; const HIGH_READING = 70; // 2. Pictogram layout configuration const iconsPerRow = 10; // number of dots per row const iconsTotal = 100; // total dots per cell (100 = 100%) const rows = Math.ceil(iconsTotal / iconsPerRow); // 3. Group by lunch × test preparation course const grouped = d3.rollup( studentsperformance, v => { const total = v.length; const high = v.filter( d => d["math score"] >= HIGH_MATH && d["reading score"] >= HIGH_READING ).length; return { total, high }; }, d => d.lunch, d => d["test preparation course"] ); // 4. Flatten grouped data and compute percentages const configs = []; for (const [lunch, byPrep] of grouped.entries()) { for (const [prep, stats] of byPrep.entries()) { const share = stats.high / stats.total; const filledCount = Math.round(share * iconsTotal); configs.push({ lunch, prep, share, filledCount }); } } // Define the order of x-axis and y-axis categories const lunchCategories = Array.from(new Set(configs.map(d => d.lunch))) .sort(d3.ascending); // X: free/reduced → standard const prepCategories = ["completed", "none"]; // Y: top = completed, bottom = none // 5. Generate coordinate data for a 2×2 grid of pictograms const gapX = 3; // horizontal gap between pictograms const gapY = 3; // vertical gap between pictograms const dotData = []; const cellLabelData = []; const xAxisLabelData = []; const yAxisLabelData = []; configs.forEach(cfg => { const colIndex = lunchCategories.indexOf(cfg.lunch); const rowIndex = prepCategories.indexOf(cfg.prep); if (colIndex < 0 || rowIndex < 0) return; const baseX = colIndex * (iconsPerRow + gapX); const baseY = rowIndex * (rows + gapY); const filledCount = cfg.filledCount; const percentLabel = d3.format(".0%")(cfg.share); // Create the 10×10 dot grid for (let i = 0; i < iconsTotal; i++) { const innerRow = Math.floor(i / iconsPerRow); const innerCol = i % iconsPerRow; dotData.push({ x: baseX + innerCol + 1, y: baseY + innerRow + 1, status: i < filledCount ? "high score" : "other" }); } // Add percentage label under each pictogram cellLabelData.push({ x: baseX + iconsPerRow / 2 + 0.5, y: baseY + rows + 1.5, label: percentLabel }); }); // 6. X-axis labels (lunch) lunchCategories.forEach((lunch, colIndex) => { const baseX = colIndex * (iconsPerRow + gapX); const centerX = baseX + iconsPerRow / 2 + 0.5; const bottomY = (prepCategories.length - 1) * (rows + gapY) + rows + 3; xAxisLabelData.push({ x: centerX, y: bottomY, label: lunch }); }); // 7. Y-axis labels (prep course) prepCategories.forEach((prep, rowIndex) => { const baseY = rowIndex * (rows + gapY); const centerY = baseY + rows / 2 + 0.5; const leftX = -2; yAxisLabelData.push({ x: leftX, y: centerY, label: prep }); }); // 8. Final combined 2×2 dot pictogram plot return Plot.plot({ width: 520, height: 420, marginTop: 40, marginBottom: 70, marginLeft: 80, marginRight: 20, x: { axis: null, label: "lunch" }, y: { axis: null, label: "test preparation course", reverse: true }, // ★★★ Your custom colors are here ★★★ color: { legend: true, domain: ["high score", "other"], range: ["#4A4F5E", "#D7DCE8"], // ← YOU CAN CHANGE COLORS HERE label: "students" }, marks: [ // pictogram dots Plot.dot(dotData, { x: "x", y: "y", r: 4, fill: "status" }), // percentage labels Plot.text(cellLabelData, { x: "x", y: "y", text: "label", textAnchor: "middle", fontSize: 12 }), // X-axis labels (lunch) Plot.text(xAxisLabelData, { x: "x", y: "y", text: "label", textAnchor: "middle", fontSize: 13 }), // Y-axis labels (prep) Plot.text(yAxisLabelData, { x: "x", y: "y", text: "label", textAnchor: "middle", fontSize: 13 }) ], title: `High scorers by lunch type (x) and test preparation course (y) (math ≥ ${HIGH_MATH}, reading ≥ ${HIGH_READING})` }); } 49:[{"id":"b6d5460d9c94ffe82bd85a77d4da3c74788a1b8c7e740d39e851f800becc96ed3834e8bb559eaf9751fdaed4518a626bf4b8809a9a3551bff0d729fb820e644d","href":"https://static.observableusercontent.com/files/b6d5460d9c94ffe82bd85a77d4da3c74788a1b8c7e740d39e851f800becc96ed3834e8bb559eaf9751fdaed4518a626bf4b8809a9a3551bff0d729fb820e644d","name":"StudentsPerformance.csv","type":"text/csv","lastModified":1763855126798.191,"size":57021}] 45:{"id":"f2f3d94e8149f897","slug":null,"title":"Week 3 Practice Pictogram","thumbnail":"e8b6935a4780463aa20f7c23c5398abf8f37edf2898f8f6b0b13070cb3649d5d","access_level":"public","create_time":"$D2025-11-22T23:44:42.068Z","update_time":"$D2025-11-24T02:52:33.375Z","view_time":null,"first_public_time":"$D2025-11-22T23:44:42.068Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f2c827a1366610b0","login":"2purpletown","name":"2PurpleTown","avatar_url":"https://avatars-next.observableusercontent.com/43a30ea142b46afc06e6ab1dfa074c9d9371c7940313ddcd106c54c212941e01","tier":"starter_2024","bio":"","following":false},"version":154,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7404f6e15590c1fe","login":"jianing-li2","name":"Jianing Li","avatar_url":"https://avatars-next.observableusercontent.com/ed721253cc41449b9374ae0f42eed15cde82fb0d67ec1a465c1d54c140c2b3a1","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"f2c827a1366610b0","login":"2purpletown","name":"2PurpleTown","avatar_url":"https://avatars-next.observableusercontent.com/43a30ea142b46afc06e6ab1dfa074c9d9371c7940313ddcd106c54c212941e01","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7404f6e15590c1fe","login":"jianing-li2","name":"Jianing Li","avatar_url":"https://avatars-next.observableusercontent.com/ed721253cc41449b9374ae0f42eed15cde82fb0d67ec1a465c1d54c140c2b3a1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"442642758140e523","slug":"2025_jianing_datavisualisation","title":"2025_Jianing_DataVisualisation","owner":{"id":"f2c827a1366610b0","login":"2purpletown","name":"2PurpleTown"}},"type":"notebook","body":{"titling":"auto","title":"Week 3 Practice Pictogram","cells":[{"id":0,"value":"# Week 3 Practice Pictogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"studentsperformance = await FileAttachment(\"StudentsPerformance.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"studentsperformance","database":"$undefined"},{"id":8,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(studentsperformance, {x: \"math score\", y: \"reading score\", fx: \"test preparation course\", color: \"lunch\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"