[Kaggle]顧客訂單視覺化

幾天前在Kaggle上建立了人生第一次的iPython筆記(iPython Notebook)，主要是處理Instacart Market Basket Analysis這項競賽中，產出每個顧客的歷史訂單視覺化。

由於我深知在Hexo上有許多實用的套件，Google一下關鍵字就找到了hexo-ipynb。本來是想輕輕鬆鬆就能匯入我的iPython Notebook…但是世事難料，不知道是不是版本不同的原因，該套件並無法正確運作。由於覺得要Debug麻煩的關係，我就只好自己寫一個類似的功能囉！

首先你必須要把你的notebook檔案透過jupyter notebook轉成HTML檔案，並加到你的post_asset_folder當中。然後到你的js檔案中，新增以下幾行：

function iframeLoaded() {
  var iFrameID = document.getElementById('ipynb');
  if(iFrameID) {
    // here you can make the height, I delete it first, then I make it again
    iFrameID.height = "";
    iFrameID.height = (iFrameID.contentWindow.document.body.scrollHeight+20) + "px";
  }   
}

(function($){
  //ipython notebook html ifram
  $('iframe').load( function() {
    $('iframe').contents().find("body").css("background","#303030");
    iframeLoaded();
  });
  
  $( window ).resize(function() {
    iframeLoaded();
  });
})(jQuery);

完成上述的前置工作後，如果你要在文章中插入notebook檔案，你只需要在你的文章中插入以下html，就大功告成囉！

<iframe id="ipynb" src="notebook.HTML" width="100%"></iframe>

事不宜遲，我們來看看呈現出來的成果，這也是我在這篇文章中主要要呈現的，沒想到又變成更改Hexo設置的一環：

特別需要注意的是，你的html檔案檔名必須要改成大寫的.HTML，不然Hexo預設的文章解析器會把他當成一個獨立的Post，算是一個小小的Trick…本來我是也打算改這一個設定，但找了半天也還沒找到要怎麼去改解析器，最後就決定大事化小、小事化無，畢竟我也有點懶得找了xDDD。

To be continued..