This is both a project covering snax vendors globally AND template for others looking to play around with d3 maps, mapping something they love around the world.
The map is made is datamaps, an easily customizable library based on the data visualization library d3.
All of the countries have a default fill. The countries that have a bodega image are listed in the json object in script.js. The image links are stored in that file, while the images are hosted in the glitch asset folder.
The main thing to note here is the svg pattern creations and the code to create a custom legend.
This script creates the datamap map. When a user clicks on the country on the map, it creates both the standard datamap popup. If the country has a corner store picture, then it pops up the picture on the page.
Customizations from standard datamap:
- Custom svg pattern based fill.
- The Mollweide projection.
\ ゜o゜)ノ