Information Visualization

This is my works on Information Visualization which includes:

1. Google sheets with Charts and publish with HTML

• The Topic: Economic Growth and CO2 Emissions.

Is it the price of gross domestic product (GDP) growth? Total 10 countries are selected to be comparison.

Click ** Here ** to explore the results.

2. Scalable Vector Graphics (SVG) Drawing practice for Bubble chart

• The Topic: CO2 Emissions per GDP.

Create and publish a bubble cloud in three different ways. Use node.js and browsersync to develop and explain how to start the web server. Create three bubble charts in one HTML document:

• SVG Prototype: pick one attribute from UN Data for 10 countries and create a bubble cloud with Inkscape as an SVG prototype in prototype.svg. Put in index.html.
• SVG Code: manually recreate the same bubble cloud by writing SVG code in index.html (i.e., writing SVG yourself, not re-using the SVG created by Inkscape!). Use a style.css file.
• Dynamic SVG: recreate the same bubble cloud using JavaScript (i.e., dynamically generating the SVG). Use a chart.js file.

Click ** Here ** to explore the results.

3. Inforgraphics analyze by Visualization Wheels

• The Subject: Global Carbon Budget.

Find 2 different infographics on the same subject, Global Carbon Budget, by different approaches.

Compare these two infographics by visualization wheels to analysis Pros and Cons, suggest improvements for the things they do poorly.

Click ** Here ** to explore the results.

4. R language with ggplot 2 and plotly packages

• The Topic: Transponder flight data analysis of Santa Monica VOR(SMOVOR) by R with ggplot2 and plotly packages.

The scope of the analysis is to see if there are any quantifiable differences between before/after Columbus day (Monday, October 12th, 2015) - an oft cited milestone for recent changes in noise.

Click ** Here ** to explore the results. Or to read the final report on the R Notebook which published on RPubs website

5. D3 with data binding

• The Topic: Present Rural population (% of total population) data for 20 countries in 2016 by a stem-and-leaf plot, a bar chart, and a scatterplot.

Click ** Here ** ** to explore the results. Or to try the demo on My website

If the website can not be accessed, please download all contents under this folder to view it on your local machine.

6. D3 Interactive Bar Chart - with sorting functions by Transition and data binding

• The Topic: Present Top 10 GDP countries in 2015 by a bar chart with sorting function to present D3 transition and data binding techniques.

Click ** Here ** to explore the results. Or to try the demo on My website

If the website can not be accessed, please download all contents under this folder to view it on your local machine.

7. D3 Proportional Symbol Map and Choropleth Map - with world map

• The Topic: Present Top 10 GDP countries in 2015 by Proportional Symbol World Map and Choropleth World Map.

Click ** Here ** to explore the results. Or to try the demo on My website

If the website can not be accessed, please download all contents under this folder to view it on your local machine.

8. Project - Business Cycle Introduction

Build up a web application to introduce what business cycle is and how it will impact to us.

- includes D3 donut chart, line chart, stream chart, Choropleth world map and heat map.

• This project leverages Angular v4 as application framework and Bootstrap v4 for responsive design. I worked with my teammates, Yucheng Guo and Sovan Rath to develop. This project includes D3 donut chart, line charts, stream chart, choropleth world map and heat map to introduce business cycle and its impact. We may also use this visualization to predict the economic trend of the future.

• I implemented donut chart, theory line chart and build the application architecture which integrated our application components into Angular framework with Bootstrap template.

• The Topic: Develop an application website to introduce Business Cycle.

Click ** Here ** to explore the results. Or to try the demo on My website

If the website can not be accessed, please download all contents under this folder to view it on your local machine.

Disclaimer

Last updated: January 16, 2018

The information contained on https://github.com/Cheng-Lin-Li/ website (the "Service") is for general information purposes only. Cheng-Lin-Li's github assumes no responsibility for errors or omissions in the contents on the Service and Programs.

In no event shall Cheng-Lin-Li's github be liable for any special, direct, indirect, consequential, or incidental damages or any damages whatsoever, whether in an action of contract, negligence or other tort, arising out of or in connection with the use of the Service or the contents of the Service. Cheng-Lin-Li's github reserves the right to make additions, deletions, or modification to the contents on the Service at any time without prior notice.

External links disclaimer

https://github.com/Cheng-Lin-Li/ website may contain links to external websites that are not provided or maintained by or in any way affiliated with Cheng-Lin-Li's github.

Please note that the Cheng-Lin-Li's github does not guarantee the accuracy, relevance, timeliness, or completeness of any information on these external websites.

Contact Information

Cheng-Lin Li@University of Southern California

chenglil@usc.edu or

clark.cl.li@gmail.com