UStackUStack
GitCity icon

GitCity

GitCity 將你的公開 GitHub 貢獻歷史轉成互動式等距 3D 城市天際線,支援可嵌入 SVG 用於 README 與作品集。

GitCity

GitCity 是什麼?

GitCity 將使用者的 GitHub 貢獻歷史轉換成互動式等距 3D 城市天際線。核心概念是,每一天的公開貢獻變成一棟「建築」,提交活動影響高度,讓你以視覺方式探索活動,而非網格顯示。

它適合想以更吸引人的格式呈現貢獻資料的 GitHub 使用者,例如將 SVG 嵌入 README 或開發者作品集,且僅需輸入 GitHub 使用者名稱,無需其他手動設定。

主要功能

  • 從 GitHub 貢獻建構互動等距 3D 城市:根據公開貢獻活動建構天際線,讓觀眾一眼掌握模式。
  • 可駕駛的城市模擬:包含模擬模式,可從「街頭視角」導航城市,空間檢視天際線。
  • 主題切換(6 種主題):提供 Matrix、Noir、Aurora、Ocean、Gold 和 Ice 等主題視覺,符合不同美學偏好。
  • 依年、月或週過濾時間:可限制視覺化至特定時間範圍,而非僅顯示完整歷史。
  • 可嵌入 SVG 用於 GitHub README 和作品集:產生 SVG 嵌入,讓視覺化可置入開發者個人檔案和專案頁面。
  • 僅需 GitHub 使用者名稱,零設定:自動擷取輸入使用者名稱的公開貢獻資料,簡化設定步驟。

如何使用 GitCity

  1. 開啟 GitCity 並輸入你的 GitHub 使用者名稱
  2. GitCity 擷取你的 公開貢獻資料 並渲染城市,其中有提交的日子會呈現為建築。
  3. 使用 主題控制 變更外觀,及 過濾控制 聚焦於 年、月或週
  4. 若要分享,使用 可嵌入 SVG 選項產生嵌入碼,用於你的 GitHub README 或開發者作品集。
  5. (選用)切換至 模擬模式,從街頭視角駕駛穿越城市探索。

使用情境

  • 個人 GitHub README 視覺化:將產生的 SVG 嵌入 README,以 3D 天際線呈現貢獻活動,而非靜態圖表。
  • 作品集展示:在開發者作品集頁面加入城市視覺化,提供一目了然的程式碼活動概覽。
  • 時間範圍檢視(月或週):依月或週過濾,檢視貢獻量在較短期間的變化。
  • 依美學講述活動故事:在不同情境(如專案頁面或社群檔案)呈現天際線時變更主題(例如 Noir 或 Aurora)。
  • 貢獻的探索式「走訪」:使用模擬模式導航城市,視覺解讀提交密度的模式。

常見問題

  • GitCity 使用什麼資料?

    GitCity 擷取你輸入的使用者名稱的 公開 GitHub 貢獻資料

  • GitCity 如何將提交對應到 3D 城市?

    依頁面所述,有提交的每一天變成一棟建築提交越多,塔樓越高

  • 能否限制視覺化至特定時間範圍?

    可以。GitCity 包含 年、月或週 的過濾器。

  • 能否將視覺化嵌入其他頁面?

    可以。GitCity 提供 可嵌入 SVG,適用於 GitHub README開發者作品集

  • 除了 GitHub 使用者名稱外,還需設定什麼?

    頁面描述為 零設定,僅需輸入 GitHub 使用者名稱

替代方案

  • GitHub 貢獻視覺化(2D 熱圖/圖表):相較 3D 城市與模擬,這些替代方案通常以網格或圖表呈現貢獻;較簡單但空間感較弱。
  • 作品集/靜態 GitHub 統計小工具:產生徽章或靜態摘要的工具較易嵌入,但通常無駕駛城市體驗或時間範圍 3D 檢視。
  • 從 GitHub API 資料自訂視覺化:DIY 方式可產生客製視覺(含 3D),但將設定與維護負擔轉移至使用者,而非零設定流程。
GitCity | UStack