Welcome to CPS 4745

Welcome to CPS 4745 (Visualization Design and Development)

Starting in Fall 2024, CPS 4745 (Visualization Design and Development) will no longer be co-listed with CPS 5745 (Data Analytics and Visualization). From that point forward, CPS 4745 will have distinct materials, assignments, and exams separate from CPS 5745. CPS 4745 will place greater emphasis on visualization design and basic development, while CPS 5745 will focus more on analytics and advanced visual development.

Students who take CPS 4745 in Fall 2024 will be eligible to take CPS 5745 in Fall 2025. However, students who took CPS 4745 in Fall 2023 cannot take CPS 5745 in Fall 2024, as the two courses were co-listed at that time and shared the same teaching content and exams.

In both courses, students will learn about online visualization design and development, gaining hands-on experience. Both courses emphasize development using JavaScript, PHP and MySQL, which involves a significant amount of coding. If you don't like coding, please do NOT take these two courses. CPS 4745 is a required course of B.S. Computer Science (Data Science Option). Students are encouraged to take CPS 4721/5721 (Data Mining) in the spring semester, if they are interested in Data Science. Please click here to see all CS/IT programs at Kean University.

In CPS 4745, we will cover the following topics:

Data visualization concepts
Basic graphs, independent vs dependent variables
Tools: Tableau, MS Power BI, Google Looker studio, Excel functions & graphs
HTML, DOM, HTML inputs, CGI
Interaction between HTML form inputs and graphs
Web technology, 3-tier architecture, client/server, file upload
Integration and interaction between front-end and back-end
SQL DML, aggregations, group by
SQL DDL, upload CSV to MySQL
Materialized view, data mart and data visualization
SQL query performance and data visualization
PHP, PHP MySQL
JavaScript, function, events, event handling
Debugging JavaScript using browser console
Debugging PHP MySQL
jQuery, Ajax, callback function
JSON format and processing
Google Charts, Google Maps, Google Analytics
Interactive, dynamic and realtime visualization design
Online visualization case study
Dashboard design and development
How to present - datasets, graphs, results, and information

CPS 4745 Prerequisite
Students are expected to have a solid experience of SQL and PHP MySQL on the first day of class.
The prerequisite is CPS 3740 for CPS 4745 and (CPS 3740. If you have not completed the prerequisite, you should withdraw from the class. The projects focus on online data visualization - web database applications based on CPS 3740 projects.

Note: This course is available only in the fall semester.

Instructor: Dr. Ching-yu (Austin) Huang

Class information:

All the class materials (syllabus, slides, assignments, tools) are posted on the class Google drive. You must use the Kean email account to access the folder.
You can access the latest syllabus here.
This is a hands-on course. Students are required to bring a personal laptop to every class.
Instructional Methods: lecture with slides, student presentations, class discussions and exercises, and project creations.
Course grading: please see the course syllabus.
Grading policy: Total 1000 points.
A: >=940, A-: 939-890, B+: 889-840, B: 839-800, B-: 799-760, C+: 759-720, C: 719-680, D: 679-640, F: below 640
(C or better is needed for CS and IT majors.)

CPS 4745 Course Description
This course will focus on software design and development to represent data in visual formats from various data sources. Students will learn how to develop applications and present information from the database in understandable and effective methods in charts, graphs, dashboards, and dynamic web pages. Students will do hands-on projects and compare their results with popular visualization software.

CPS 4745 Student Learning Outcomes
Upon completion of this course, the student will be able to:

Explain the key techniques and theory used in visualization, including data models, graphical perception and techniques for visual encoding and interaction.
Present information in an understandable, effective, and aesthetic manner, for the purposes of explaining ideas and analyzing data.
Utilize popular API and software to visualize data
Design visual tools that allow the user to visualize and interact with data from the database.

Books and resources

Textbook 1: Interactive Data Visualization for the Web, 2nd Edition. Scott Murray, O'Reilly Press, 2017. ISBN-10: 9781491921289, ISBN-13: 978-1491921289.
Textbook 2: D3.js in Action, Second Edition: Data visualization with JavaScript
D3-book example codes at GitHub
Javascript Data Visualization Libraries
Web programming resources on Samurai website

In addition to the written exams, this combined course requires students to study and present 2 selected D3.js Data Visualization topics and implement 2 big projects on a Linux server. We will use HTML, JavaScript, jQuery, Ajax, PHP MySQL, Python, D3.js, Google Maps, and Google Charts for the projects. The data will be from CSV files and MySQL database.

Requirements - Students will need the followings to do exercsies and assignments:

Students need to download and install Kean VPN.
- https://www.kean.edu/software (Kean authentication is required.)
- The VPN server name should be: sslvpn.kean.edu/student
Students will use Kean email to login to obi.kean.edu (a Linux server): Hostname: obi.kean.edu, port: 22, protocol: ssh
Windows: Use "PuTTY" software to connect to the Linux server. You can download putty from http://www.putty.org/
Mac: Use "terminal" software. Please refer to this tutorial.
FileZilla-Client to transfer files between the Linux server and your desktop/laptop. You can download FileZilla-Client at https://filezilla-project.org/download.php?type=client
The hostname and port # is the same as above. Protocol should be "sftp". The logon type should be "normal". You need to enter the user login and password.
A good text editor: sublime, visual studeio code, or others. You can download sublime at https://www.sublimetext.com/3
Create public_html and CPS4745 folder under your home directory on obi.kean.edu, and set proper permission for the folders and files.
- For CPS4745, create and test your database account by following this procedure.
Practice these basic Unix commands: cd, ls -la, more, pwd, mkdir, rm, mv, cp, chmod, etc. Please refer to this Unix command document.

You should review the basic Unix, SQL, and PHP MySQL before the class starts. We will quickly go through these topics and then focus on JavaScript, jQuery, Ajax, and interactive/automated visualization design. You can refresh Unix commands, SQL and PHP MySQL at the following links:

HTML at W3Schools
SQL
PHP
PHP MySQL functions
You need to know the basic Unix commands.
You can see more resources on the Code Samurai website.

You can get help from the Samurai program for basic Web Database Programming. Samurai will host group review sessions for some topics related to the web & database. You can see the Samurai schedule and VIRTUAL walk-in hours at Code Samurai Program.

Samples might be used in the Data Visualization class. Please save the source codes in proper extension and use Sublime Text Editor or other good editor to view the source codes. The JavaScript function/method/property of the object will be automatically prompted in the editor.

sample menu

Display calendar from Unix
Upload a CSV file to the server and sort the output by a selected column, refer to CPS 3525
Unix cron job

Display client's weather information, refer to CPS 3525

Upon completion of this course, the student will be able to do the following projects:

COVID-19 Visualization

Other online visualization tools