2017年6月20日 星期二

MOOC(磨客思) Cousera -- Data Visualization 伊利諾香檳分校課程心得 第一週 Part B


     因為影片並沒有很詳細的介紹<svg>這個標籤就直接使用了,所以我去查了一些跟<svg>相關的網站來進行學習。其中包含了影片中所提到的w3cschool 。
   
      SVG 的英文全名是(SVG, Scalable Vector Graphics).我的理解是這樣的一個tag 可以用來插入向量繪圖的物件,比如說現在開啟記事本將底下的文字內容存成html 檔。html的框架我就不在這裡討論了,裡面也是很有學問的。

Fig 1. code 的內容
   在輸入了以上的文字內容後會出現底下,的圖案,而這個圖形就是所謂的svg的檔案,本身是屬於向量繪圖的檔案,這點值得留意。另外,像是pdf、png這類型的檔案也都屬於向量圖。


Fig 2. 輸出的結果




<svg>有不少可以進行圖形物件的設置方式,比如長方形、橢圓、多邊形等等
Rectangle <rect>

Circle <circle>

Ellipse <ellipse>

Line <line>



Polyline <polyline>


Polygon <polygon>


Path <path>


這裡直接用長方形來進行舉例,比較有意思的事情是,如果你有學過css的排序語言的話,你就可以對圖形進行不同的表現如圖:
 而輸出的結果可以進行比較,底下兩個圖分別是針對其邊線進行利用css的語法調整opacity 也就是透明度的語法。

 

這裏介紹多邊形的用法,其中一個語法便是points
pointsx,y座標位置,x1,y1 x2,y2, x3,y3...

底下我們就來試做一個星星吧~






我想另一個值得介紹的標籤就是<path>
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

 基本上能夠我認為比較常用的應該就是這幾個了,不過當然這邊只是進行簡單的圖形繪畫,要真的畫出很厲害的圖,真的還是需要花點時間的。

 

像是w3cschool裡面就畫出了一個用svg畫出來的logo我突然覺得這個<svg>真是太神啦!


fig 3.從https://www.w3schools.com/html/html5_svg.asp處理完的圖形


雖然<svg>並不是這個data visualization 的主要介紹,但還是相當有趣,我想對於一些對網頁前端開發的朋友也可以學習一下。

2017年6月18日 星期日

MOOC(磨客思) Cousera -- Data Visualization 伊利諾香檳分校課程心得 第一週 Part A

最近開始在上開放式的課程,選擇了伊利諾大學的data visualization 的課程(https://www.coursera.org)主要是想要了解一下數據科學的內容。所以底下我就開始對整個課程的內容進行一系列的心得分享,希望可以跟大家一起成長。

Fig 1. Coursera 選項

   我想對於想要學data visualization 的人一定很困擾我要去哪裡找到公開的資料,這裏課程推薦了幾個收集數據的網站:

當然我相信應該還是有不少有提供開放的資料平台,但我覺得像我一樣對這個領域很陌生的人,在獲得資料後的另一個苦惱出現了,怎麼處理這些資料呢?
底下我用了google public data explorer 進行了資料的處理。

Fig. 2 使用google 的數據分析工具


   在左方是對資料變數進行一系列的選擇,右方則會出現所選擇資料的圖表。就我的認知這其實就是一種數據印象化的方法。通常我們在進行數據資料的描述時,通常會用座標來進行。以上圖來說,x座標代表歐洲各國的不同年份的資料,y軸則是薪資的資料,而各個不同的直線則是代表不同的國家。如果以這樣的想法出發,數據分析就是在把相關的圖表進行呈現這樣的關係。
   再介紹完了一些基本的資料來源,順帶一提這裡使用的工作是一個叫做 Tableau 的分析軟體,本身有試用的版本。如果想下載的話可以在底下的官網中下載,他有mac版以及windows 的版本可以進行使用。(Tableau : https://www.tableau.com ) 之後我會寫一篇關於這個tableau的使用方法上來。
   
    所以,目前我們已經有了數據、分析工具了!但是第一週呢這個課程介紹了很多理論上的東西,雖然我覺得有點多餘,還是先介紹一下,整個課程的核心,因為我們要把數據進行模型的建立,所以教授希望我們能暸解電腦繪圖的方式。
   
   一般來說,我們會把繪圖分成向量繪圖以及有點陣(pixal)的繪圖方式,如果是向量繪圖的方式對電腦而言,便是畫出三個點同時,在這三個點內的空隙進行填滿的動作,可以使得整個圖型非常清楚。這點的運用在很多以圖形精美的軟體當中相當常用。而使用像數 的繪圖方式則是用像素點去填滿這個三角形,就像是要在方格紙的一個區塊中排出一個三角形。所以當然不會像向量繪圖的方式那麼的精確。
   
   再來呢?這個第一週的課程也介紹了關於人體是如何看圖像的,但因為這週的課程沒有技術的成分在,比較偏理論,感覺在畫大餅的概念。
再來影片要告訴我們2d成像的圖片技術以及3d技術的理論架構,而用到2d的技術也提到了我剛才說的繪圖技術,並介紹網頁技術裡面關於<svg> 的用法,可已在網路上進行向量繪圖功能的網頁技術,不過因為蠻簡單的,所以我打算在下一篇順變把其他的功能先介紹一下。
   
   另外,影片中也將影像做了簡單的劃分,如果今天用的是影像是利用光影以及視角變化所形成的圖案,這類有個名詞叫做photo-realism而影像沒有應用到光影的變化來創造3d的圖像,這類的便是non-photo realism。老實說,還蠻有趣的就是把一件事情做了理論上的區別就對了。

   之後我會陸續把這些資料做一些整理,我想我會以svg的寫法還有tableau 的寫法作為後續的工具使用上的加強。