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

workshop-map.js

@@ -17,11 +17,10 @@ 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, "https://bridgetroll.org/events.json?type=all")
           .await(ready);
 
       // load and display the World
@@ -36,19 +35,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");
@@ -57,7 +51,6 @@ 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?)"]}`);
               })
               .on("mouseout", d => {
                 tooltipDiv.attr("class", "tooltip hide");