資料視覺化 data visualization

COPYRIGHT©2016 eBizprise Inc. & eBizprise Technology (TJ) Ltd.

Keynote - 資料視覺化 Data Visualization Will Kuan官大鈞

in


http://www.mammothdb.com/the-big-data-landscape-by-mammothdb/

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 ?Not Really!


簡單易懂 ! Easy to Read!

條理分明 ! Structured!

對象為決策主管或分析者 For Decision-Maker or Analyst

簡單易懂 ! Easy to Read!

身歷其境 !Virtual Feeling!

對象為任何感興趣的人 For all of us!


Data

Visualizatio

n

Traditional

BI


Roadmap




Examples

Case Study

Conclusions


為何需要資料視覺化 ?Why we need it?

More mlbam : https://aws.amazon.com/tw/solutions/case-studies/major-league-baseball-mlbam/

https://aws.amazon.com/tw/solutions/case-studies/major-league-baseball-mlbam/

https://aws.amazon.com/tw/solutions/case-studies/major-league-baseball-mlbam/


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



Roadmap




Examples

Case Study

Conclusions


Open Source

Enterprise Tools

Programming

Imagination

如何資料視覺化 ?How can we do that?

D3.jsGapminderMicrosoft SandDanceBrowsingTableauHighchartsMicrosoft Toolkit (Excel included)SAP BI ToolkitOracle BI ToolkitIBM BI ToolkitR (shiny, ggplot2)PythonJava

BrowsingG0V零時政府 http://g0v.tw/zh-TW/index.html資料視覺化 http://infographics.tw/圖文不符 https://www.facebook.com/simpleinfo/

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.jshttps://d3js.org/

https://d3js.org/

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 函式庫

https://github.com/mbostock/d3/wiki/Gallery



http://ghv.artzub.com/

http://ghv.artzub.com/

http://cesiumjs.org/demos/d3.html



https://my.infocaptor.com/free_data_visualization.php

https://my.infocaptor.com/free_data_visualization.php

http://bl.ocks.org/NPashaP/96447623ef4d342ee09b

http://bl.ocks.org/NPashaP/96447623ef4d342ee09b


Interactive Data Visualization Software

Open Source

Suitable for long term data

https://www.gapminder.org

Gapminder

https://www.gapminder.org/

https://www.gapminder.org/


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微軟最新資料視覺化工具

https://www.sanddance.ms/


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/

http://www.highcharts.com/

http://www.highcharts.com/products/highstock

http://www.highcharts.com/products/highmaps

http://www.highcharts.com/use-cases




Why we need imagination?

Normal Special Case

Storm GraphHot Z

one

Cold Zone

Warm Zo

ne


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


https://www.facebook.com/simpleinfo/

http://g0v.tw/zh-TW/index.html


And more…

Famous saying, “Seeing is

Believing”

But, it’s true?

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.


Roadmap




Examples

Case Study

Conclusions


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


https://www.flightradar24.com/45.32,0.44/5


從社群網路反應看蘋果發表會 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.






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.



http://hubcab.org/#13.00/40.7219/-73.9484

http://hubcab.org/#13.00/40.7219/-73.9484


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.



http://muyueh.com/30/veggie_c/list.html

http://muyueh.com/30/veggie_c/list.html


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


https://www.windyty.com/?25.039,121.525,2

https://www.windyty.com/?25.039,121.525,2

http://www.google.org/crisismap/taiwan



http://www.google.org/publicalerts




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


http://muyueh.com/30/xinzhu_traffic/

http://muyueh.com/30/xinzhu_traffic/


Roadmap




Examples

Case Study

Conclusions


實務講解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.

http://timdream.org/wordcloud/





Web Crawling

ETL & Data Wrangling

Word Cloud



Inspect the content of what we’re going to crawl and it’s structure.



Program our flexible crawler code to extract the content on the web, and save to our local side.


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

http://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/



https://muyueh.com/

https://muyueh.com/

http://molecular-service-science.com/2015/02/16/your-first-r-shiny-app-deployment/

http://molecular-service-science.com/2015/02/16/your-first-r-shiny-app-deployment/

http://rstudio-pubs-static.s3.amazonaws.com/7821_92f9e37c05bd4791a4ad0abd550f2a8f.html



資料視覺化 data visualization

Data & Analytics