diff --git a/js/map.js b/js/map.js index 4edd12b..7a9aed5 100644 --- a/js/map.js +++ b/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(", "); diff --git a/scripts/process/save_map.R b/scripts/process/save_map.R index 1a3b4d7..6d25a1f 100644 --- a/scripts/process/save_map.R +++ b/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 { diff --git a/viz.yaml b/viz.yaml index 241b933..a350250 100644 --- a/viz.yaml +++ b/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