資料視覺化 / 数据可视化 Data Visualization

COPYRIGHT©2016 eBizprise Inc. & eBizprise Technology (TJ) Ltd.
Keynote - 資料視覺化
Data Visualization Will Kuan
官大鈞
in

COPYRIGHT©2016 eBizprise Inc. & eBizprise Technology (TJ) Ltd.COPYRIGHT©2016 eBizprise Inc. & eBizprise Technology (TJ) Ltd.
Roadmap
 What’s the Data Visualization?
 Why do we need data visualization?
 How can we do data visualization?
 Examples
 Case Study
 Conclusions

什麼是資料視覺化?
What’s the Data Visualization?

Data Engineer
Data Analyst/
Data Scientist

Data
Analytic Outcome
Delicate Report
SAME AS BI REPORT ?

 簡單易懂! Easy to Read!
 條理分明! Structured!
 對象為決策主管或分析者 For Decision-Maker or Analyst
 簡單易懂! Easy to Read!
 身歷其境!Virtual Feeling!
 對象為任何感興趣的人 For all of us!

為何需要資料視覺化?
Why we need it?
More mlbam : https://aws.amazon.com/tw/solutions/case-studies/major-league-baseball-mlbam/

Why we need it?

 Attract more attentions ! – such as views of the website or more customers
 Make more connected ! – good storyteller
 Proper bridge among individuals !
 Help us catch what we need to know !
 Make data understandable, meaningful and beautiful !
 Help us go inside! – valuable insight & learning motivation trigger
Why we need it?

 Open Source
 Enterprise Tools
 Programming
 Imagination
如何資料視覺化?
How can we do that?
D3.js
Gapminder
Microsoft SandDance
Browsing
Tableau
Highcharts
Microsoft Toolkit (Excel included)
SAP BI Toolkit
Oracle BI Toolkit
IBM BI Toolkit
R (shiny, ggplot2)
Python
Java
Browsing
G0V零時政府http://g0v.tw/zh-TW/index.html
資料視覺化http://infographics.tw/
圖文不符https://www.facebook.com/simpleinfo/

 Open Source
 Open JavaScript library built by netizens, with simple demos
 D3.js is NOT based on visualization, is emphasized the connection
among objects
 Pro：flexible
Con：complicated, requirement for JavaScript, HTML, CSS, SVG
D3.js
https://d3js.org/

 大祕寶ONEPIECE：
https://github.com/mbostock/d3/wiki/Gallery
 個人Github人際網路互動圖Personal GitHub Network：
http://ghv.artzub.com/#repo=d3&climit=100&user=mbostock
 全球各國歷年資料互動圖Health and Wealth of Nations：
http://cesiumjs.org/demos/d3.html
 各式基本資料圖表Basic Graphs：
https://my.infocaptor.com/free_data_visualization.php
 簡易互動式Simple Interactive Dashboard：
http://bl.ocks.org/NPashaP/96447623ef4d342ee09b
D3.js 函式庫

 Interactive Data Visualization Software
 Open Source
 Suitable for long term data
 https://www.gapminder.org
Gapminder

 Released in March of 2016 from Microsoft
https://www.sanddance.ms/
 Web-based tool. As long as we open browsers, and upload acceptable
type of data (e.g. txt, csv, json), then we can control it to show different
type of analysis outcomes
 Able to observe micro and macro data simultaneously
SANDDANCE
微軟最新資料視覺化工具

A series of data visualization tools from Norway company Highsoft
AS. The products are based on jQuery and HTML5. Offering 3 fixed
format packages and customized service：
 Hightcharts : for normal stats plots
 Hightstock : for financial plots
 Highmaps : for geo plots
 USE CASES : customized service
Highcharts官網URL：
http://www.highcharts.com/

Why we need imagination?
Normal Special Case
Storm Graph

 Keep open minded to see how other people represent data and what
feeling people want to get when lots of data coming.
 Flexibility is not only with self-programming, somehow we can use all
we have such as toolbox to combine some of tools and code to
represent innovative data-land
 Check new information and techniques in data visualization groups,
as below:
Why we need imagination?
•資料視覺化http://infographics.tw/
•圖文不符https://www.facebook.com/simpleinfo/
•零時政府http://g0v.tw/zh-TW/index.html

And more…
Famous saying, “Seeing is Believing”
The truth is our brains naturally help us
filter information, and this is a native
system which is uncontrollable.

And more…
An excellent designer should be able to
help us avoid our misunderstanding system,
even use it to reinforce our understanding
to figure.

A good data visualization is the friendly
element or access key for enterprises
to make companies more valuable or
level up, even like a catalyst which can
help us better the society or change the
world.
There are some of good examples. Let’s
check it out !
實務範例
Examples

 Flightradar24.com
https://www.flightradar24.com/45.32,0.44/5
Offering new experience service allows everyone on
the ground to see what happens in the sky.
Check the most up-to-the-minute location of every
single aircraft in the sky, and their flight details such as
departures, destinations, routes and aircraft details.
Raw Data Visualization
實務範例
Examples

 從社群網路反應看蘋果發表會
To see Apple new product launch event with reactions in social network
http://srogers.cartodb.com/viz/d0a7e72a-38ac-11e4-8eb2-0e73339ffa50/embed_map
Sometimes we are not interested in new products of
Apple, but very curious about reaction of people to
products. So, this work is to see reactions in social
network from the start of Apple new product launch
event to the end.
實務範例
Examples

 hubcab
http://hubcab.org/#13.00/40.7219/-73.9484
We can definitely feel Global warming or climate change at
now. How can do the earth a favor in the Internet?
HubCab offers an interactive visualization which is a colorful
map embedding every taxi pickup and dropoff site in NYC .
Not only for commercial use, but also for the reduce of
carbon emission.
實務範例
Examples

 Vegetable Transaction
http://muyueh.com/30/veggie_c/list.html
Sometimes we do not care about what happens in IT
domain, FinTech, IOT, big data or AI, etc. What we care
about might be just daily life like daily vegetable transaction.
This webpage aggregates transaction details of numerous
vegetables. Guide us to observe the trend and hidden
information of daily vegetable transaction.
實務範例
Examples

 Windyty
https://www.windyty.com/?25.039,121.525,2
 CrisisMap氣象災害
http://www.google.org/crisismap/taiwan
 PublicAlerts災害示警
http://www.google.org/publicalerts
Displaying real-time climate or weather visual information in
different ways. Display latest disaster stats and trends on the
Google map, which helps us prevent loss from Mother Nature.
Raw Data ＆ Meta Data Visualization
實務範例
Examples

 Traffic Accident Stats in Hsinchu
http://muyueh.com/30/xinzhu_traffic/
Accident Crossfilter for Hsinchu area from Jan of 2013 to
Oct of 2013. Help the government adjust their policy and
help people understand which is hazard area but avoidable.
Meta Data Visualization
實務範例
Examples

實務講解
Case Study
 HTML5 word cloud
http://timdream.org/wordcloud/
Word cloud is sort of said to have fantasy impression only.
However, it is useful for people to catch on
the level among some key words indeed.
Let’s do it ourselves.

實務講解
Case Study
Web Crawling
ETL & Data Wrangling
Word Cloud

實務講解
Case Study
Inspect the content of what we’re
going to crawl and it’s structure.

實務講解
Case Study
Program our flexible crawler code to extract
the content on the web, and save to our local side.

實務講解
Case Study

 With the big data trend, two important points come along.
Open Data & Data Visualization
 Open data & data visualization both mean transparency, which
is able to improve communication and efficiency.
 “Fancy” does not mean “Attractive”. Data visualization is for
communication and telling story, even creating virtual feeling.
Data visualization for communication.
Communication for Data visualization.
結論
Conclusions

 More options:
http://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/
 More examples:
https://muyueh.com/
 More about R Shiny:
http://molecular-service-science.com/2015/02/16/your-first-r-shiny-app-deployment/
http://rstudio-pubs-static.s3.amazonaws.com/7821_92f9e37c05bd4791a4ad0abd550f2a8f.html
結論
Conclusions

資料視覺化 / 数据可视化 Data Visualization

More Related Content

Viewers also liked

Similar to 資料視覺化 / 数据可视化 Data Visualization

Recently uploaded

資料視覺化 / 数据可视化 Data Visualization