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

points

x,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處理完的圖形

Rectangle <rect>

Circle <circle>

Ellipse <ellipse>

Line <line>

Polyline <polyline>

Polygon <polygon>

Path <path>

points

x,y座標位置，x1,y1 x2,y2, x3,y3...

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

參考學習網站：https://www.w3schools.com/graphics/svg_intro.asp

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

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

Fig 1. Coursera 選項

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

• Google Public Data Explorer
• Data from the World Bank
• https://open.nasa.gov/open-data/
• http://data.gov.tw

當然我相信應該還是有不少有提供開放的資料平台，但我覺得像我一樣對這個領域很陌生的人，在獲得資料後的另一個苦惱出現了，怎麼處理這些資料呢？

底下我用了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 的寫法作為後續的工具使用上的加強。

Anacoda 簡易安裝說明 [ Python ]

      Anacoda 是一個包含幾乎所有python函式庫的套件，藉由安裝Anacoda可以免去很多函

式庫不足的問題。這裡有一些安裝的基本步驟供新手進行安裝。

首先先在 https://www.continuum.io/downloads 這個網頁下載新版的 Anacoda 檔案。基本上

只要一直按下一步就可以完成了。接下來比較重要的就是進行spyder 的安裝。

首先，先到開始功能列找到一個叫做 Laucher的檔案，點開後如下：

 接下來點開Spyder ，便可以在底下進行編譯了

用底下的程式試試看吧！


import  numpy as np
print "這是一個測試"

 -----------------------------------------------------------------


接下來介紹如何進行 Windows 下的 Ipython notebook 的使用：

(1)    按住快速 "windows"快速鍵 + R ，並輸入 cmd，也就是電腦的終端。

(2)   直接輸入 "ipython notebook" 即可進行ipython notebook的使用。

(3)   如果沒有自動出現網頁，可以在瀏覽器上輸入 "localhost:8888"

(4)   若要結束ipython notebook只需要按住Ctrl + C

(5)  若想將所有資料都放進我們建立的資料夾，在cmd視窗下輸入

       cd + "要進入了資料夾名稱"   並在資料夾內執行 ipython notebook

