About this project

Since Bloomberg Philanthropy funded our team and they have an interest in telling the story of their work through public art, they directed us to hire an artist which my boss resisted for a long time as we had no idea what that person would do. Eventually, they came up with focusing on “gratitude” and part of the project was to get DC residents to complete a survey asking them about something they are grateful for. Where those things were places, we could put them on a map and so this page was born.

One of my coworkers reviewed all the results and if it was a place, used DC's Master Address Repository to get latitude and longitude. I would try and find a photo we could legally use, though sometimes that meant taking it myself. I was then given a .csv file which needed to be turned into this JSON file.

For that, I used a series of regular expressions on regex101 using the output of one substitution as the input for the next. They were:

1. RegEx:
   Story [0-9]+: (?'quote'.*)\n*
   Substitution:
   <p>“${quote}”</p>
2. RegEx:
   ^(?'groupId'[0-9]{1,3}),(?'displayName'[^,]+),(?'website'[^,]*),(?'street'\?\?\?|[0-9 a-zA-Z.#]*),(?'city'\?\?\?|[ a-zA-Z]*),(?'state'\?\?\?|(?:[A-Z]{2})?),(?'zipCode'\?\?\?|(?:[0-9]{5})?),(?'numberOfCitations'[0-9]{1,2}),"(?'quote'[^"\n]*)\n*",(?'latitude'38\.[0-9]{3,8}),(?'longitude'-7[6|7]\.[0-9]{3,8}),"?(?'caption'[^,"]*(?:(?:""|, )[^,"]*)*),(?'photoURL'.*),(?'categoryName'[\-a-zA-Z ]*),Cluster (?'neighborhoodClusterId'[0-9]+),"?(?'neighborhoodClusterComponents'[\-\/,.' a-zA-Z]+?)"?,(?'categoryId'[0-9]+)$
   Substitution:
   {\n\t"latitudeLongitude": [${latitude}, ${longitude}], \n\t"displayName": "${displayName}", \n\t"quote": "${quote}", \n\t"numberOfCitations": ${numberOfCitations}, \n\t"website": "${website}",\n\t"photoUrl": "${photoURL}",\n\t"altText": "Photo of the ${displayName}",\n\t"caption": "${caption}",\n\t"categoryId": ${categoryId},\n\t"categoryName": "${categoryName}",\n\t"neighborhoodClusterId": ${neighborhoodClusterId},\n\t"neighborhoodClusterComponents": "${neighborhoodClusterComponents}"\n},
3. RegEx:
   ""https
   Substitution:
   \\"https
4. RegEx:
   "">
   Substitution:
   \\">
5. RegEx:
   Photo credit: ""
   Substitution:
   Photo credit: "https://innovate.dc.gov/sites/default/files/dc/sites/MOPI/abstractImage600x800.jpg"

I used the Leaflet mapping library but then it was considerable work to place the marker pins with the right icon and color, create the legend that allows display of specific categoery, getting the search to work and so on. The traffic generated was trivial so the only real benefit is that I learned something and can display it here.