2b:null 2c:["$","title",null,{"children":"Data Visualisation Project | Chris Greer | Observable"}] 31:T4c7,## Introduction to the data The dataset I chose for visualising is: Cortez, P. (2008). Student Performance [Dataset]. UCI Machine Learning Repository. https://doi.org/10.24432/C5TG7T. It comprises two related datasets containing various attributes of individual students at a Portuguese High School studying both Maths and Portuguese over a year (divided into 3 temporal periods/semesters). It was sourced from school reports and questionnaires and has no missing values. ### Pre-Processing (R lines 19 - 66) The data comprises 382 cases (students) reportedly studying both subjects. I combined the datasets and found that only 370 students had consistent matching data across both subjects, so I excluded the 12 students with mismatched data to ensure consistency. I transformed the interval-scale grade (/20) attributes into percentages to more easily analyse these and created combined averages between the two subjects for each period e.g. G3p_Comb. ### Additional Data For Q8, I used additional data, Tables 53-56 from The European School Survey Project on Alcohol and Other Drugs (ESPAD). The use of this dataset is covered after my visualisation for question 8. http://www.espad.org/report/additional-tables 32:T618,## Assessing the fitness of the data #### Strengths: The dataset includes a range of attributes, including nominal (e.g. guardian, gender), ordinal (e.g. study time, alcohol consumption) and quantative (e.g. grades, number of absenses). These cover a diverse range of demographic, behavioral and performance-related dimensions, making it well suited for answering a variety of questions (including those proposed above) about relations between attributes and their impact on student performance. It also has no missing values which means there was no need to discard any cases or potentially introduce biases from data manipulation (although this may already have been done on the original source data). #### Limitations: One potential limitation is that some of the attributes are self reported (e.g. alcohol consumption, study time etc). This could vary based a student’s perspective and honesty, which potentially makes them less reliable. Other data comes from school reports although the dataset doesn't make it clear which attributes are sourced from which method. This makes it difficult to assess the reliability of individual attributes. Additionally, the dataset only covers 370 cases (students) over a single year. Expanding on the data to include more cases accross more temporal periods could help give more weight to any patterns that are found and to potentially negate any false patterns. #### Conclusion: While the data could be improved upon, I believe it’s a solid dataset to answer the initial questions and for further analysis. 33:T599,//Custom grouped box plot (bit of a 'customisation' (/misuse) of the api) //Needed to shift boxes and add custom rules to include the correct tick values Plot.plot({ title: "Distribution of Final Grades in Maths and Portuguese by Quality of Family Relationships", marks: [ //Maths Boxes (shifted left) Plot.boxY(Q1Data, { y: "G3p_Mat", //Shift the boxes so they both fit! x: (d) => Number(d.famrel) - 0.25, fill: "skyblue", stroke: "darkblue", }), //Portuguese Boxes (shifted right) Plot.boxY(Q1Data, { y: "G3p_Por", x: (d) => Number(d.famrel) + 0.25, fill: "lightgreen", stroke: "darkgreen", }), //Custom rule for enclosing the boxes ...[1.5, 2.5, 3.5, 4.5].map(x => Plot.ruleX([x], {stroke: "lightgrey"})), //Custom (hidden) rule to ensure I can add correct ticks ...[1, 2, 3, 4, 5].map(x => Plot.ruleX([x], {stroke: "white"})), Plot.ruleY([0]), ], x: { //Custom ticks (required custom (hidden) rule above) ticks: [1, 2, 3, 4, 5], label: "Quality of family relationships (1 - very bad to 5 - excellent)", }, y: { grid: true, label: "Final Grade %", domain: [0,100], tickFormat: d => `${d}%`, tickSpacing: 20 //Used to get ticks every 5 }, color: { legend: true, domain: ["Maths", "Portuguese"], range: ["skyblue", "lightgreen"] }, marginLeft: 60, width: 800, })34:T4da,### Visual Encoding I created a grouped box plot to visualise grade percentages against the ordinal attribute, Quality of Family Relationships (famrel), and grouped by subject with Maths and Portuguese side by side for each famrel level. This design choice allows for easy comparison of quantitative grade distributions across both subjects while effectively showing the general trends at each level of famrel. Initially, I tested a bar plot by calculating averages for each group. While this approach effectively showed average grades, it lacked the ability to show the full distribution of grades. By switching to a box plot, I could display not only the median and interquartile range, but also potential outliers, providing a more expressive view of the variability within each famrel level. I also initially split Maths and Porguguese into seperate vertical plots for each. However, during the refining stage, I adapted the visualisation into a grouped box plot. This harnesses Gestalt principles, such as proximity (subjects in same famrel) and similarity (colour coding between subjects) to visually group and allow comparison. ### Data Processing (.R lines 70 - 80) - Filtered just the relevant columns (famrel, G3p_Mat, G3p_Por)35:T4f6,### Visual Encoding I initially tested using a scatter plot to visualise this relationship, but with hundreds of students, and a relatively narrow range of values for both grades and absences, the scatter plot became very cluttered which made it difficult to identify any meaningful patterns. Upon refining my approach, a heatmap proved to be a much better choice because it helped avoid issues with overlapping points while still being able to identify areas of high and low concentrations of students, allowing for pre-attentive processing and quickly finding patterns. I also then used facets to split the subjects to enable comparing the differences between the subjects as well as the overall trends. ### Data Processing (.R lines 84 - 121) - Filtered out outliers, students with over 40 absences in either Maths or Portuguese. This removed three students with exceptionally high absences in Maths. - Created an "absences_Comb" column, which averages absences across both subjects. - Parsed the data by pivoting it into long format, splitting it into new columns for facet key (subject) and corresponding absences and grades. - Introduced a 'facet_key' to distinguish which subject each row reffered to (for faceting) - Selected (facet_key, absences, and grade)36:T514,Plot.plot({ marks: [ Plot.line(Q3Data, { x: "Period", y: "value", z: "Consumption", stroke: "Consumption", //Split by subject and Type (Dalc/Walc) fx: "Subject", fy: "Type" }), Plot.dot(Q3Data, { x: "Period", y: "value", fill: "Consumption", fx: "Subject", fy: "Type", //Add tooltips to points to show more info title: d => `Period: ${d.Period} \nAlcohol Consumption: ${d.Consumption} \nAve Grade: ${d.value}% \nTotal Students: ${d.Count}`, tip: true, symbol: "circle", }), //Add rule to make it clearer where one begins/ends vertically Plot.ruleY([35]) ], facet:{marginRight: 100}, //It was cutting off weekend/workday lables fy: {label: "Alcohol Consumption"}, x: { label: "Period" }, y: { label: "Average Grade (%)", grid: true, tickFormat: d => `${d}%`, domain: [35, 70] //Restrict to better view the range }, color: { legend: false, //Have had to manually add in HTML as label wasn't showing... label: "Alcohol Consumption Level", domain: ["1", "2", "3", "4", "5"], range: ["#00FF00", "#FFFF00", "#FF8C00", "#FF4500", "#8B0000"] }, width: 800, height: 550 }); 37:T829,### Visual Encoding I chose a line graph to show the trends in the quantitative grades over the temporal periods and to allow plotting the multiple groups (alcohol consumption levels) in a way that they could be easily distinguished and compared. I chose an intuitive (green to red) colour encoding for the alcohol consumption levels so that their meaning could be pre-attentively processed without needing to keep looking back to the legend. I originally plotted both Maths and Portuguese on the same graph, distinguishing the two using different shaped dots and different line styles. This did allow comparing the two directly but ended up looking quite cluttered and made it hard to see patterns clearly. Instead, I opted for a faceted layout, placing the two side by side to and relying on the principle of similarity (by colour) to allow for easy comparison but avoid the issue of overlapping. Previously I also added interaction that enabled toggling between workday and weekend consumption. However, I found that showing these split vertically made for a clearer and more expressive comparison of the two without needing stage 2, sequential processing. Finally, I added tooltips which show the exact grades and student counts for each group to enable deeper exploration of the data. ### Data Processing (.R lines 125 - 175) I created a function which did the following for each of Workday (Dalc) and Weekend (Walc) consumption: - Renamed the relevant column (Dalc/Walc) to "Consumption" for consistent processing, - Grouped by this (Consumption) column. - From these groups, summarised the data, first by counting the total students in each group and then averaging the grades (to 2dp) for each combination of period (G1-3) and subject (Maths/Portuguese). - Parsed the data by pivtoting it into long format, splitting it into new columns for Period and Subject. - Added a 'Type' column to distinguish between Dalc and Walc - Renamed "Mat" and "Por" to "Maths" and "Portuguese" for clarity. After running this on Dalc and Walc I combined the results into in a single dataset.38:T966,### Visual Encoding My visual encoding for this was somewhat unorthodox. While scatter plots are usually used on quantitative variables, I wanted a way to be able to highlight individual data points (students) while also comparing the two ordinal variables (traveltime, studytime). I aimed to use the concept of 'density' to show the approximate number of students in each category. I did this by using jittering to offset the data slightly and reduce overlap. I then enclosed the points within boxes to clearly represent their respective travel and study time. I also used a colour scale to represent students’ final grade percentages. Usually, hue isn't the ideal way to encode quantitative data since viewers can't pre-attentively distinguish between small differences in final grade. For my purpose though, aligning with the principle of importance ordering, I wanted the main focus to be on Study Vs Free Time but to still be able to get an idea of whether students with a given combination (e.g. low travel, high study) had better/worse grades in general. To further separate grades, and avoid cluttering, I used a variation of a Trellis display to split the data based on the grade and added a legend with ticks at the relevant splits to add clarity. I then added tooltips to include interactivity and allow users to see the exact attributes of a selected student (e.g. users could single out that the single student with very high travel and study time achieved a 60% combined grade). I initially considered using a Crosstab plot, which this is somewhat similar to as it groups data into categories. However, this wouldn't have allowed me a way to also visually include final grade for each individual student, so wasn't effective for this question. Similarly, I tested using a 3D plot (using an example from: https://observablehq.com/d/aa6c99acc5024e41) but also found it to be innefective. The clustering of my data and requirement of stage 2 sequential processing (interaction) made it less effective at determining patterns. ### Data Processing (.R lines 180 - 216) - Filtered just relevant columns (traveltime, studytime, G3p_Comb, G3p_Mat, G3p_Por) - Created new columns traveltime_jit and studytime_jit which jitter() (up to 0.4) their respective columns. - Created an additional 2 columns facet_x and facet_y to split the data. - Dropped the original traveltime & studytime columns39:T7a9,## Further exploration From the visualisation for ***Q1*** there was a lot of variation of final grade between different family relationship levels in both subjects so didn't seem to be a strong correlation. I still wanted to investigate whether family plays a role so I posed the following question: - ***Q5 – Is there a correlation between parents’ education level and grades? Is the relationship stronger for the father or the mother, or is the guardian’s education level the most significant factor?*** From the visualisation for ***Q2*** I spotted that there were many students with more absences than I would expect so I wanted to investigate this further. I did attempt to find more sources of data on student absences in Portugal but couldn't find anything reliable. Going back to the data I did have, this led me to two further questions regarding absences (and ignoring grades for now): - ***Q6 - Is there a relationship between students' average absences across both subjects, their health, and their weekday alcohol consumption?*** - ***Q7 - Do absences vary by gender and is this consistent between subjects?*** From the visualisation for ***Q3*** I determined that alcohol was a factor in student performance. By interacting with the data through tooltips, I found out that the vast majority of students reported very low alcohol consumption (1-2). I wanted to investigate this further, using data obtained from ESPAD (Tables 53-56 in http://www.espad.org/report/additional-tables), to ask the question: - ***Q8 - Is there a general trend in Portuguese students' alcohol consumption over the years, and where does my data from 2008 fit into it?*** From the visualisation for ***Q4*** I found that in general most students had low Travel Time and yet there was still a range in their reported Study Time. Study time did seem to have an impact on grades but there wasn't a clear correlation, so I chose not to investigate this further.3a:T72c,### Visual Encoding I initially tested using a boxplot which effectively showed the spread of grades but wasn't suitable for comparing average grades across all the different parents types and education levels. On refining my approach, I opted to use a grouped bar plot which allowed me to effectively show the average grades for each parent (colour coded to harness similarity) side by side and split by education level. I originally created only one graph using combined grades for each subject but wanted to investigate further whether the correlation was stronger for Maths or Portuguese. To achieve this, I applied faceting, splitting the graph by subject to highlight potential differences between Maths and Portuguese while maintaining clarity. Finally, I added filtering to add interactivity to the visualisation. This allows users to focus on a specific parent category or even compare two at a time. This makes it so that you can view the trends for one or two parent group(s) without distraction from the other(s), reducing clutter and improving expressiveness and effectiveness. ### Data Processing (.R lines 221 - 264) - Parsed the data by reshaping into separate data frames for mother, father, and guardian, associating each with the relevant Parent_Education (ignoring "other" guardians). - Filtered to just the relevant columns (Parent, Parent_Education, G3p_Mat, and G3p_Por) - Filtered outliers with Education level of 0 (only 3 records so wouldn't be a reliable comparison). - Parsed the data by pivoting it into long format, splitting it into new columns for Subject and Average_Grade. - Renamed the subject columns from G3p_Mat and G3p_Por into "Maths" and "Portuguese" and capitalised the Parent labels. - Grouped the data by Parent, Parent_Education, and Subject, then created average grades for each group.3b:T6b9,//Uses toggling to switch between Absences Vs Alcohol (split with health) and Absences Vs health (Split by alcohol) Plot.plot({ title: Q6Selection == "splitByHealth" ? "Heatmap of Student Absences vs. Workday Alcohol Consumption, split by Health" : "Heatmap of Student Absences vs. Health, split by Workday Alcohol Consumption", marks: [ Plot.rect( Q6Data, Plot.bin( {fill: "count"}, { x: {value: "absences", interval: 5}, // Bin absences into groups of 5 y: { value: Q6Selection == "splitByHealth" ? "Walc" : "health", interval: 1 //Single intervals because Ordinal data }, } ) ), Plot.ruleY([1]) ], facet: { data: Q6Data, y: Q6Selection == "splitByHealth" ? "health" : "Walc", label: Q6Selection == "splitByHealth" ? "Health (1 - very bad to 5 - very good)" : "Workday Alcohol Consumption (1 - very low to 5 - very high)", }, fy: {reverse: true}, x: {label: "Average Absences (Maths & Portuguese)"}, y: { label: "Workday Alcohol Consumption (1 - very low to 5 - very high)", label: Q6Selection == "splitByHealth" ? "Workday Alcohol Consumption (1 - very low to 5 - very high)" : "Health (1 - very bad to 5 - very good)", //Same domains and ticks domain: [1,7], ticks: [1,2,3,4,5], tickFormat: d => Math.round(d), }, //Don't need to change colour coding color: { type: "linear", legend: true, label: "Number of Students" }, grid: true, width: 800, height: 600, marginRight: 70 }); 3c:T444,### Visual Encoding I chose to stick with a heatmap for similar reasons as in the initial question ***Q2***. It's effective for visualising the concentration of students across different ranges of absences while comparing the ordinal attributes of Alcohol Consumption and Health in an expressive way. As I was comparing Absences with two similar ordinal data types (Alcohol Consumption and Health), both with the same range of possible values. I decided to add interaction in the form of reconfiguring. This allows the user to determine which attribute to show on the y axis and which to use for faceting. Toggling between the two views of the same data allows for exploration and gaining a deeper understanding of how absences correlate with these two attributes. ### Data Processing (.R lines 268 - 288) - Filtered outliers with over 40 absences in either subject. - Calculated average absences between the two subjects: 'absences'. - Filtered out any students with 0 average absences(only wanted to look at those with absences). - Selected the relevant columns (health, absences, Walc)3d:T667,### Visual Encoding I chose to use a combination of plots for this question. Firstly, I created overlapping histograms which allowed me to compare the distribution of absences between genders within each range. This made for intuitive comparisons as the overlapping bars highlight which gender had more absences in specific ranges (e.g. 29–35 absences) in a pre-attentive way using colour to distinguish. I also then created a boxplot as I wanted to see the mean, variability, and outliers in absences for each gender and subject. This gives further insights into the general range of absences and whether certain genders or subjects show greater variability. The decision to use both visualisations was down to their complementary strengths. Together, they provide a more complete view of the data, aligning with the principles of expressiveness and effectiveness by ensuring that both detailed distributions and aggregated statistics are clearly communicated. The colour encoding for genders (shared between both plots) also adds clarity by harnessing the principle of similarity to group the data visually and more easily compare the seperate plots. ### Data Processing (.R lines 292 - 322) - Selected the relevant columns (sex, absences_Mat, absences_Por) - Filtered outliers with over 40 absences in either subject. - Parsed the data by pivoting it into long format, spliting absences into new rows by subject - Replaced "absences_Mat" and "absences_Por" with "Maths" and "Portuguese" and converted absences to numeric. - Similarly to ***Q6***, filtered out any records with 0 absences - Ordered the rows by subject, then sex3e:T70a,### Visual Encoding Similarly to ***Q3***, I decided to use a line graph which harnesses connectedness to expressively show trends over time. In this case, the quantitative percentages (of yes responses), across the temporal years. I plotted the different questions as (colour coded) groups in order to show how responses changed over the years. To enhance the clarity of the comparisons, I split the data using faceting, separating the responses by gender and for all students as a whole. This harnesses further Gestalt principles, particularly proximity and similarity, to visually group the points and avoid clutter. I added an annotation as a vertical line at 2008 to mark the year where my main dataset of students fits into the trends. This allows users to pre-attentively connect the main dataset with this new data. This aligns with the principle of expressiveness, as it directly conveys contextual information without requiring extra effort to analyse. ### Data Processing (.R lines 326 - 393) Similarly to ***Q3***, I created a function as I needed to process each of the 4 datasets in the same way: - Read the excel dataset, skipping the first two rows (containing stylised headers) - Filter to just include rows where the first column is "Portugal" - Rename the 3 groups of columns relating to Boys, Girls and Any using relevant prefixes (hardcoded to match data) - Create a vector of these prefixes and for each: - Parse data by pivoting into long format, creating rows for each year - Remove prefixes from the Years - Add Gender column based on the prefix - Combine (bind) these 3 together - Round Percent column to 2dp - Add Data_Name column representing the question asked in this data (to distinguish between) This was run on all 4 datasets and the results bound together. 3f:T68f,From the beginning, I wanted even my initial questions to pose a challenge for visualisation. This was partly because my dataset contained many inter-related attributes which I thought may have underlying patterns, but also in order to explore using a variety of different visualisation techniques. To start with I carefully reviewed the different attributes, highlighting a few that I thought might affect a student's grade, and tried to think of interesting questions that encompassed as many attributes as possible. I then considered, and often tested, various visual encodings for each to determine which was most effective, and expressive, for each question. This often required multiple stages of transformation and visual mapping in order to determine the best visualisation and then further stages of view transformation in order to add clarity to my chosen visualisation(s). I also initially included extensive interaction in the form of filtering and reconfiguring data in order to view different aspects (e.g. toggling between Workday and Weekend alcohol, filtering grade % in Q3, etc). However, as I refined my visualisations, I discovered that I could often adapt the charts to use a Trellis Display (i.e. faceted layout) in order to view this data together and more easily compare without requiring stage 2, sequential processing (interaction). Throughout the process, I focused on Gestalt principles as well as those of consistency, importance ordering, expressiveness and effectiveness. I also aimed to balance interactivity with static design choices (e.g. annotations and faceting), to enable deeper exploration and investigation while maintaining clarity.40:[{"id":"e84269912dfe91af4811335108919db87b9ded8902fe8c8f657acc6a4cefa013f686ce0c57797c0490080fe57ea1f31b46409934a0259591b98a6df3b5c0ce30","href":"https://static.observableusercontent.com/files/e84269912dfe91af4811335108919db87b9ded8902fe8c8f657acc6a4cefa013f686ce0c57797c0490080fe57ea1f31b46409934a0259591b98a6df3b5c0ce30","name":"Q1Data@3.csv","type":"text/csv","lastModified":1743674063168.193,"size":2949},{"id":"a59b1d5404f0c6e7e266f3228ce6eb37b07d02cc12ff904d61d532be8483f424b4a81522035b3866d4cb695a9a652a590082e8cc0fc988f63333607bbb8363d7","href":"https://static.observableusercontent.com/files/a59b1d5404f0c6e7e266f3228ce6eb37b07d02cc12ff904d61d532be8483f424b4a81522035b3866d4cb695a9a652a590082e8cc0fc988f63333607bbb8363d7","name":"Q7Data@7.csv","type":"text/csv","lastModified":1743674063168.193,"size":7935},{"id":"45c7f479558c11a9bd073469fd2d118aa40fc4e31737be01a377b710c3913c4c379195e757702a7e1d668d28390977c0f106c58ade7c48f4e44aec804c1e9fbd","href":"https://static.observableusercontent.com/files/45c7f479558c11a9bd073469fd2d118aa40fc4e31737be01a377b710c3913c4c379195e757702a7e1d668d28390977c0f106c58ade7c48f4e44aec804c1e9fbd","name":"Q5Data@3.csv","type":"text/csv","lastModified":1743674063168.193,"size":977},{"id":"e9e4ccd5b177cdee55f8a6f227ec00388b94a5f32b136705f051daa546e5fc29272eeab5b28198d5f7c52aed6dfe150658db164e38dd230edd1fdb05780f279f","href":"https://static.observableusercontent.com/files/e9e4ccd5b177cdee55f8a6f227ec00388b94a5f32b136705f051daa546e5fc29272eeab5b28198d5f7c52aed6dfe150658db164e38dd230edd1fdb05780f279f","name":"Q3Data@5.csv","type":"text/csv","lastModified":1743674063168.193,"size":2233},{"id":"5d39a10857d41553d18b8757e79e93edffc27a0563e59d148145a6dfa0dd4e73767e5ce95c6186f7b3c11012712b4ccdfc8db5619e255c9728c352b18d506b2f","href":"https://static.observableusercontent.com/files/5d39a10857d41553d18b8757e79e93edffc27a0563e59d148145a6dfa0dd4e73767e5ce95c6186f7b3c11012712b4ccdfc8db5619e255c9728c352b18d506b2f","name":"Q4Data@8.csv","type":"text/csv","lastModified":1743674063168.193,"size":22631},{"id":"811277a342be3de798204b15a8dcb8a4207a6b8078d05ed380eb710b010f81be77b4dcbff4a9d0d7cbf32324eb75bd9e15f38e5ee2d822326ae6a0e11b022c49","href":"https://static.observableusercontent.com/files/811277a342be3de798204b15a8dcb8a4207a6b8078d05ed380eb710b010f81be77b4dcbff4a9d0d7cbf32324eb75bd9e15f38e5ee2d822326ae6a0e11b022c49","name":"Q2Data@8.csv","type":"text/csv","lastModified":1743674063168.193,"size":17824},{"id":"b2af65a4e10a580bfc99f957cc4a363d52ffc2d1078e030db311c91c918e18340da7694b3834278b6938ed9d7bfa15f0ffc74cdcfa7a83d70e86d139f807ea33","href":"https://static.observableusercontent.com/files/b2af65a4e10a580bfc99f957cc4a363d52ffc2d1078e030db311c91c918e18340da7694b3834278b6938ed9d7bfa15f0ffc74cdcfa7a83d70e86d139f807ea33","name":"Q6Data.csv","type":"text/csv","lastModified":1743674063168.193,"size":12444},{"id":"8fbcaf6a80618e493bb7225f1a938931fdeea7e3c8cba59e1012ab666baabc4ef7c42c144be3504b8276a1f72f1042aa38b0f206507fb620783c796ed45dbd90","href":"https://static.observableusercontent.com/files/8fbcaf6a80618e493bb7225f1a938931fdeea7e3c8cba59e1012ab666baabc4ef7c42c144be3504b8276a1f72f1042aa38b0f206507fb620783c796ed45dbd90","name":"Q8Data.csv","type":"text/csv","lastModified":1743674063168.193,"size":4781}] 2f:{"id":"57b1bc965d3c482e","slug":null,"title":"Data Visualisation Project","thumbnail":"a05f619122c87782d42cb84296922bfd798d3483367ac79f58e8d0764b6359bc","access_level":"unlisted","create_time":"$D2025-04-03T09:54:23.168Z","update_time":"$D2025-04-03T09:54:23.168Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a1bd0ae20ca1a04d","login":"chris-greer","name":"Chris Greer","avatar_url":"https://avatars-next.observableusercontent.com/38d53eaa7c47debd7ac8c0d10e8e21e16286aae7e21950087b91d8a552a6da37","tier":"starter_2024","bio":""},"version":3136,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1365451b9d1ae42","login":"chris1280","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/e8c2da4ebd6cd3bf57c6194d243b4f7282095ff388e459b1d2e90c01cbfa4a74","tier":null,"bio":""}],"members":[{"type":"individual","id":"e1365451b9d1ae42","login":"chris1280","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/e8c2da4ebd6cd3bf57c6194d243b4f7282095ff388e459b1d2e90c01cbfa4a74","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualisation Project","cells":[{"id":0,"value":"# Data Visualisation Project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1777,"value":"## Initial questions\n\nFrom investigating the attributes in the dataset, I proposed to answer the following initial questions:\n\n- ***Q1 - Does the quality of family relationships impact students’ final grade, and is there a difference between Maths and Portuguese?***\n \n- ***Q2 – How does the number of absences relate to final grades in Maths, Portuguese, and a combined average of the two?***\n \n- ***Q3 – How does students' Workday and Weekend alcohol consumption impact their performance across the 3 periods (semesters) and does it impact Maths more than Portuguese?***\n\n- ***Q4 – Is there a (negative) correlation between Travel Time and Study Time of students? How do these two attributes relate to their final average grade?***\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1782,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1795,"value":"## Q1 - Does the quality of family relationships impact students’ final grade, and is there a difference between Maths and Portuguese?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":992,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1804,"value":"## Q2 – How does the number of absences relate to final grades in Maths, Portuguese, and a combined average of the two?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3056,"value":"Plot.plot({\n title: \"Heatmap of Student Absences vs. Final Grade\",\n marks: [\n Plot.rect(\n Q2Data,\n Plot.bin(\n {fill: \"count\"},\n {\n //Clearer & easier to interprete with custom intervals\n x: {value: \"absences\", interval: 5},\n y: {value: \"grade\", interval: 10},\n }\n )),\n Plot.ruleY([0])\n ],\n x: {label: \"Number of Absences\"},\n y: {label: \"Student's Final Grade (%)\",tickFormat: d => `${d}%`},\n //Split based on subject (or combination)\n facet: {\n data: Q2Data,\n y: \"facet_key\",\n padding: 100,\n label: \"\" //Label was overlapping and it's clear what they refer to\n },\n //Using linear scale to show count of students\n color: {\n type: \"linear\",\n legend: true,\n label: \"Number of Students\"\n },\n grid: true,\n width: 800,\n height: 600,\n marginRight: 70\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1807,"value":"## Q3 – How does students' Workday and Weekend alcohol consumption impact their performance across the 3 periods (semesters) and does it impact Maths more than Portuguese?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1320,"value":"

