jasonlong/isometric-contributions
Isometric Contributions
This project is a browser extension that transforms the standard GitHub activity chart into a three-dimensional isometric pixel art display. It functions as an isometric data visualization tool that represents contribution volume through varying heights of pixel blocks.
The tool enables users to toggle activity graph displays between standard two-dimensional views and isometric perspectives. It modifies the appearance of GitHub profile pages by extracting contribution metrics and rendering them as 3D visual assets.
The implementation covers client-side data extraction, DOM manipulation, and the use of canvas-based rendering and CSS perspective transformations to simulate depth. It utilizes mutation observers to synchronize data updates when the activity graph loads.
Features
- Contribution Graph Projections - Transforms the GitHub activity history into a three-dimensional isometric pixel art display.
- Profile Landing Pages - Customizes the aesthetic of the GitHub profile landing page by transforming the contribution graph.
- DOM Content Extraction - Scrapes activity metrics directly from the GitHub profile page source to drive the visualization.
- Contribution Graph Stylings - Applies a 3D pixel art aesthetic to the GitHub activity history for visual flair.
- GitHub Browser Extensions - A specialized GitHub browser extension that transforms the activity chart into isometric 3D art.
- Isometric Data Visualizers - Represents contribution volume as varying heights of pixel blocks in an isometric perspective.
- Browser Extensions - Functions as a browser extension that modifies the visual rendering of specific website elements.
- DOM Element Injection Utilities - Injects custom 3D graphical elements into the DOM to replace the standard activity chart.
- Three-Dimensional Visualizations - Allows switching between standard 2D charts and three-dimensional volumetric visualizations.
- Pseudo-3D Canvas Engines - Implements a pseudo-3D canvas engine to render contribution data as geometric blocks.
- 3D Perspective Transforms - Uses CSS 3D perspective transforms to create a simulated sense of depth for the pixel blocks.
- Chart Presentation Enhancements - Enhances the presentation of activity charts by turning flat data into isometric 3D blocks.
- DOM Mutation Observation - Uses MutationObservers to detect when the GitHub activity graph loads to trigger the 3D transformation.
