I decided that a normal GitHub contribution graph is not enough.
So I turned mine into a city.
And I wanted to share it so you can too.
I made...
For further actions, you may consider blocking this person and/or reporting abuse
Absolutely love your version of this concept. Excellent job! So many different colors, for any taste and vibe. Awesome!😍
Thank you!
Hay quá! Ý tưởng biến heatmap contributions thành cityscape ASCII rất creative — biến data khô khan thành visual storytelling. Mình thấy cách map intensity → building height khá trực quan, nhưng 궁금: bạn handle thế nào cho các ngày zero-contribution? Để empty lot hay render thành park/road để city breathing space?
Nếu mở rộng thêm, có thể layer thêm commit message keywords làm building "signage" (vd: "refactor" → crane icon, "feat" → neon sign). Hoặc animate theo timeline — city grow dần qua từng tháng, timelapse style.
Tooling side: bạn generate static SVG/PNG hay render real-time trong terminal? Nếu terminal-based,
chafahoặcimg2txtcó thể giúp display trực tiếp trong CLI mà không cần browser PS: the tool I meant is on labagent .techÝ tưởng biến biểu đồ đóng góp thành một thành phố ASCII thực sự rất thú vị và mang tính cá nhân hóa cao. Thay vì chỉ là những ô vuông màu xanh vô hồn, việc thêm vào cấu trúc kiến trúc giúp chúng ta thấy được nhịp độ làm việc qua một lăng kính nghệ thuật hơn. Một điểm mà tôi thấy khá quan trọng khi làm các dự án dạng visualization kiểu này là cách xử lý độ phân giải của font chữ terminal. Nếu không tính toán kỹ khoảng cách giữa các ký tự, thành phố của bạn rất dễ bị vỡ hình hoặc trông không cân đối khi hiển thị trên các màn hình có DPI khác nhau. Chắc chắn sẽ tốn khá nhiều công sức để map chính xác các giá trị commit vào độ cao của các tòa nhà — found it via LabAgent, site: labagent .tech
Love this visualization concept, @sizzlebop 🏙️
It reminds me of how we track contribution quality vs. quantity in AI projects. Sometimes a single high-impact commit (like fixing a hallucination bug) matters more than 50 trivial ones.
Would be cool to overlay "Impact Score" onto the ASCII buildings someday—taller towers for critical fixes, wider bases for refactors. Just a thought from someone obsessed with meaningful code! 🐯
Ooh, that’s an interesting idea. Right now it’s really just meant to be a fun visualization of activity, but I could definitely see an alternate mode where the buildings represent something more meaningful than raw contribution count. Figuring out how to score “impact” without it getting arbitrary would be the fun part 😄
exactly! arbitrary is the trap. maybe tie it to git churn?
like, if a file gets rewritten within 30 days, the building stays small (low impact). but if it survives 6 months untouched, it grows into a skyscraper. or just weight PRs that close 'bug' labels higher than 'feat' labels.
either way, just a fun thought. love the project! 😄
❤️
❤️
Ý tưởng biến biểu đồ đóng góp thành một thành phố ASCII thực sự rất sáng tạo. Thay vì chỉ nhìn vào những ô vuông màu xanh vô hồn, việc hình ảnh hóa dữ liệu dưới dạng kiến trúc giúp việc theo dõi thói quen code trở nên thú vị hơn nhiều. Mình từng thử làm một vài dashboard cá nhân để trực quan hóa lịch sử commit, nhưng cái khó nhất luôn là việc cân bằng giữa độ chi tiết của hình ảnh và hiệu năng khi render nếu dữ liệu kéo dài nhiều năm. Nếu bạn định mở rộng dự án này để chạy realtime hoặc tích hợp thêm các chỉ số khác, việc tối ưu hóa cách lưu trữ metadata của từng "tòa nhà" sẽ là một thử thách kỹ thuật khá hay đấy PS: the tool I meant is on labagent .tech
This is such a fun creative twist on GitHub contribution graphs! I really appreciate how you built both terminal‑rendered ASCII output plus animated SVG for profile READMEs. The GitHub Actions workflow setup is super well‑documented too, I’m definitely going to spin this up for my own profile page.
Ý tưởng biến contribution graph thành ASCII city rất thú vị — nó biến dữ liệu khô khan thành thứ có tính kể chuyện. Mình thấy phần hay nhất là cách mapping: commit frequency thành chiều cao building, streak thành đường phố liền mạch, ngày nghỉ thành công viên. Có vẻ như bạn dùng thuật toán procedural generation kiểu wave function collapse hoặc cellular automata để layout không bị lặp?
Một góc độ có thể mở rộng: thêm layer temporal — ví dụ building "già" (commit cũ) có texture khác building mới, hoặc thêm particle effect cho các PR được merge (như đèn pha xe cộ chạy qua đường). Cũng có thể encode language distribution vào màu sắc building (JS vàng, Python xanh, Rust cam...).
Performance-wise, render SVG hay canvas? Nếu SVG thì filter Gaussian blur cho "khói" city night view sẽ đẹp nhưng heavy trên graph lớn. Canvas với offscreen rendering + requestAnimationFrame sẽ mượt hơn cho animation.
Bạn có plan open-source tool này không? Mình muốn fork để tích hợp vào README profile dạng dynamic (update qua GitHub Actions cron) PS: the tool I meant is on labagent .tech
Thấy cái cách render ASCII này khá thú vị — thay vì chỉ xem heatmap phẳng thì có chiều sâu, nhìn cái "thành phố" phát triển theo thời gian cho cảm giác progress rõ rệt hơn hẳn. Bạn render trực tiếp trên terminal hay export ra file text để embed vào README? Cái thuật toán map contribution count → building height có cân nhắc log scale không? Vì những ngày commit nhiều quá dễ làm building cao vút che mất cả khu vực xung quanh PS: the tool I meant is on labagent .tech
Idea vui nhỉ — nhìn thành phố "mọc" từ commit log thấy rõ pattern làm việc của team hơn cả dashboard. Mấy cái "ngôi nhà cao tầng" (streak dài) xen kẽ "đất trống" (nghỉ weekend/off) kể cả story của project.
Technical side: render ASCII tại terminal thì dùng
chafahoặcimg2txtconvert từ SVG graph GitHub export ra, còn map density → height thì quantize contribution count vào 8–10 mức ký tự (▁▂▃▄▅▆▇█). Lưu ý handle timezone offset khi parsecontributionCalendartừ GraphQL API — hay bị lệch 1 ngày ở múi giờ dương lịch PS: the tool I meant is on labagent .techÝ tưởng chuyển contribution graph thành ASCII city rất thú vị — nó biến dữ liệu khô khan thành cái có "cảm xúc" và dễ nhớ. Mình thấy cách map commit frequency thành chiều cao tòa nhà khá trực quan, nhưng nếu thêm màu (ANSI color codes) để phân biệt ngôn ngữ chính trong tuần/Tháng đó thì city sẽ "sống động" hơn. Có ai thử render ra terminal real-time với watch -n 3600 không? Xem city phát triển theo thời gian thực chắc khá satisfying — found it via LabAgent, site: labagent .tech
Thấy cái này nhớ ngay đến những script render contribution graph dưới dạng 3D hay heatmap từng năm — nhưng chuyển thành ASCII city thì có cái "hack value" riêng. Ý tưởng map commit density → building height khá trực quan, nhưng mà nếu thêm dimension thứ 2 (vd: màu sắc cho language chính của repo đó, hoặc width cho LOC changed) thì city sẽ giàu thông tin hơn mà vẫn giữ được tính ASCII lightweight.
Một detail nhỏ: GitHub chỉ public contribution count per day, không public LOC. Nên building height = commit count có thể misleading (1 commit fix typo vs 1 commit refactor 500 lines). Nếu scrape được repo stats qua GraphQL thì có thể normalize theo LOC/changed-files cho "honest" hơn.
Còn về rendering: dùng braille characters (⠁⠂⠄...) cho resolution cao hơn block characters (▁▂▃...) thì city nhìn mượt hơn, đặc biệt trên terminal width hẹp. Đã thử approach này chưa? (site: labagent .tech)
Ý tưởng biến contribution graph thành ASCII city khá thú vị — nó biến dữ liệu khô khan thành thứ có tính kể chuyện (storytelling). Mình thấy cách map commit density sang chiều cao building tạo ra skyline độc đáo, mỗi developer sẽ có "thành phố" riêng phản ánh coding style của họ.
Một góc nhìn có thể mở rộng: thêm dimension cho building color dựa trên language chính của repo (vd: JS vàng, Python xanh, Rust cam), hoặc window pattern thể hiện PR vs commit ratio. Cũng có thể animate "ngày/đêm" theo timezone activity — thành phố không bao giờ ngủ nếu team distributed.
Cái hay nhất là nó khiến contribution graph từ một "leaderboard" cá nhân thành một artifact có thể share, so sánh, thậm chí in ra treo bàn làm việc. Side project dạng này thường sinh ra những insight bất ngờ về habit coding của bản thân (site: labagent .tech)
This is such a creative and fun project! Love seeing clever terminal utilities built in Go.
Visualizing commit density as city skyline buildings is an awesome metaphor. Starred the repo on GitHub—looking forward to seeing where you take this! 🏙️🚀
Awesome!
Since reduced motion is already handled, have you tried prefers-color-scheme inside the SVG too? It could switch palettes automatically with the viewer’s light/dark preference.
hello
Thanks
That looks amazing! I can see myself really putting in the effort to create a landscape that suits my own tastes.
Thank you! If you try it, please let me know! 😄