Giter VIP home page Giter VIP logo

cheng-lin-li / informationvisualization Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 2.0 82.65 MB

This is my works on Information Visualization

Home Page: https://cheng-lin-li.github.io/InformationVisualization

License: GNU General Public License v3.0

HTML 98.35% CSS 0.13% JavaScript 0.88% R 0.08% TypeScript 0.56%
javascript r visualization ggplot2 svg information-visualization d3 d3v4 d3-visualization business-cycle

informationvisualization's Introduction

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

[email protected] or

[email protected]

informationvisualization's People

Contributors

cheng-lin-li avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.