Dot Your Story
An interactive dot map of NYC where every dot is a place and every place holds a story. Click a dot, leave yours.
Overview
A map made of dots, filled with stories
Dot Your Story is a web app that turns the shape of New York City into a grid of tiny dots. Each dot represents a real location on the map. You click one, and you can read the stories people have left there or add your own — your name, your favorite spot, what happened.
The dot grid is built from a hand-mapped binary array — 58 columns by 76 rows — where 1s form the land mass of NYC and 0s are empty space. As stories accumulate on a dot, it visually changes: from a small unclaimed point to a filled circle, getting larger and more colorful the more stories it holds.
The backend is Express with NeDB for persistence. No accounts, no login. You just click and write. The whole thing runs on vanilla HTML, CSS, and JS with a monospace aesthetic that keeps the focus on the dots and the words people leave behind.
The Experience
Click a dot, leave a story
There's no onboarding, no sign-up. You see the map, you click a dot, you write.
See the map
NYC rendered in dots
The page loads with the full dot grid — the shape of New York City drawn entirely in monospace characters. Dots that already have stories appear larger and more colorful. Unclaimed dots stay small and quiet.
58 x 76 binary dot gridClick a dot
Popup appears at the click point
Click any land dot and a popup opens right where you clicked. It shows any stories that already live on that dot — who wrote them, their favorite spot, what happened there. If it's unclaimed, you're the first.
Click-positioned popupWrite your story
Name, spot, and what happened
The form asks for three things: your name, your favorite spot in that area, and what happened there. No character limits, no rules. Just write what you remember about this part of the city.
POST to Express + NeDBThe dot grows
Visual feedback on the map
After you submit, the dot updates instantly — it gets bigger and changes color based on how many stories it now holds. The grid rebuilds without a page reload, and the popup refreshes to show your new story alongside any others.
Live grid rebuildHow It Works
From a dot click to a saved story — here's the flow
The app loads all stories from the server on page load, counts how many belong to each dot, and renders the grid accordingly. When you click a dot, it fetches that dot's stories and opens a popup. When you submit, the story is saved to NeDB, the local count updates, and the grid redraws — all without a page reload.
Design Decisions
Why it works this way
Some choices that shaped how the app feels.
Why dots instead of a real map?
A real map comes with too much visual noise — streets, labels, satellite imagery. Dots strip all of that away and turn the city into something abstract. You recognize the shape, but the focus stays on the stories, not the geography.
Why do dots change as stories accumulate?
Without visual feedback, every dot looks the same and nothing feels alive. Dots that grow and change color tell you at a glance where the stories are — they create a heat map of collective memory across the city.
Why no accounts or login?
Adding authentication would kill the spontaneity. The whole point is that anyone can click a dot and leave a story in seconds. Friction-free input means more stories, and more stories means a richer map.
Why a binary grid array for the map?
The NYC shape is encoded as a flat array of 0s and 1s — 4,408 values, 58 columns wide. It's the simplest possible data structure for a pixel map. No GeoJSON, no tile server, no map library. Just an array and a flex-wrap grid.