INTERACTIVE CHART PROJECT

Course: Algorithms & Data Structures

Interactive Chart Project

Team Name: Hội người liều!

A website dashboard created with Python and HTML for Data Structure Argorithm course in International University - VNUHCM!

Table of contents 📍

1. Introduction
2. Tech stack
3. Charts
4. Features
5. Challenges
6. Acknowledgments
7. References

1. Introduction 🧱

Welcome to our first data visualization website! This is a platform designed to present information, data, and insights in visually appealing and comprehensible ways. It leverages various graphical elements such as charts, graphs, maps, infographics, and dashboards to help users interpret complex data easily.

Team Members 👨‍❤️‍💋‍👨

Order	Name	ID	Email	Github account
1	Dương Trọng Nghĩa	ITITIU21256	[email protected]	dtnghia2010
2	Ngô Thị Thương	ITCSIU21160	[email protected]	thuongngo050902
3	Nguyễn Phạm Kỳ Phương	ITITIU21287	[email protected]	npkyphuong04
4	Nguyễn Anh Thắng	ITCSIU21233	[email protected]	nathang0147

Installation 🎯

1. Open the terminal on your IDE
2. Clone the repo

   git clone https://github.com/dtnghia2010/DataVisualization

3. Check the file status

   git status

4. Change branch

   git checkout 'branch_name'

5. Install Django Framework
   • Windows:

     py -m pip install Django

   • Unix/MacOS:

     python -m pip install Django

6. Download some pakages of the project

   pip install pandas

   pip install matplotlib

   pip install sikit-learn

   pip install django-import-export

   pip install numpy

Task Allocation :

Order	Task	Person	Contribution (%)
1	Search Algorithm, Visualize Add_data and Upload_file	Ngô Thương	25
2	Linear Regression, Upload_file with CSV	Trọng Nghĩa	25
3	Interface, Delete Data	Kỳ Phương	25
4	Sort Algorithm, Rename Chart	Anh Thắng	25

2. Tech stack 🕹️

🎨Front-end:

• Language: Python
• Framework: Django
• Web Dev: HTML, CSS, Bootstrap
• Compiler: PyCharm

🛠️Back-end:

• Language: Python
• Framework: Django
• Compiler: PyCharm

3. Charts 📊

• In this project, we use templates from Chart.js to generate charts.
• Example code to create a chart

  <!-- Display your chart here using listlabels and listdatas -->
  <canvas id="myChart" width="400" height="400" class="mb-4 pt-3"></canvas>
  <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {{ listlabels|safe }},
                    datasets: [{
                        label: 'Attribute2',
                        data: {{ listdatas|safe }},
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
  </script>

4. Features 🤖

We have 2 main parts divided specifically: Add Data & Upload File. In each part, we use some features like algorithms to express them. Furthermore, we have developed one more extra feature, which is Linear Regression Algorithms - Prediction Data.

✔️Add Data:

In this field, we use some features, such as:

• Sorting Algorithm (Quick Sort Algorithm)
• Searching Algorithm (Binary Search Algorithm)
• Delete Data

✔️Upload File:

We need to provide a file that has the '.csv' extension. Therefore, the algorithms below will be used appropriately:

• Sorting Algorithm (Quick Sort Algorithm)
• Searching Algorithm (Binary Search Algorithm)

✔️Extra Feature: Linear Regression Algorithms:

Linear Regression is a supervised learning algorithm which is both a Statistical and a Machine Learning Algorithm. Based on the supplied input value X, it is used to foresee the real-valued output Y.
Similar to the Upload File section, we also need to input a file with the extension '.csv', so that the data can be converted to chart form using 'matplotlib'.

• First, we provide a file 'testData.csv' - containing population data of countries around the world; next, enter the values ​​'Brazil', '2014', '2022', '2023' into the blanks such as Label, From, To, Prediction, respectively:

  

• Then, we will have a result like this:

  

5. Challenges

• Task allocation for each team member
• Using platform for communication

6. Acknowledgments🧠

We would want to express our gratitude to Dr. Vi Chi Thanh for providing us with the chance to participate in this project and apply what we learned in theory into practice.

7. References🔖

• Python tutorial
• Django tutorial
• Add Data & Chart
• Read '.csv' file
• Django and matplotlib integration
• Linear Regression Implementation From Scratch using Python

(Back to top)