(6完成該步驟就只要在新建一個空白的資料夾即可。

Python ----- numpy函式庫簡單入門以及簡易繪圖

     基本上我也是一個Python的初學者，但被python簡易的語法給吸引才踏入學習這個語言的

路途。對於一名常常在處理數據的物理所研究生，該怎麼使用這個簡單的語法呢？

python 跟多數語言一樣有很多的工具，但在對於一個直譯式的語言首先，先利用下面的語法

將其引入：

         # 將numpy 的函式庫引入
         import numpy as np  
         #將matplotlib 的函式庫引入
         import matplotlib as plt

numpy 這個函式庫主要是一些數據的處理方式，比如底下利用linspace 設定區間格點的方法

底下才是我們要寫的程式內容
       #在將x介於0~20間的數值分割成800個格點
       x= np.linspace(0,20,800)
       #用np底下的cos函數
       y = np.cos(x)
       z = np.sin(x**2)+20
       #建立一個figure的空白圖
        plt.figure(figsize=(8,4))
      #利用matplotlib底下的方法進行繪圖，以及參數的調整和線的粗細設定
      plt.plot(x,y,label="$cos(x)$",color="green",linewidth=3)
      plt.plot(x,z,"b--",label="$sin(x^2)+20$")
     #利用xlabel 和ylabel 進行圖座標的單位設定
      plt.xlabel("Time(s)")
      plt.ylabel("Volt")
      #標題的設定
      plt.title("Plot the figure simple example")
      將y座標做一個限制
      plt.ylim(-1.2,1.2)
      plt.legend()
      #在python當中要把圖繪出來就寫一下show()就好囉
      plt.show()

利用上列的小程式就可以達到讓python 來進行數據的處理以及相關的繪圖功能。





       
   

論文排版 Latex 安裝教學

到了一年一度準備要畢業的時刻，而對研究生而言最重要的是不外乎是論文的編寫了，而


多數人在利用軟體編寫的時候不外乎是windows word進行編寫。但實際上有一款專門用來排


版的軟體 Latex 。有一句話說圖片處理之於Adobe illustrator ，文書排版首推 Latex 。


但是將Latex 安裝在Windows 中是一件相當麻煩的事情。


我推薦一個組合，MikTeX (with XeLaTeX) + Texmaker


這個組合來安裝是我目前用過比較順暢的。


(一) 安裝MikTex



從底下網址： http://miktex.org/download 下載2,9 版的 MikTex 並進行安裝，安裝的過程就


只要不停地按下一步就好。



(二) 更新MikTex 的檔案


從安裝的資料夾中找到 miktex 的資料夾中的 miktex-update_admin 以系統管理員的權限執


行。到了這個地步已經可以用內建的編譯器 TeXworks 到了這已經可以自己建立一個PDF的


文件了。但內建的Texworks 其實並不是很好用，底下介紹一個編輯。


(三)現在來安裝另外一個編譯器 Texmaker


從底下的網址去下載 執行檔 http://www.xm1math.net/texmaker/texmakerwin32_install.exe



(四) 設定Texmaker 從視窗當中找到位於右上角的選項->Tezmaker 設定


會看到左邊有三個部分：「指令」、「快速編譯」、「編輯器」


(a)


指令->第一項 LaTeX 加入「xe」，變成


「xelatex -interaction=nonstopmode %.tex」(1)


PDF 檢視器裡面輸入你自己PDF瀏覽器的位置吧！


(b)


快速編譯->快速編譯組合選「自訂」


把剛剛的 (1)+(2) 打進去，用「|」分開


結尾再補上「|bibtex %.aux|xdvi %.dvi」


(c)


編輯器->編輯器字型編碼選 「UTF-8」






到此自己編寫一下內容測試一下吧！


(五) 簡單做一下底下的測試吧！


\documentclass{article}
\usepackage{fontspec} %加這個就可以設定字體
\usepackage{xeCJK} %讓中英文字體分開設置
\setCJKmainfont{標楷體} %設定中文為系統上的字型，而英文不去更動，使用原TeX字型
\XeTeXlinebreaklocale "zh" %這兩行一定要加，中文才能自動換行
\XeTeXlinebreakskip = 0pt plus 1pt %這兩行一定要加，中文才能自動換行
\title{這是標體}
\author{作者欄}
\date{} %不要日期
\begin{document}
\maketitle
這只是一個簡單的測試，如果這個文件沒辦法產生的話，那你可能要重複再重新看一下上面的安裝教學。
This is the English.試試看中英夾雜吧
\end{document}

Linux-fedora system 的無線網路設定

伺服器版本的linux系統往往比圖像系統來的讓人難以捉摸，筆者自己也是走了很多冤枉路才摸出了一點頭緒。這裡來進行fedora 21 server 版本的無線網路設定。因為一開始筆者對linux的網路設定不熟悉所以試用了很多不同的方法，不過我相信底下的方法是比較容易的方式。

因為sever版有 networkmanager 所以你要先把這個關掉才可以。

先用指令  sudo ps -ef |grep - i networkmanager ，如果沒有就繼續做底下的指令

先找到你的無線網卡的essid 名字  用指令  iwconfig，然後 sudo iwlist 網卡名稱 scan。

輸入 sudo iwlist 網卡名 scan |egrep - i 'essid|encryption'  ，後面接 | less 或more 就可以進行畫面上下移動。

接下來 輸入 wpa_passphrase 'AP名'  password >~/.wifi 和 sudo wpa_supplicant -Dwext -i 網卡名   -c ~/.wifi  &(加上這個的符號是表示在背景運作)   然後輸入    dhclient 網卡名稱 ，這樣就可以完成無線網路的設定。

不同標頭檔的作法!!

從開始寫這個網誌開始，我只利用單一的編輯檔進行compile文件的工作。但當程式變大時一定會面臨一個問題，便是重複定義的問題，而這類型的問題程式工作者習慣性的把想要使用的標頭檔用另外一個名稱將它存檔像這樣 science.h，只要將檔名寫程如此便能讓電腦辨別，這個檔案本身是標頭檔。但這樣我們要如何在cpp檔案中使用呢?

----------------------------------------------------------------------------------------

// science.cpp

#include <iostream>

#include "science.h"    //只要cpp底下include 進這個檔名就可使用

---------------------------------------------------------------------

利用一些簡單的範例幫助理解：

//science.h

#include <iostream>

using std::cout;

void printscience(double a)

{

               cout<<a;

}

//science.cpp

#include <iostream>

#include "science.h"

int  main( )

{

             using std::cout;

             double b;

             printscience(b);

              

                return 0;

}

只要把上面的cpp檔compile 就可以形成一個執行檔

---------------------------------------------------------------

接下來我要介紹一個方法，我們常常會在main()前面用#define 來定義一個常數或數值但但常常會面臨當重複定義常數的問題，就像上面所提到。如果今天發現沒有定義那也可以用#ifndef的方法來進行標頭檔的定義。

------------------------------------------------------------------

//science.h

#ifndef SCIENCE_H_

#define SCIENCE_H_

struct data

{

               char name;

               int age;

};

typedef struct data DATA;

#endif

將上述的標頭檔定義完後變能夠充分的使用他了，接下來只要跟前面範例方法一樣#include "science.h"便能講整個檔案作定義出使用struct這個架構，這麼簡單的方法一定要快點學起來才行。