replace hard coded data with request to Bridge Troll

Author: LauraKirby

README.md

@@ -1,18 +1,28 @@
 == Workshop of the World Visualization ==
 
-The [location data](https://docs.google.com/a/ultrasaurus.com/spreadsheet/ccc?key=0AjPWVMj9wWa6dDJOVE5DVTRxbjc2Vy1PMVlQTlh4eFE#gid=0) 
-was gathered from [Bridge Troll](http://www.bridgetroll.org/) and other reports of activity from workshop leaders who use alternate registration systems.  Contact Sarah Allen (@ultrasaurus) if you know of a city that is not representated.
+The location data has been gathered from [Bridge Troll](http://www.bridgetroll.org/). Contact Sarah Allen (@ultrasaurus) if you know of a city that is not representated.
 
 To run locally, here's a list of [HTTP server one-liners](https://gist.github.com/willurd/5720255)
 
-## Wish List
+### Running data in map locally with Bridge Troll
+* start Bridge Troll locally using `rails server`
+
+* Update BridgeTroll and workshop-map source code
+  * within BridgeTroll source code:
+    * update `allow_insecure?` to `true`
+    * `config/application.rb` add your local server
+      * Ex: I am using `python -m SimpleHTTPServer`, so I added 'localhost:8000'. Resulting in: `origins 'bridgefoundry.org', 'localhost:8000'`
+  * within this "workshop-map" repo
+    * update `workshop-map.js` to include`.defer(d3.json, "http://localhost:3000/events.json?type=past")`, instead of `defer(d3.json, "https://bridgetroll.orb/events.json?type=all")`
+      * you can set the `type` query param to "all", "past" or "future".
 
+## Wish List
 * The title should be part of the map, rather than on the index page, to make
   it easier to embed.
 * Link to this repo in small text in the lower-right
 * Resize map based on width and height. Note that currently the map is artfully
   cropped since we haven't had any workshops in the north and south poles, and
-  we should keep that feature while allowing for setting width/height to 
+  we should keep that feature while allowing for setting width/height to
   grow or shrink the map. This would enable it to fit nicely in a blog post
   and be easily viewed on mobile devices.
 * Show the map in the README
@@ -32,3 +42,4 @@ Credits
 * Lillie Chilen, Travis Grathwell: Bridge Troll external events & events.csv API
 * Mary Jenn: 2015-2016 historical data wrangling
 * Tim Garcia: more d3 wizardry
+

workshop-map.js

@@ -17,17 +17,17 @@ function workshopMap() {
       var tooltipDiv = d3.select("body").append("div")
           .attr("class", "tooltip hide")
 
-      // source: https://docs.google.com/spreadsheet/pub?key=0AjPWVMj9wWa6dDJOVE5DVTRxbjc2Vy1PMVlQTlh4eFE&single=true&gid=0&output=csv
-      // google spreadsheets no longer allows cross-domain access
       d3.queue()
           .defer(d3.json, "data/world-50m.json")
-          .defer(d3.csv, "data/workshop-data.csv")
+          // see Readme for setting up test environment for making this GET request locally
+          // .defer(d3.json, "http://localhost:3000/events.json?type=past")
+          .defer(d3.json, "https://bridgetroll.org/events.json?type=all")
+
+
           .await(ready);
 
       // load and display the World
       function ready(error, world, workshops) {
-        console.log("world.objects")
-        console.log(world.objects)
         if (error) return console.log("there was an error loading the data: " + error);
         var zoom,
             circles;
@@ -38,19 +38,14 @@ function workshopMap() {
             .datum(topojson.feature(world, world.objects.countries))
             .attr("d", path);
 
-
-
         circles = svg.selectAll("circle")
             .data(workshops)
             .enter().append("circle")
               .attr("class", "symbol")
-              .attr("cx", d => projection([d.longitude, d.latitude])[0])
-              .attr("cy", d => projection([d.longitude, d.latitude])[1])
+              .attr("cx", d => projection([d.location.longitude, d.location.latitude])[0])
+              .attr("cy", d => projection([d.location.longitude, d.location.latitude])[1])
               .attr("r", d => 5)
               .on("mouseover", function(d) {
-                var html = `${d.city}<br/>`;
-                //if (d["number (2013?)"]) { html += `${d["number (2013?)"]} Workshop`; }
-                //if (+d["number (2013?)"] > 1) { html += "s"; }
                 tooltipDiv.html(html);
                 tooltipDiv.style("opacity", 0);
                 tooltipDiv.attr("class", "tooltip");
@@ -59,7 +54,9 @@ function workshopMap() {
                 tooltipDiv.style("left", `${d3.event.pageX - (width / 2)}px`);
                 tooltipDiv.style("top", `${d3.event.pageY - height - 20}px`);
                 tooltipDiv.style("opacity",1);
-                console.log(`City: ${d.city}, # of Workshops: ${d["number (2013?)"]}`);
+                // while 'events_count' is available on the locations table, we do not currently have available through the API JSON response
+                // I have added this within BridgeTroll and will make a PR for this updated response
+                // console.log(`City: ${d.location.city}, # of Workshops: ${d.location.events_count}`);
               })
               .on("mouseout", d => {
                 tooltipDiv.attr("class", "tooltip hide");