Projects
Data Science Projects
Data science projects can be found on GitHub.
Tableau Dashboard - World Business
I followed the webinar from Simililearn and used the business data to develop a Tableau Dashboard. This dashboard contained a title, the legends, and three major charts/graphs such the bar chart and the line chart. Based on the particular country/countries, we were able to see the number of days to start a business, the ease of operating businesses with businesss tax rates, and the phone and internet usage. We could filter to show the data of the selected country/countries.
Reference: Simplilearn. 2018. Tableau Dashboard | How To Create Tableau Dashboard | Tableau Training For Beginners | Simplilearn. [ONLINE] Available at: https://youtu.be/Hr5IE0qYkRs.
Tableau Dashboard - World Economy
I followed the webinar from Simililearn and used the economy data to develop a Tableau Dashboard. This dashboard contained a title, the legends, and three major charts/graphs such as the world map, the bar chart and the scatter plot. Based on the particular country/countries, we were able to see the overall GDP, the GDP on Healthcare, and the GDP vs GDP per Capita. We could also filter the data to show the data of the selected country/countries.
Reference: Simplilearn. 2018. Tableau Dashboard | How To Create Tableau Dashboard | Tableau Training For Beginners | Simplilearn. [ONLINE] Available at: https://youtu.be/Hr5IE0qYkRs.
Tableau Dashboard - World Health
I followed the webinar from Simililearn and used the health data to develop a Tableau Dashboard. This dashboard contained a title, the legends, and three major charts/graphs such as the world map, the heat map and the line chart. Based on the particular year/years and a selected country, we were able to see the birth rate rank map, the heat map for average birth rate, average health expenditures over GDP, average infant mortality rate, and the average life expectence, and the line chart for average life expectency for male and female. We could also filter the data to show the data of the selected year/years and a country.
Reference: Simplilearn. 2018. Tableau Dashboard | How To Create Tableau Dashboard | Tableau Training For Beginners | Simplilearn. [ONLINE] Available at: https://youtu.be/Hr5IE0qYkRs.
Tableau Dashboard - World Population
I followed the webinar from Simililearn and used the population data to develop a Tableau Dashboard. This dashboard contained a title and three major charts/graphs such as the world map, the trend line and the pie chart. Based on a particular year and a selected country, we were able to see the world population contribution, the world popuation trend, and the populations comparison between Asia and the rest of the world.
Reference: Simplilearn. 2018. Tableau Dashboard | How To Create Tableau Dashboard | Tableau Training For Beginners | Simplilearn. [ONLINE] Available at: https://youtu.be/Hr5IE0qYkRs.
Power BI Dashboard
I followed the webinar from MyOnlineTrainingHub and used the fictitious data to develop the Power BI Dashboard with the use of Power Query to import, clean and load data. This dashboard contained two tabs: Summary and Regions & Chain. It displayed multiple visuals such as bar chart, bubble chart, pie chart, and slicers. I also imported a custom visual chart to show data in sparklines. This dashboard was published to the My Workspace in Power BI for viewing.
Reference: MyOnlineTrainingHub. 2016. Creating Interactive Excel Dashboards. [ONLINE] Available at: https://www.myonlinetraininghub.com/excel-webinars#pbi_anchor.
In case you don't have Power BI installed, I recorded the video to show the interactive dashboard.
Interactive MS Excel Dashboard - Power Query & Power Pivot
I followed the webinar from MyOnlineTrainingHub and used the fictitious data to develop the interactive dashboard with Microsoft Excel 365 with the use of Power Query and Power Pivot. It contained multiple pivot tables, grouped slicers, line charts, bar charts, pie charts, sparklines and Maps.
Note: Due to Excel limitation, the links to the external workbooks/sources are disabled and not supported.
Reference: MyOnlineTrainingHub. 2016. Creating Interactive Excel Dashboards. [ONLINE] Available at: https://www.myonlinetraininghub.com/excel-webinars#dpq_anchor.
In case you don't have MS Excel installed, I recorded the video to show the interactive dashboard.
Interactive MS Excel Dashboard - Pivot Tables
I followed the webinar from MyOnlineTrainingHub and used the fictitious data to develop the interactive dashboard with Microsoft Excel 365 with the use of multiple pivot tables, grouped slicers, line charts, bar charts, pie charts, sparklines, and Maps.
Reference: MyOnlineTrainingHub. 2016. Creating Interactive Excel Dashboards. [ONLINE] Available at: https://www.myonlinetraininghub.com/excel-webinars#dash_anchor.
In case you don't have MS Excel installed, I recorded the video to show the interactive dashboard.
Responsive Design & Typography
This responsive website focused on using the custom-coded grid system, media queries and resized images. I created four columns for the grid system, and I used several media queries to fit the layouts in different device screen sizes. In addition, Polyfill was downloaded and applied for multiple sized images; the size of the image in the "About" page would be changed depending on the screen sizes.
Note: Htmlpreview from Github may not be able to render the CSS of the site properly. For details of the CSS file, please click the Github button to access the relevant CSS file in the repository. Thanks.
Sass & Compass
This responsive website focused on re-working the CSS into Sass. I was using Koala App (GUI) and Compass to compile the codes. The Sass codes include the usages of multiple variables, mixins, extend, nesting, built-in and if/else functions.
Note: Htmlpreview from Github may not be able to render the CSS of the site properly. For details of the CSS file, please click the Github button to access the relevant CSS file in the repository. Thanks.
Foundation
This responsive website was built with the Foundation framework. It used the Foundation's grid system and incorporated the special grid features such as nesting and source ordering. It consisted the Foundation's navigation bar, styling, and form. Moreover, the JavasScript-based widgets like Interchange, Tooltip, Reveal, Tabs, etc, were also applied.
Note: Htmlpreview from Github may not be able to render the CSS of the site properly. For details of the CSS file, please click the Github button to access the relevant CSS file in the repository. Thanks.
CSS4 Grids, Animation, Flexbox
Note: The websites must be viewed in Google Chrome with the Experimental Web Platform features enabled.
This project has three parts: Flexbox, CSS4 grids, & Animation.
- Flexbox website: it used the Flexbox grid system.
- CSS4 Grids website: it was rebuilt with the CSS4 Grids. Grid reordering and media queries were applied.
- CSS Anmiation and SVG website: in the same website, an SVG image was displayed in several types: 3D transformation, 1 second transition, @keyframes animation, and the manipulation of one internal element of an SVG image.
Note: Htmlpreview from Github may not be able to render the CSS of the site properly. For details of the CSS file, please click the Github button to access the relevant CSS file in the repository. Thanks.
Positioning, Forms, CSS3 Styling
This three-column layout website was developed with the netvigation bar that could be accessed from all pages. It made use of float and clear mechanism, and the header and the footer were in the fixed position. It included a form with the HTML5 input types. The stylings such as Google fonts, Rounded corners, and Box/drop shadows were also applied to enhance the outlook view of the website. Note: This is not a responsive website.
Note: Htmlpreview from Github may not be able to render the CSS of the site properly. For details of the CSS file, please click the Github button to access the relevant CSS file in the repository. Thanks.
jQuery
This website focused on using jQuery to create actions, for examples, the fade in/out and the slide up/down, when the click and hover effects happened. The form was developed with the jQuery-driven interactive elements and the effect tied to an if/else choice. In addition, the "Fun" page was implemented with jCanvas, and the user can select their choices from the drop-down lists to create their own postcards. Note: This is not a responsive website.
Note: Htmlpreview from Github may not be able to render the CSS of the site properly. For details of the CSS file, please click the Github button to access the relevant CSS file in the repository. Thanks.
jQuery Mobile and jQuery UI
This website was created using jQuery Mobile. It used the jQuery Mobile grid system and have at least one breakpoint in the media query. I made use of the widgets including the popup widget and the control group widget. This website has a custom theme and the form was using the HTML5 field types. Moreover, the jQuery Mobile touch events such as the swipe left and swipe right was added to enhance the mobile usability.
Note: Htmlpreview from Github may not be able to render the jQuery Mobile properly. For details of the relevant files of the site, please click the Github button to access the files in the repository. Thanks.