I started this site as a place to reach an audience interested in photography, as well as showcase my interests and personal projects in coding and science. Central to this goal I wanted to build a simple, interactive, data visualization as a data-journal of my coffee habits. Hopefully with enough curation and design it could someday be useful for others as well who cant to explore their coffee landscape. I am not a computer scientist or software engineer, nor a UI/UX designer or coffee connoisseur. The goal is simple: plot cafes and roasters I have been to on a simplified, interactive map & provide quantitative review information. However it requires learning:

• how to host a site, particularly a static site for speed and cost savings,
• how to style elements by editing HTML and CSS (chose tailwindcss to simplify),
• Ruby to use Middleman and generate the site algorithmically, and
• JS and Google Maps API to render a custom map.

When I made the map at the beginning of 2024, I didn't have a set timeline to make progress. Luckily a course towards my certificate in digital journalism (PUB 101) required building a personal blog and experiment with our own online platform. Aha! An excuse to set deadlines for non-academic non-work!

The GoogleMap API is pretty straightforward, though I didn't find the documentation easy to parse to solve my problems. I used Snazzy Maps to create a custom style based on Solarized with reduced markings as I am leaning more towards data-art than a navigation tool. Some colours were altered to give more appropriate contrast such as the water and green space. I chose to center the map over the Vancouver-Burnaby area.

Typically I would store my review data in a database, however since I am generating a static site I don't have the option. Initially I stored my reviews a in structured JSON which worked but is not very flexible or easy to navigate as it grows. Moving to middleman, it made sense to migrate each review to its own entry in a new blog so I could leverage the build Process to generate not only all review pages, but also all summary elements and populate the map. In essence the map is just another way to list all blog entries (instead of a card or list layout I use elsewhere).

Speaking of summary elements, for users to learn about each cafe, I needed an information modal that contains the key points about my review while still allowing the user to navigate. However I committed a development sin, never having sketched out visions of what this should look like. I floundered with some different designs as placeholders while developing the functionality. Unhappy with the experience, I finally sat down and sketched out some options in Fig. 3.

That takes us to the current state of the project. What follows now are journal entry style updates as I change or add to the project. It will only contain functional or design developments.