\n Average Grade Across Periods (Semesters) by Alcohol Consumption\n
_{Alcohol Consumption (1 - very low to 5 - very high)}\n ${Plot.legend({\n color: {\n domain: [\"1\", \"2\", \"3\", \"4\", \"5\"],\n range: [\"#00FF00\", \"#FFFF00\", \"#FF8C00\", \"#FF4500\", \"#8B0000\"]\n }\n })}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2481,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1810,"value":"## Q4 - Is there a (negative) correlation between Travel Time and Study Time of students? How do these two attributes relate to their final average grade?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1591,"value":"

\n Study Time vs. Travel Time, Colour-Coded and split by Final Grade\n
\n ${Plot.legend({\n color: {\n type: \"sequential\",\n domain: [0, 100],\n scheme: \"RdYlGn\", //Q4ColourScale\n label: \"Final Combined Grade %\",\n tickFormat: d => `${d}%`,\n ticks: [0,25, 40, 55 , 70 , 85, 100]\n },\n width: 300\n })}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1438,"value":"Plot.plot({\n marks: [\n Plot.dot(Q4Data, {\n x: \"traveltime_jit\",\n y: \"studytime_jit\",\n fx: \"facet_x\",\n fy: \"facet_y\",\n symbol: \"circle\",\n stroke: d => Q4ColourScale(d.G3p_Comb),\n title: d => `Combined Grade: ${d.G3p_Comb}%\n \\nMaths Grade: ${d.G3p_Mat}%\n \\nPortugese Grade: ${d.G3p_Por}%`,\n tip: true,\n }),\n // Add gridlines to make it easier to see values\n ...[1.5, 2.5, 3.5].map(x => Plot.ruleX([x], {stroke: \"lightgrey\"})),\n ...[1.5, 2.5, 3.5].map(y => Plot.ruleY([y], {stroke: \"lightgrey\"})),\n Plot.ruleY([0.5]),\n Plot.ruleX([0.5])\n ],\n fx: {axis: null},\n fy: {axis: null},\n x: {\n label: \"Travel Time\",\n domain: [0.4, 4.4],\n ticks: [1, 2, 3, 4],\n tickFormat: d => Math.round(d)\n },\n y: {\n label: \"Study Time\",\n domain: [0.4, 4.4],\n ticks: [1, 2, 3, 4],\n tickFormat: d => Math.round(d)\n },\n width: 800,\n height: 500\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1924,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1814,"value":"## Q5 – Is there a correlation between parents’ education level and grades? Is the relationship stronger for the father or the mother, or is the guardian’s education level the most significant factor?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"Plot.plot({\n title: \"Parents Education against Average Student's Final Grade %\",\n marks: [\n Plot.barY(Q5Filtered, \n {\n fx: \"Parent_Education\",\n fy: \"Subject\",\n x: \"Parent\",\n y: \"Average_Grade\",\n fill: \"Parent\",\n sort: {x: \"y\"}\n }),\n Plot.ruleY([0])\n ],\n facet: {marginRight: 70}, //Also getting cut off\n x: {axis: null}, //Don't need as showing by colour\n y: {\n label: \"Average Student's Final Grade %\",\n tickFormat: d => `${d}%`,\n domain: [0, 70],\n grid: true\n },\n fx: {label: \"Parent's Education Level: 1 - primary education (4th grade), 2 - 5th to 9th grade, 3 - secondary education or 4 - higher education.\",},\n color: {\n domain: [\"Father\", \"Mother\", \"Guardian\"],\n range: [\"blue\", \"red\", \"green\"],\n legend: true\n },\n width: 700\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"viewof selectedParents = Inputs.checkbox([\"Father\", \"Mother\", \"Guardian\"], {\n value: [\"Father\", \"Mother\", \"Guardian\"], // Initially all selected\n label: \"Filter by Parent\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2215,"value":"## Q6 - Is there a relationship between students' average absences across both subjects, their health, and their workday alcohol consumption?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2217,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2701,"value":"viewof Q6Selection = \n Inputs.select(\n new Map([\n [\"Absences vs Alcohol (split by Health)\", \"splitByHealth\"],\n [\"Absences vs Health (split by Alcohol)\", \"splitByAlcohol\"]\n ]),\n {value: \"splitByHealth\", label: \"Comparison Type:\", width: 280}\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2748,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2015,"value":"## Q7 - Do absences vary by gender and is this consistent between subjects?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1940,"value":"Plot.plot({\n grid: true,\n marks: [\n Plot.rectY(\n Q7Data,\n Plot.binX(\n {y2: \"count\"}, \n {\n x: \"absences\", \n fx: \"subject\", // Split between Maths and Portuguese\n mixBlendMode: \"multiply\", //Overlapping bars\n fill: \"sex\", \n // Customised thresholds to avoid 0 and also include a wide bin at the end\n thresholds: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 35]\n }\n )\n )\n ],\n facet: {label: \"Subject\"},\n x: {\n label: \"Number of Absences\",\n tickSpacing: 40,\n ticks: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 35]\n },\n y: {\n label: \"Student Count\",\n domain: [0, 48] // Set y-axis range (Was going above)\n },\n color: {\n domain: [\"F\", \"M\"],\n range: [\"pink\", \"lightblue\"],\n label: \"Gender\",\n legend: true\n },\n width: 800\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2034,"value":"Plot.plot({\n grid: true,\n facet: {\n data: Q7Data,\n y: \"subject\",\n label: \"\",\n marginRight: 70,\n },\n marks: [\n Plot.boxX(Q7Data, {\n x: \"absences\",\n fy: \"subject\",\n y: \"sex\",\n fill: \"sex\",\n stroke: \"black\",\n }),\n ],\n color: {\n domain: [\"F\", \"M\"],\n range: [\"pink\", \"lightblue\"],\n legend: true\n },\n x: {\n label: \"Number of Absences\",\n inset: 20,\n domain: [1, 32]\n },\n y: {label: \"Gender\"},\n width: 800,\n height: 170\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2767,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2225,"value":"## ***Q8 - Is there a general trend in Portuguese students' alcohol consumption over the years, and where does my data from 2008 fit into it?***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2231,"value":"Plot.plot({\n title: \"Portuguese students' use of any alcoholic beverages (1995-2015)\",\n marks: [\n Plot.line(Q8Data, {\n x: \"Year\",\n y: \"Percent\",\n stroke: \"Data_Name\",\n strokeWidth: 2,\n }),\n Plot.dot(Q8Data, {\n x: \"Year\",\n y: \"Percent\",\n stroke: \"Data_Name\",\n fill: \"Data_Name\",\n title: d => `${d.Data_Name} - ${d.Percent}% \\n(${d.Gender})`,\n tip: true,\n }),\n Plot.ruleY([0]),\n //Add a line showing where my main dataset fits in\n Plot.ruleX([\"2008\"], {\n strokeDasharray: \"4,4\",\n }),\n ],\n //Split by gender\n facet: {\n data: Q8Data,\n x: \"Gender\",\n marginRight: 50\n },\n x: {label: \"Year\", type: \"point\"},\n y: {\n label: \"Yes %\", //Better label?\n grid: true,\n domain: [0,100],\n tickFormat: d => `${d}%`\n },\n color: {\n label: \"Data_Name\",\n legend: true,\n },\n width: 800,\n height: 500,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2535,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Reflection on the development process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2510,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2237,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":989,"value":"Q1Data = FileAttachment(\"Q1Data@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"Q2Data = FileAttachment(\"Q2Data@8.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"Q3Data = FileAttachment(\"Q3Data@5.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"Q4Data = FileAttachment(\"Q4Data@8.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"//Used for Q4 Scale\nQ4ColourScale = d3.scaleSequential(d3.interpolateRdYlGn).domain([0, 100]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"Q5Data = FileAttachment(\"Q5Data@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"Q5Filtered = Q5Data.filter(d => selectedParents.includes(d.Parent))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2219,"value":"Q6Data = FileAttachment(\"Q6Data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1937,"value":"Q7DataImport = FileAttachment(\"Q7Data@7.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2141,"value":"//Was getting a warning that type wasn't numeric...\nQ7Data = Q7DataImport.map(d => ({\n ...d,\n absences: +d.absences\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2227,"value":"Q8Data = FileAttachment(\"Q8Data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 30:"$2f:body"