This repository is the home of our exciting project on student performance visualization. Dive in to explore!
Order | Name | ID | Github account | ||
---|---|---|---|---|---|
1 | Nguyen Hong Son | ITDSIU21117 | [email protected] | Son-SDT | Son Son |
2 | Nguyen Nhat Khiem | ITDSIU21091 | [email protected] | Khim3 | Khiem Nguyen |
3 | Nguyen Tri Tin | ITDSIU21123 | [email protected] | MicroGix | Tin Nguyen |
4 | Trinh Binh Nguyen | ITDSIU21103 | [email protected] | NguyenTrinh308 | Nguyên Trịnh |
Prerequisites: Make sure that the following dependencies are installed on your machine:
- Git
- Javascript
- CSS
- Web Browsers (Edge, Chrome, Firefox)
Install Project: Navigate to your local project directory, open main folder and add necessary packages (link D3 library and other CSS libraries).
Education is the cornerstone of societal progress and individual growth. However, student performance can be influenced by a myriad of factors. Understanding these factors is crucial for educators, policymakers, and parents alike, as it can guide interventions and strategies to enhance learning outcomes.
In this project, we focus on five key factors that might impact student performance:
-
Gender: Research has shown that gender can influence academic performance in different ways. Our tool allows users to explore how gender might interact with other variables in affecting student outcomes.
-
Group: The social and cultural group a student identifies with can have significant effects on their academic performance. This project aims to visualize these effects.
-
Parental Degrees: The level of parental education often correlates with a student's academic performance. Our tool provides insights into how parental education levels might influence student outcomes.
-
Lunch Type: Nutritional factors, such as the type of lunch a student has, can impact their academic performance. Our project aims to shed light on these relationships.
-
Test Preparation: The level of test preparation can significantly affect a student's performance. Our tool allows users to understand the impact of different levels of test preparation.
By visualizing these factors, we aim to provide a comprehensive, intuitive, and interactive tool that allows users to explore and understand the complex interplay of variables that contribute to academic success.
This data visualization project utilizes a number of tools to function properly:
-
JavaScript: This is the primary programming language used for creating the interactive visualizations.
-
Web Browser: The visualizations are designed to be viewed in a web browser. Any modern browser like Chrome, Firefox, Safari, Edge, etc., should work.
-
Data Processing Libraries: Python the main tool for reading and preprocessing data in this project.
-
Development Tools: Tools like Git for version control, Visual Studio Code for implementation.
This data visualization project is designed to provide an insightful and interactive experience for users. Here are some of the key features:
-
Insightful Dashboard: The dashboard provides a comprehensive view of the data, allowing users to quickly understand the key insights. It includes various charts and graphs that represent different aspects of the data.
-
Interactive Visualizations: The visualizations are not just static images, but interactive elements. Users can hover over data points to see more details, click to filter data, and adjust settings to customize the view.
-
User-friendly Interface: The interface is designed to be intuitive and easy to use, even for non-technical users. It includes clear labels, tooltips, and a help guide to assist users in navigating the dashboard.
- Familiarity to Web development suit: As newcomers to JavaScript and web development, we faced a steep learning curve. Understanding the syntax, functionalities, and nuances of JavaScript, along with grasping the fundamentals of web development, was a significant challenge. We had to spend considerable time and effort in learning and practicing these skills before we could effectively apply them to our project.
- Project size and control: The sheer size of the project posed another difficulty. With multiple components and layers to manage, it was challenging to maintain control over each part. Ensuring that all parts worked together seamlessly required careful planning, coordination, and thorough testing. We had to adopt a systematic approach to break down the project into manageable tasks and monitor the progress of each task closely.
- Cross device compatibility: Another challenge we faced was ensuring that our visualization was accurately represented across different devices. Given the varying screen sizes and resolutions of devices, it was difficult to create a design that looked and functioned consistently. We had to consider factors like scalability and responsiveness to ensure that our visualization provided a uniform user experience, regardless of the device used.
- Seshapanpu, J. (2019). Student Performance In Exams. Available at: https://www.kaggle.com/code/spscientist/student-performance-in-exams/notebook (Accessed: 25 Sept 2023)
- Holtz, Y. (n.d.). The D3 Graph Gallery – Simple charts made in d3.js. Available at: https://d3-graph-gallery.com/ (Accessed: 14 August 2023)
- PoojaSharma. (2023) Student Performance Dashboard. Available at: https://www.novypro.com/project/student-performance-dashboard-power-bi (Accessed: 29 Sept 2023)
- W3Schools. (n.d.). Learn to Code - With the world's largest web developer site. Available at: https://www.w3schools.com/ai/ai_d3js.asp (Accessed: 21 Sept 2023)
- Observable. (n.d.). The JavaScript library for bespoke data visualization. Available at: https://d3js.org/ (Accessed: 30 Sept 2023)