Epilepsy impacts millions around the world, is absolutely debilitating, and can be fatal.
In fact, we lost a wonderful cartographer to epilepsy back in 2008 – Ben Alden (Edina, Minnesota). He was a graduate student at the University of Minnesota and my Teaching Assistant in the Cartography course I was teaching there. He passed mid-semester, and he’s not forgotten.
Ben, this map is for you! Even more fitting as, because you were 10 years younger than me, you were obsessed with KML and creating maps via code, instead of GUI interfaces (i.e., Macromedia Freehand was what I taught with back then). You were convinced code would replace GUI in map design.
Not only were you right, Ben. Today coding by human is being replaced with natural language. Today mapmakers don’t have to learn how to code or use a GIS at all. Instead, they can create a detailed epilepsy dataset showing death count, incident rates, estimate ranges, five different classification schemes, varying classification counts, across three different years (2010, 2020, and 2023) in a single request (i.e., prompt).
And yes, the map is equal area, uses Color Brewer style ramps (until a user decides to go up to 10 classes, of course), and has an interactive side panel, interactive multi-select legend, detailed info window popups that are interactive and allow the user to change the year being shown updating the underlying map, and works on mobile devices too.
Stochastic parroting of sound and syntax (i.e., natural language) is perhaps the most direct means of expressing human thought, and for many of us, who prefer writing or speaking to coding or clicking GUI buttons, it’s definitely a marvelous way to produce maps.
P.S. Hey, Ben… I hope you’re up there nodding with approval. It’s come full circle. You were really on to something back in 2008. 🙂
# Audience and Purpose
General world audience. Created for Purple Day to focus on people with epilepsy and funding for finding cures and researching the disease.
# CSV Dataset
I have a CSV dataset of epilepsy rates by country around the world in three different years (attached). The CSV dataset has up to three entries per country (one for 2010, 2020, and 2023) and also includes an ISO3 column for easy joining to freely available datasets like Natural Earth.
Please connect this CSV dataset to a country polygon file set available online to finalize the dataset. We will be visualizing this.
Below is a list of the field names and their definitions:
– ISO3: the country’s ISO3 abbreviation
– Country: the natural language name of the country in English
– year: the year this feature’s data represents
– deaths_count: number of deaths of epilepsy
– deaths_rate: the estimated epilepsy death rate
– deaths_lower: the lowest possible death rate
– deaths_upper: the highest possible death rate
– inc_count: epilepsy incidents count
– inc_rate: epilepsy estimated incidents rate
– inc_lower: epilepsy incidents lowest possible rate
– inc_upper: epilepsy incidents highest possible rate
# Devices
## Mobile and Handheld
Will largely be handheld device, I imagine. Since it’s a world map, must require landscape orientation to view on handhelds. Ensure that title is minimal on handhelds and across the top. Include mobile friendly icon button(s) and when the user taps outside of a modal or panel, hide it to show the map. Popups should be over the selected country and compact. They should disappear automatically as soon as someone clicks/taps anywhere outside of it.
There can be a legend that pops up from the bottom of the screen and disappears when you click outside of it. Legend contents will be discussed later.
## PC / Laptop
Full featured. Load map with Legend open and Attribution modal hidden. Title should float in upper left of map with no header bar across the top. Title should have a 70% transparent background behind it that gradients to 15% transparency from the upper-left of the text box to the lower-right (diagonal). Use white as the color. A panel should slide out from the right-hand side and be open at the start. The left side of the panel will have a thin gray bar that, if the user wants, can be clicked on to minimize the panel. When minimizing, the panel should slide left-to-right smoothly and conclude with the same thin gray bar resting on right side of the window, the same thickness on the screen as it was when the panel was fully extended. If the user clicks on this bar when it is resting on the right border of the window, the panel must slide open (from right-to-left) again. And back-and-forth.
# Map Area
We will be mapping the whole world. If possible, please choose an Equal Area or Equal Earth projection. if this is not possible due to the nature of the data or capabilities of the APIs you decide to use, feel free to use Web Mercator.
I don’t care where the projection is centered, but ideally on the Prime Meridian.
Please remove Antarctica from the map. It is not required.
## Mobile Devices
On mobile devices, I have noticed that when the user rotates their phone to landscape, sometimes the map hugs the bottom border of the screen. Please ensure that the map area rests in the center of the display vertically and fits horizontally. Thank you.
# Background / Basemap
Please use a black background. If we are able to successfully merge/join the CSV to a country dataset, then please don’t use a basemap other than the country boundaries. If not, use a dark, simple basemap.
# Data Visualization
## Desktop / Laptop
I would like you to visualize the dataset in several different ways. The default view will be Natural Breaks with 5 classes and a Color Brewer-inspired color ramp from off-white (or light yellow) to dark purple. Lower rates are off-white/light-yellow. Higher rates are dark purple.
However, the user will be able to reclassify the datasets in several ways, so you will need to create styles and plans based on what interactivity they are allowed to do. Also create 5-class schemes for the following classification schemes:
– Equal Interval
– Quintiles
– Standard Deviation
– Unclassed
Also, please plan to for the user to be able to change the number of classes for all of the schemes, except unclassed, using a number between 3 and 10.
All of the maps will use the same color ramp except Standard Deviation, which will use a diverging color ramp with medium gray in the middle class, pure white for the lowest class, and dark purple for the highest class.
Controls for the different schemes will be placed in the panel and discussed shortly.
The country borders will be an unsatured bright yellow.
## Mobile / Handheld
The mobile and handheld map will have only two classification schemes, which can be switched using a toggle in the legend: natural breaks with five classes and unclassed. Same datasets and representations as on the desktop map. IMPORTANT: on mobile, only data for 2023 will be visualized. The other years will be omitted from the visualization.
# Info Windows / Pop Ups
Users must click on a country to get an info window or popup. No hovering!
Do not use arrows pointing to the feature you clicked on. Just show a rectangular info window, please. The border should be 0.5 thick and white at 50% transparency.
The pop up window background will be the same as the classification color currently assigned to the country (depending on previous user intarctivity, etc.). If the backgroudn color is yellow, white, or light gray, use a dark purple font. If it is medium or dark purple, use a white font.
## Desktop / Laptop
The pop-up on computers and laptops will contain the following information:
– Country Name as the title
– The currently selected year (as chosen in the Pane). Represent this prominently but not dominently near the title.
– Estimated Deaths: {deaths_count}
– Estimated Death Rate: {deaths_estimated}
– Smaller, subdued font: “Rate Range”: {deaths_lower} –-> {deaths_upper}
– Estimated Incidents: {inc_count}
– Estimated Incident Rate: {inc_rate}
– Smaller, subdued font: “Rate Range”: {inc_lower} –-> {inc_upper}
Also, include three buttons at the bottom, one for each year in the dataset: 2010, 2020, 2023. The year currently being shown (typically the one selected from the legend or panel) should be highlighted and unselectable. The other years should be selectable. When a user selects this, the entire world map changes underneath to that year, but the info window stays open and the data in the info window updates as well. Also, that year become highlighted in the info window and unselectable, and the other year that had been selected is now selectable.
## Mobile / Handheld
The pop-up on mobile devices will contain the following information:
– Country Name as the title
– The currently selected year (as chosen in the Pane). Represent this prominently but not dominently near the title.
– Estimated Deaths: {deaths_count}
– Estimated Death Rate: {deaths_estimated}
Only 2023 data is available on mobile versions of the app, so no need for a year selector.
# Sources Modal
The sources modal MUST be hidden when the map loads. Once loaded, the sources modal must disappear again as soon as the user clicks anywhere outside of it. When it is opened via user interaction, please stylistically (in a manner that does not class with the underlying map) provide the following information to the user:
– Map Projection
– Dataset Source (please identify, it was some online world database, as I recall)
– Provenance JSON download
– Prompt Cartographer: Ian Muehlenhaus (link to https://linkedin.com/in/ianmule)
– Created as part of the Map Design Commission of the ICA’s 365 Days of Maps Campaign. Follow here: https://mapdesign.icaci.org/.
– Made for free using Web Mapper: https://www.webmapgpt.com/
– Map APIs / Geometry Attributions: {determine_and_list}
## Special Rule for Mobile / Handheld
Ensure that there is space for the user to click outside of the modal to make it disappear. If space is an issue, add a scrollbar to the modal to allow all the information to fit.
# User Interactivity and Map Manipulation
User interaction will occur in two places primarily: in the map area and in the panel.
## Map Interactions
Users must be able to zoom in and out on the map up to five times the original extent. Users may not zoom out past the original map extent, however (i.e., never out into outer space). When the user zooms all the way out, the map should be at full extent and fit the viewport appropriately.
Users may pan the map using one finger or click-and-drag on a mouse. However, they may not pan more than rougly 10 degrees latitude and/or longitude north, south, east, or west of the full extent.
## Desktop / Laptop Panel Interactions
In the panel, the user must be able to manipulate the following:
– Year being shown
– Data being shown: Death Rate OR Incident Rate. No count data as choropleth.
– Classification scheme
– Number of classes (except for unclassed)
– Multiselect legend (except for unclassed data):
– when one or more classes are selected, the map keeps those countries the color they were, and all others go to 80% transparency
– when the user clicks on the same selection again, it becomes deselected and changes back
– when no classes are selected, all regain complete visibility
When the user has selected the Unclassed visualization, a legend should be shown with a small not underneath saying that the legend is not interactive.
Add a “Clear” selections button prominently but not dominently below the legend.
## Mobile
There is no panel to interact with. However, on mobile, the legend is interactive and follows the same multi-select and deselect rules as desktop.
There is no option to change number of classes or class type.
# Panel Design
The panel should look modern professional – 2000% more like Apple or Google Maps than Esri Calcite.
Arrange the interactive components in a logical order and chunk interactive tasks into logical sections. Avoid putting boxes inside of boxes and instead use horiztonal dividers or font tweakes, etc.
Align all components left. Use contemporary styling techniques and use plenty of white spacing without losing visual balance within the panel itself, please.
At the bottom of the panel, have a “Sources & Attribution” button that opens the sources modal.
# Overall styling
I hate super-rounded rectangles. But I also don’t like sharp edges. Be consistent and round all boxes and component at 10px.
Make the map modern, purple, and not corny. It’s meant to support an important day. Thanks!
View Map Here
View Map Here
View Map Here
