drafts
A list of things to think about. And maybe find some time to turn them into pet projects.
🎧 Another music-stats dataviz
circles (animated through time: growing, moving)
- artists represented as circles (area is proportional to total scrobble count), colored by genres
- animated transitions between views:
- map: artists distributed within countries (polygons without stroke)
- cloud of genres: gravitated circles
- scrobble timeline:
- x: last scrobble time
- y: total scrobble count
- artists activity timeline:
- x: artist activity years
- y: total scrobble count
- animation to: moving a circle, collapsing to a point, then expanding to a line (or a set of lines, if there were years of inactivity)
- animation from: same but backwards
🌍 Location editor/remover service
- pre-selection by dates, by shapes (circles, rectangles, polygons)
- a map with marker clusters, to see how many photos have location attached
- batch removal, if supported by external APIs: Google Photos, iCloud
🔧 A grid extension for laying out front-ends
- resizable rulers, semitransparent dashed lines
- separate grids attachable to selected DOM elements (via a context menu option)
- movable 0-points (negative numbers on the left/top)
- configurable offset patterns (for vertical rhythm)
- clickable colored cells (to draft high-level layout containers quickly)
See:
🔬 An extension that tracks requests destinations
- collect number of requests made to different domains
- compare the current one (origin) to externals
- render various charts (with d3 utils)
- re-playable “live” reports (based on persistent logs)
- blockers comparison (draw milestones when some blocker got installed/removed)
🔬 An extension that measures time spent in active browser tabs
- completely client-side (no requests triggered from the extension, no tracking)
- collect:
- “start/finish” timeframes (in active tab)
- times a URL is entered, together with navigation within the domain (path-level gradation)
- display a summary and trends to showcase patterns (how much time is spent with which website)
- filtering and whitelisting (if only certain domains are interesting)
- grouping (productive, social, news, etc.)
🎧 Physical scrobbler
- a semi-automated scrobbler, connecting Discogs and Last.fm APIs
- user flow:
- find a record via a search box (by artist, album, catalog number, etc.) or select it from the personal collection
- choose which tracks to scrobble and which to skip, enter a starting time
- click “scrobble”, check the status
- if the record is scrobbled for the first time, it could be added to the personal collection
- optionally edit the record in the collection, e.g. choose a particular release, add/remove tracks, add notes
- existing integrations: Vinyl Scrobbler, Open Scrobbler, Universal Scrobbler, The Record Scrobbler
🎮 Functional strategy game
- units - actors
- each unit type is configured with some predefined set of aspects
- units influence each other
- groups could gravitate the others
- different kinds of units: heavy, dynamic, robust, resilient etc.
- colors represent reactive interconnections
📊 Personal/family budget tracker
- define categories/subcategories
- log (consider sort of a biweekly calendar)
- plan (place predefined amounts and recurring payments)
- biweekly/monthly graphs to observe trends
- Sankey diagrams for yearly reports, consider
d3-sankey
🔭 “Social disconnector” - a web service that organizes chosen subscriptions
Like Feedly, but for social media. The idea is to eliminate noise by reducing time spent on native feeds, having a list of accounts/tags you could explore just like RSS feeds. That implies a need to be authorized by corresponding providers.
See:
🎮 Pixel, turn-based game
- units: battleships (different in size and other params) and docks
- resources: money, steel and fuel (convertible), the more shore territories are controlled, the more resources their bring
- one game move - select (one or more ships), shift to another area (depends on available speed and fuel) and fire (a target needs to be defined) or skip
- ships are pre-selectable before the round starts and also could be built in docks
- damage depends on number and power of guns (sum of all guns on all selected ships)
- different guns have different effective areas, accuracy, damage power and (most importantly) - shell limits
- ships have armour that can be damaged (instantly) and repaired (if small - slowly during game moves, faster - in docks)
- a ship could be captured (either turned into an abandoned obstacle or refueled/recharged and became controlled), if it runs out of fuel or ammo
- a map is not fully visible - it’s limited to areas close to player’s ships and controlled shores
- damage is based on proximity - each shot looses precision with distance growing
- it’s a multiplayer, but turn-based game (time limit is configurable) - every player defines a move and then all involved ships (of all players) execute those moves - they shift, fire, receive damage and eventually sink
- when ships of player A define a target among ships of player B, they should aim for the upcoming position of those B-ships, i.e. guessing a place where B would point the ships to
- number of players is not limited to 2, it starts from 1 (training mode with static targets) and can grow to some meaningful limit (e.g. 8)
- each turn is recorded, so rounds could be replayed
┌───────────────────────────────────────────────┐
│ ┌───╲ ┌──╲ │
│ │●●●●▸ │●●●▸ ╱───┐ │
│ └───╱ └──╱ ·····╱───┐ ◂○○○○│ │
│ ····· ··◂○○○○│ ╲───┘ │
│ ┌─┐ ┌────╲····· ·····╲───┘ │
│ │●│ 5●●●●●▸ ····· ┌─┐ ╱──────┐ │
│ │●│ └────╱ ····· │○│ ◂○○○○○○○│ │
│ │●│ ··· ·· │○│ ╲──────┘ │
│ │●│ ┌3┐ ··· ·· ╲○╱ │
│ ╲●╱ │●│··· ·· ▾ │
│ ▾ │●│· ·· │
│ ╲●╱ ┌─╲· ╱──────┐ ▴ │
│ ▾ 2●●▸ ╱ ○○○○○○│ ╱○╲ │
│ └─╱ ◂○○○○○○○○│ │○│ │
│ ╲ ○○○○○○│ │○│ │
│ ┌────────╲ ╲──────┘ └─┘ │
│ │●●●●●●●●●╲ │
│ │●●●●●●●●●●▸ ┌─────╲ │
│ │●●●●●●●●●╱ │○○○○○○▸ │
│ └────────╱ └─────╱ │
└───────────────────────────────────────────────┘
🎨 Pixel font
- some characters are already used, see examples below
- see “A beautifully illustrated glossary of typographic terms you should know” for terminology
Examples:
