Faking participant data to help create my proof of concept 

Faking participant data to help create my proof of concept 

The design of the research methods coalesced into a system that seemed to work well in theory. The next step was to bring it to life in a data structure that could inform a digital product. My first iteration of this product was only an approximation of what I wanted, a proof of concept, incorporating the Mapbox API, javascript hacks, YouTube, and GeoJSON files. 

Through the grace of technically-savvy friends and help from the Twitterverse, I got Mapbox up and running, with the data I collected from my first user research session in Union Square with the help of a classmate, Luke Stern

From here, I pulled an example from the Mapbox site on how to animate a marker around a map. My first goal was to have the marker move around the map at approximately the same time as Frank, my test user, had moved around Union Square. My second goal was to have the marker include a pop-up with which I could populate the video Frank had shot. This was my big test, and something I had envisioned but was unsure of how to work out with code. 

Fortunately, I found an excellent example of this process on the Mapbox site, created by Rafa Gutierrez. I hacked as far as I could, along with some help from the good guys at Mapbox.

Per Duncan's advice, I was able to estimate the coordinates of the path my user had taken by following his path in the GoPro video he shot, and tracking these using the mapping GUI at GeoJSON.io

I was then able to work with a friend and talented developer, Brandon Doman, to take that example code and retrofit it to my purposes.

Once the code was in place, I took the video that Frank shot, and spliced in an overlay of a heartbeat data I had captured when testing out the BITalino. 

While the data was real it wasn't Frank's data, and so it couldn't provide any insight. Rather I was testing out the interaction of biometric data and video. 

Finally, I put it all together into an HTML file on my thesis blog. Placing works-in-progress online can be an exercise in masochism, but I chose this format for its ability to be easily shared and critiqued. 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapping Emotional Data in Union Square</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

  img.leaflet-marker-icon {
   -webkit-transition: all 18.95s;
   transition: all 18.95s;
   -webkit-transition-timing-function: linear; /* Safari and Chrome */
   transition-timing-function: linear;
 }
 .leaflet-popup-content {
   -webkit-transition: all 18.95s;
   transition: all 18.95s;
   -webkit-transition-timing-function: linear; /* Safari and Chrome */
   transition-timing-function: linear;
 }
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoic3JoaG5yeSIsImEiOiJrZXVVbWcwIn0._J-Ht-WgWICSxkSWLySNVw#18';
var map = L.mapbox.map('map', 'srhhnry.lhenjog4').setView([40.736, -73.991], 18);

// Generate a GeoJSON line. You could also load GeoJSON via AJAX
// or generate it some other way.

