打個(gè)小廣告：
如果你想獲取更多前端干貨骡湖、鵝廠工程師的前端面試指南卤妒，
歡迎關(guān)注我的個(gè)人微信公眾號(hào)：
前端夜談
[TOC]
Github Visualization / Github 數(shù)據(jù)可視化
網(wǎng)站鏈接: https://ssthouse.github.io/github-visualization/
github鏈接: https://github.com/ssthouse/github-visualization
效果: 一個(gè)簡單的Github數(shù)據(jù)展示網(wǎng)頁, 目前功能有:
- 輸入github username, 展示所有repository
- 支持鼠標(biāo)滾輪縮放 & 拖拽
- 篩選是否為fork的 repository
Kapture 2018-05-11 at 23.25.56
Tech: 使用到的技術(shù):
- Vue用作 UI 快速搭建 (其實(shí)直接用純html + js也行, 用Vue只是方便快速搭建界面)
- D3.js , 數(shù)據(jù)可視化的核心庫
- 使用github page 作為靜態(tài)網(wǎng)頁的展示, 通過配置webpack, 可以通過將 npm/yarn run build 編譯到項(xiàng)目 /doc 目錄下, 從而直接部署到github page
- 從github 的api 以 GraphQL 形式提供
- 使用的是 personal token ==> 詳情參見文檔: https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/
Purpose:
- 練習(xí)使用 D3.js 進(jìn)行數(shù)據(jù)可視化
- For fun
TODO:
- 展示follwer & following ==> 并支持展示其 repository viz
想繼續(xù)了解 D3.js ?
這里是我的 D3.js 、 數(shù)據(jù)可視化 的github 地址, 歡迎 start & fork :tada:
