The Day Democracy Almost Died is a graphic-novel style timeline of official and unofficial events that unfolded in Washington, DC, January 6, 2021. Now, on this fifth anniversary of this event, you can follow along in this action-comic themed timeline of the events.
This map adds some artistic flair over previous ones. Each pop-up contains a comic-book style illustration and description of what occurred. So in addition to cartographers, screenwriters, and translators, we can now add graphic designers to the list of people whose jobs are being impacted by LLMs.
I asked Web Mapper GPT how I might add a unique image to each pop-up window, and it gave me the folder structure and naming convention required. It then created a nice CSV with a prompt for each image (which I’ve made available from the sources tab in the map), so others can try to replicate the map or use the descriptions to create their own artistic interpretations in whatever style they choose. (Manga would be kind of neat.)
My goal was to experiment and push the envelope a bit on what is possible with prompt cartography. Turns out the only hurdles so far are one’s own imagination, practical prompting skills, and map API limitations.
Note: some of the data may be inaccurate and the timeline and spatial locations are rough estimates. Not authoritative. But I try to pay due respect to this sad day in contemporary US history. 
View map here. (Or click image above.)
LLM Tools
Original Prompt (Web Mapper GPT)
Hi. I have a January 6, 2021, Capitol Riot dataset of key moments in the riot. It is designed to work as a story map or narrative / flow map, with different phases identified (categorically) and feature IDs following the chronological order of events. All features also have lat/lon coordinates.
What I would like you to do for me:
– Please design a Leaflet map that is zoomed in on the extent of the event — All phases.
– Do not let the user pan outside of the full extent of the dataset more than one or two miles.
– The basemap should be a grayscale, low-contrast street map.
– If possible, create a subtle 85% transparent red and white stripes from the US flag over the base map but under all other map elements and image to give the map some weight.
– Have a prominent “Riot in Phases” Legend that is interactive and glides the map from where it is to the full extent of the selected phase. On mobile layouts it should be an obvious button to press but should also minimize automatically when the user clicks anywhere outside of it. On desktop, it can stay up but should be places in an area of the screen that will not cover important things (e.g., corner).
– When points are too close to one another, please use a clustering method.
– Different phases should have different colored points. The points should be circles that are easily clickable on a mobile device. They should have a number in them (ID).
When a user clicks on a point, the following should pop up (fields may have slightly different names, so use your judgment to determine field_name when coding after looking at the CSV):
– Title (highest visual hierarchy)
– Time Stamp (subtle but stands out like a byline)
– Description (like a pulp tabloid newspaper article)
– Source (lowest in visual hierarchy, lighter text)
Pop up box/info window fill should match the fill color of the selected symbol. The pop-up fill should be 88% alpha. Minor drop shadow in a lighter value of the same hue as the fill. No border so it almost looks like newspaper lopsided printing or ink overrun but very subtle. Not too noticable.
Infowindow should be styled like an old time comic book text box. Dramatic. Font should reflect this. Styling inside should too. Use an appropriate google font.
Infowindow should close automatically if something else is selected or the user clicks anywhere on the map. Or if the user clicks on the same point.
Selected/clicked points should have a different color outline that shows they are selected.
Interactivity:
– A drop down list of events in order – Titles only. Dropdown minimizes when a user selects one. Map zooms to the extent of that category and highlights that point by automatically opening the info window.
– An “Walkthrough” button should be placed in an unobtrusive spot in both the mobile and desktop versions. When a user clicks a play button, the points will automatically be selected up from 1 through … and their info windows open. The map will zoom and pan organically (slide if possible) to that location with a roughly 500 meter radius around it. Each will pop up will stay open for 5 seconds once the map has panned to that location. After five seconds the next point in the list will become active and selected. The first info window will close and the map will pan and slide to the next point. This will continue until the user clicks “Pause” or “Refresh”.
– The play controls will replace the “Walkthrough” button. They will stay visible until the user clicks an “X” (i.e., close button to the right of the PLAY, PAUSE, REFRESH buttons that are where the Walkthrough Button was. These should be minimal.
The title of the map should be bold and 1950s Comic Book-like. The colors used should be 1950s, high saturation comic-book like. Come up with good, neutral titles. The map does not take sides. It just lays out the events in sensationalist, comic-book style and let’s the user decide.
– “War at the Capitol”
– “Washington at War”
– “Remember the… What Exactly Was This?”
Action Comics style splash title (resized and positioned for mobile).
Use your best judgment for layout and design. We can iterate from there. After reviewing the CSV please let me know if you have any questions. Also, feel free to put all of this info a schema for continued reference. Thanks!
Separate ChatGPT Prompt(s) for Images
View the whole conversation here. Pretty systematic and boring.
