github repository視覺化

ssthouse發表於2019-02-04

[TOC]

Github Visualization / Github 資料視覺化

網站連結: https://ssthouse.github.io/github-visualization/

github連結: https://github.com/ssthouse/github-visualization

效果: 一個簡單的Github資料展示網頁, 目前功能有:

  • 輸入github username, 展示所有repository
    • 支援滑鼠滾輪縮放 & 拖拽
    • 篩選是否為fork的 repository
Kapture 2018-05-11 at 23.25.56

Tech: 使用到的技術:

  • Vue用作 UI 快速搭建 (其實直接用純html + js也行, 用Vue只是方便快速搭建介面)
  • D3.js , 資料視覺化的核心庫
  • 使用github page 作為靜態網頁的展示, 通過配置webpack, 可以通過將 npm/yarn run build 編譯到專案 /doc 目錄下, 從而直接部署到github page
  • 從github 的api 以 GraphQL 形式提供
    • 使用的是 personal token ==> 詳情參見文件: https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/

Purpose:

  • 練習使用 D3.js 進行資料視覺化
  • For fun

如果覺得不錯的話, 不妨關注一下 : )

github主頁

知乎專欄

掘金

相關文章