Merge pull request #39 from lindsaycarr/d3

county tooltips + precip cells as geojson

js/map.js

@@ -18,27 +18,106 @@ var svg = d3.select("body")
 
 var map = svg.append( 'g' )
     .attr( 'id', 'map' );
+
+// Define the div for the tooltip
+var div = d3.select("body")
+    .append("div")
+    .attr("class", "tooltip")
+		.style("pointer-events", "none")
+		.style("background", "rgba(255,255,255,0.8)") //white, slightly transparent
+		.style("border", "3px")
+		.style("border-radius", "8px")
+		.style("font-family", "sans-serif");
 
-// Add map features
-d3.json('../cache/state_map.geojson', function(us_data){
+// Add map features, need to queue to load more than one json
+d3.queue()
+  .defer(d3.json, "../cache/state_map.geojson")
+  .defer(d3.json, "../cache/county_map.geojson")
+  .defer(d3.json, "../cache/precip_cells.geojson")
+  .await(createMap);
 
-    map.selectAll( 'path' )
-        .data(us_data.features)
+function createMap() {
+
+  // arguments[0] is the error
+	var error = arguments[0];
+
+	// the rest of the indices of arguments are all the other arguments passed in
+	// so in this case, all of the results from q.defers
+	var state_data = arguments[1];
+	var county_data = arguments[2];
+	var precip_cells = arguments[3];
+
+  // add states
+  map.append("g").attr('id', 'statepolygons')
+        .selectAll( 'path' )
+        .data(state_data.features)
         .enter()
         .append('path')
         .attr('d', path)
-        .attr('fill', "cornflowerblue")
-        .attr('stroke', '#fff')
+        .attr('fill', "#9a9a9a")
+        .attr('stroke', 'none');
+
+  // add counties
+  map.append("g").attr('id', 'countypolygons')
+        .selectAll( 'path' )
+        .data(county_data.features)
+        .enter()
+        .append('path')
+        .attr('d', path)
+        .attr('fill', "#efefef")
+        .attr('stroke', '#c6c6c6')
         .attr('stroke-width', 0.5)
         .on("mouseover", mouseover)
         .on("mouseout", mouseout);
+
+  // add state outline on top of counties
+  map.append("g").attr('id', 'stateoutline')
+        .selectAll( 'path' )
+        .data(state_data.features)
+        .enter()
+        .append('path')
+        .attr('d', path)
+        .attr("pointer-events", "none") // pointer events passed to county layer
+        .attr('fill', "transparent")
+        .attr('stroke', '#5f5f5f')
+        .attr('stroke-width', 0.5);
+
+  // add precip cells on top of everything else
+  map.append("g").attr('id', 'precipcells')
+        .selectAll( 'path' )
+        .data(precip_cells.features)
+        .enter()
+        .append('path')
+        .attr('d', path)
+        .attr("pointer-events", "none") // pointer events passed to county layer
+        .attr('fill', "transparent")
+        .attr('stroke', 'red')
+        .attr('stroke-width', 2);
+}
 
-});
-
-function mouseover(d){
+function mouseover(d) {
+  var x_val = d3.event.pageX; 
+	var y_val = d3.event.pageY;
+	var y_buffer = y_val*0.05; // move text above mouse by 5% of yval
+
+	d3.select(".tooltip")
+		.style("display", "block")
+		.style("position", "absolute")
+		.style("left", x_val+"px")
+		.style("top", (y_val-y_buffer)+"px")
+		.style("text-anchor", "end")
+		.style("text-transform", "capitalize")
+		.text(formatCountyName(d.properties.ID));
+
   d3.select(this).style('fill', 'orange'); 
 }
 
-function mouseout(d){
-  d3.select(this).style('fill', "cornflowerblue");
+function mouseout(d) {
+  d3.selectAll(".tooltip")
+		.style("display", "none");
+
+  d3.select(this).style('fill', "#efefef");
 }
+
+function formatCountyName(nm) {
+  return nm.split(",").reverse().join(", ");

scripts/process/save_map.R

@@ -12,11 +12,16 @@ process.save_map <- function(viz){
   deps <- readDepends(viz)
   checkRequired(deps, "map_data")
   map_data <- deps[["map_data"]]
-
+  
   # spatial data needs to be sp to use writeOGR
   # saves empty file if there is not any map features
   if(nrow(map_data) > 0){
     map_data_sp <- as(map_data, "Spatial") 
+    # precip cells were missing data, causing writeOGR to fail
+    # added the rowname ("cell 1") as an ID, and it works (Hack?)
+    if(any(dim(map_data_sp@data) == 0)){
+      map_data_sp@data <- data.frame(ID = row.names(map_data_sp@data), stringsAsFactors = FALSE)
+    }
     rgdal::writeOGR(map_data_sp, viz[['location']], 
                     layer="map_data_sp", driver="GeoJSON")
   } else {

viz.yaml

@@ -129,6 +129,14 @@ process:
     scripts: [scripts/process/cells_from_mask.R]
     depends: 
       mask_poly: "state_map_data"
+  - 
+    id: precip_cells_geojson
+    location: cache/precip_cells.geojson
+    reader: json
+    processor: save_map
+    scripts: [scripts/process/save_map.R]
+    depends: 
+      map_data: precip_cells
   -
     id: state_map_geojson
     location: cache/state_map.geojson