var geojson = { type: 'LineString', coordinates: [
[
            -73.99116039276123,
            40.73570589304912
          ],
          [
            -73.99114429950714,
            40.735742475957636
          ],
          [
            -73.99110674858093,
            40.73577905884605
          ],
          [
            -73.99108529090881,
            40.7358197064762
          ],
          [
            -73.9910477399826,
            40.73586441884073
          ],
          [
            -73.99097800254822,
            40.73587254835831
          ],
          [
            -73.99093508720398,
            40.73588474263285
          ],
          [
            -73.99089753627777,
            40.73591319593136
          ],
          [
            -73.99089217185974,
            40.73594571397194
          ],
          [
            -73.99088144302367,
            40.73598636150028
          ],
          [
            -73.99086534976959,
            40.736035138501535
          ],
          [
            -73.99081707000732,
            40.736083915467034
          ],
          [
            -73.99079024791718,
            40.73611236868036
          ],
          [
            -73.990758061409,
            40.73614895136537
          ],
          [
            -73.99070978164673,
            40.736177404550915
          ],
          [
            -73.99066686630249,
            40.73619772824739
          ],
          [
            -73.9905971288681,
            40.73620585772427
          ],
          [
            -73.99055421352386,
            40.736213987200124
          ],
          [
            -73.99051666259766,
            40.73624650509369
          ],
          [
            -73.99053275585175,
            40.736323735027156
          ],
          [
            -73.9905595779419,
            40.736356252867026
          ],
          [
            -73.9905595779419,
            40.736413159048624
          ],
          [
            -73.9905595779419,
            40.73644161212117
          ],
          [
            -73.99055421352386,
            40.73647006518152
          ],
          [
            -73.99053275585175,
            40.73653510070236
          ],
          [
            -73.99049520492554,
            40.73658794201626
          ],
          [
            -73.99045765399931,
            40.73664078328816
          ],
          [
            -73.99041473865509,
            40.73671801276391
          ],
          [
            -73.99035573005676,
            40.73679117744769
          ],
          [
            -73.99026989936829,
            40.73680337155386
          ],
          [
            -73.99017870426178,
            40.73678711274517
          ],
          [
            -73.9900928735733,
            40.736754595115876
          ],
          [
            -73.99001240730286,
            40.73671801276391
          ],
          [
            -73.98993194103241,
            40.73668143039183
          ],
          [
            -73.98984611034393,
            40.73664078328816
          ],
          [
            -73.98972272872925,
            40.73660420087362
          ],
          [
            -73.98962616920471,
            40.736559489006304
          ],
          [
            -73.98951351642609,
            40.73651477710894
          ],
          [
            -73.98943841457367,
            40.736482259346516
          ],
          [
            -73.98940086364746,
            40.736437547397244
          ],
          [
            -73.98944914340973,
            40.73634405867895
          ],
          [
            -73.98949205875397,
            40.736262764034485
          ],
          [
            -73.98954570293427,
            40.73618146929069
          ],
          [
            -73.98959934711456,
            40.73612862765396
          ],
          [
            -73.9896422624588,
            40.736059526988754
          ],
          [
            -73.98973345756531,
            40.73610017444758
          ],
          [
            -73.98980855941772,
            40.736140821881555
          ],
          [
            -73.98986220359802,
            40.73616114558922
          ],
          [
            -73.98990511894226,
            40.736083915467034
          ],
          [
            -73.98990511894226,
            40.73617333981086
          ],
          [
            -73.98994266986847,
            40.736213987200124
          ],
          [
            -73.99000704288483,
            40.73623431088546
          ],
          [
            -73.99007141590118,
            40.73623024614889
          ],
          [
            -73.99010896682739,
            40.73623024614889
          ],
          [
            -73.9901465177536,
            40.736242440357856
          ],
          [
            -73.99017333984375,
            40.73626682876907
          ],
          [
            -73.99018943309784,
            40.736295281904184
          ],
          [
            -73.99019479751585,
            40.736323735027156
          ],
          [
            -73.9902538061142,
            40.73633999394907
          ],
          [
            -73.99032354354858,
            40.73636438232454
          ],
          [
            -73.990398645401,
            40.73639690014456
          ],
          [
            -73.99046838283539,
            40.736421288499166
          ],
          [
            -73.99051129817963,
            40.73636438232454
          ],
          [
            -73.99060785770416,
            40.73634405867895
          ],
          [
            -73.99066150188446,
            40.73630341136912
          ],
          [
            -73.99069905281065,
            40.7362749582375
          ],
          [
            -73.99075269699097,
            40.73624650509369
          ],
          [
            -73.99081707000732,
            40.73618553403026
          ],
          [
            -73.99085998535155,
            40.73612862765396
          ],
          [
            -73.9909029006958,
            40.736083915467034
          ],
          [
            -73.990940451622,
            40.736031073752805
          ],
          [
            -73.99096727371216,
            40.735970102491926
          ],
          [
            -73.99100482463837,
            40.735929454953634
          ],
          [
            -73.99102091789244,
            40.73582783599925
          ],
          [
            -73.99102091789244,
            40.73576279978701
          ],
          [
            -73.99105846881866,
            40.73572621688966
          ],
          [
            -73.99110138416289,
            40.73564492149024
          ],
          [
            -73.99111747741699,
            40.735555496436106
          ],
          [
            -73.99112820625305,
            40.73547420082806
          ],
          [
            -73.9911550283432,
            40.73538884033272
          ],
          [
            -73.9911550283432,
            40.73530347972783
          ],
          [
            -73.99116039276123,
            40.73522218381181
          ],
          [
            -73.99118721485138,
            40.73513275818948
          ],
          [
            -73.99128913879395,
            40.73512869338561
          ],
          [
            -73.99133205413818,
            40.73517340621452
          ],
          [
            -73.99134278297424,
            40.7352303134079
          ],
          [
            -73.99133741855621,
            40.735270961373345
          ],
          [
            -73.9913159608841,
            40.7353238036913
          ],
          [
            -73.99131059646606,
            40.73535632201996
          ],
          [
            -73.99128913879395,
            40.735429488201305
          ],
          [
            -73.99124085903168,
            40.735502654302195
          ],
          [
            -73.99121940135956,
            40.735571755545806
          ],
          [
            -73.99120330810545,
            40.735640856717666
          ],
          [
            -73.99119257926941,
            40.73567337489134
          ]] };


// Add this generated geojson object to the map.
L.geoJson(geojson).addTo(map);

// Create a counter with a value of 0.
var j = 0;

// Create a marker and add it to the map.
var marker = L.marker([0, 0], {
  icon: L.mapbox.marker.icon({
    'marker-color': '#f86767'
  })
}).addTo(map);

tick();
function tick() {
    // Set the marker to be at the same point as one
    // of the segments or the line.
    marker.setLatLng(L.latLng(
        geojson.coordinates[j][1],
        geojson.coordinates[j][0]));

    // Move to the next point of the line
    // until `j` reaches the length of the array. There are 94 points for 12.5 minutes of video--hence the tick speed
    if (++j < geojson.coordinates.length) {setTimeout(tick, 7659) } else {j=0; marker.setLatLng(L.latLng(
        geojson.coordinates[j][1],
        geojson.coordinates[j][0]));
  setTimeout(tick, 100)}
}

marker.bindPopup('<iframe width="480" height="360" src="https://www.youtube.com/embed/1VWS6YUqNHE?autoplay=1;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>', {
  keepInView: false,
  autoPan: false,
  closeButton: false,
  maxWidth: 1000
}).openPopup();

marker._popup.setLatLng = function(latlng) {
  this._latlng = L.latLng(latlng);
  this._updatePosition();
  this._adjustPan();
};

</script>
</body>
</html>