diff --git a/README.md b/README.md index a7fd187..5d83fcd 100644 --- a/README.md +++ b/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 diff --git a/workshop-map.js b/workshop-map.js index aa027fd..3f7ca83 100644 --- a/workshop-map.js +++ b/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,15 @@ 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}
`; - //if (d["number (2013?)"]) { html += `${d["number (2013?)"]} Workshop`; } - //if (+d["number (2013?)"] > 1) { html += "s"; } + var html = `${d.location.city}
`; tooltipDiv.html(html); tooltipDiv.style("opacity", 0); tooltipDiv.attr("class", "tooltip"); @@ -57,7 +52,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");