Skip to content

Commit

Permalink
Merge pull request #35 from lindsaycarr/d3
Browse files Browse the repository at this point in the history
successfully inject map d3 into target/index.html (correct branch this time!)
  • Loading branch information
aappling-usgs authored Jan 5, 2018
2 parents 8eacccb + d41f258 commit ab43f11
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 125 deletions.
44 changes: 44 additions & 0 deletions js/map.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Width and height
var chart_width = 1000;
var chart_height = 600;

// Projection
var projection = d3.geoMercator() //changing to geoAlbers makes the map disappear
.scale(1500)
.center([-91.34397, 32.25196])
.translate([chart_width / 2, chart_height / 2]);
var path = d3.geoPath()
.projection(projection);

// Create SVG
var svg = d3.select("body")
.append("svg")
.attr("width", chart_width)
.attr("height", chart_height);

var map = svg.append( 'g' )
.attr( 'id', 'map' );

// Add map features
d3.json('../cache/state_map.geojson', function(us_data){

map.selectAll( 'path' )
.data(us_data.features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', "cornflowerblue")
.attr('stroke', '#fff')
.attr('stroke-width', 0.5)
.on("mouseover", mouseover)
.on("mouseout", mouseout);

});

function mouseover(d){
d3.select(this).style('fill', 'orange');
}

function mouseout(d){
d3.select(this).style('fill', "cornflowerblue");
}
6 changes: 3 additions & 3 deletions scripts/process/as_svg.R
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ sf_to_path <- function(.object, xlim, ylim, ..., width, height, pointsize = 12){
})

paths <- xml2::xml_child(rendered) %>% xml2::xml_children()

# collapse the multi-d into a single one:
data_out <- data.frame(d_raw = xml2::xml_attr(paths, 'd'),
feature_id = feature_ids,
Expand Down Expand Up @@ -137,7 +137,7 @@ process.as_svg_path <- function(viz){
select_(.dots = names(attributes)) %>%
do(sf_to_path(., xlim = svg$xlim, ylim = svg$ylim, width = svg$width, height = svg$height)) %>%
mutate(.value = 'path') %>% select(.value, everything())


saveRDS(svg_path_out, viz[['location']])
}
Expand Down Expand Up @@ -224,7 +224,7 @@ process.as_svg_g <- function(viz){
do.call(xml2::xml_add_child, append(list(.x = g), svg_data[j, ]))
}
}

saveRDS(xml2::as_list(g_main), file = viz[['location']])
}

Expand Down
26 changes: 26 additions & 0 deletions scripts/process/save_map.R
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
fetchTimestamp.save_map <- vizlab::alwaysCurrent

#' Saves sf data as geojson.
#' @description Converts sf data to sp, then saves as geojson for use in d3.
#'
#' @param viz a vizlab object including \code{viewbox_limits} and \code{fetch_args}
#' @details
#' Depends on: \code{map_data}: an sf representation of the x and y
#' (geographic coordinates) values of map_data shapes (counties, states, countries, etc).
#'
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")
rgdal::writeOGR(map_data_sp, viz[['location']],
layer="map_data_sp", driver="GeoJSON")
} else {
write.table(data.frame(), viz[["location"]])
}

}
23 changes: 0 additions & 23 deletions scripts/visualize/svg_skeleton.R

This file was deleted.

136 changes: 37 additions & 99 deletions viz.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ info:
parameter:
-
id: spatial_metadata
crs: '+init=epsg:2163'
crs: '+init=epsg:4326' # works with d3.geoMercator
bbox: [-87, 22, -70, 34]
-
id: plot_metadata
Expand Down Expand Up @@ -129,116 +129,54 @@ process:
scripts: [scripts/process/cells_from_mask.R]
depends:
mask_poly: "state_map_data"
-
id: precip_polygons_svg
location: cache/precip_polygons_svg.rds
reader: rds
processor: as_svg_path
attributes:
id: '{{ID}}'
class: 'precip-cell'
depends:
data: "precip_cells"
clip_box: "viewbox_limits"
scripts: [scripts/process/as_svg.R]
-
id: state_polygons_svg
location: cache/state_polygons_svg.rds
reader: rds
processor: as_svg_path
attributes:
id: '{{ID}}-geom'
depends:
data: "state_map_data"
clip_box: "viewbox_limits"
scripts: [scripts/process/as_svg.R]
-
id: pr_polygons_svg
location: cache/pr_polygons_svg.rds
reader: rds
processor: as_svg_path
attributes:
class: island
depends:
data: "puerto_rico_map_data"
clip_box: "viewbox_limits"
scripts: [scripts/process/as_svg.R]
-
id: state_style_svg
location: cache/state_style_dataframe.rds
reader: rds
processor: as_svg_use
attributes:
class: state
href: '#{{ID}}-geom'
id: '{{ID}}'
depends:
data: "state_map_data"
clip_box: "viewbox_limits"
scripts: [scripts/process/as_svg.R]
-
id: state_mouse_svg
location: cache/state_mouse_dataframe.rds
reader: rds
processor: as_svg_use
attributes:
onmouseover: hovertext('{{ID}}', evt)
onmouseout: hovertext(' ')
class: mouseover
href: '#{{ID}}-geom'
-
id: state_map_geojson
location: cache/state_map.geojson
reader: json
processor: save_map
scripts: [scripts/process/save_map.R]
depends:
data: "state_map_data"
clip_box: "viewbox_limits"
scripts: [scripts/process/as_svg.R]
map_data: state_map_data
-
id: svg_defs
location: cache/svg_defs.rds
processor: as_svg_defs
reader: rds
id: county_map_geojson
location: cache/county_map.geojson
reader: json
processor: save_map
scripts: [scripts/process/save_map.R]
depends:
states-geoms: state_polygons_svg
scripts: [scripts/process/as_svg.R]
map_data: county_map_data
-
id: svg_map_style
location: cache/svg_map_style.rds
processor: as_svg_g
reader: rds
id: puerto_rico_map_geojson
location: cache/puerto_rico_map.geojson
reader: json
processor: save_map
scripts: [scripts/process/save_map.R]
depends:
pr-style: pr_polygons_svg
states-style: state_style_svg
precip-cells: precip_polygons_svg
attributes:
id: map-style
scripts: [scripts/process/as_svg.R]
-
id: svg_map_mouse
location: cache/svg_map_mouse.rds
processor: as_svg_g
reader: rds
map_data: puerto_rico_map_data
-
id: islands_map_geojson
location: cache/islands_map.geojson
reader: json
processor: save_map
scripts: [scripts/process/save_map.R]
depends:
states-mouse: state_mouse_svg
attributes:
id: map-mouse
scripts: [scripts/process/as_svg.R]
map_data: islands_map_data
visualize:
-
id: svg_skeleton
location: cache/svg_skeleton.svg
visualizer: svg_skeleton
depends: [svg_map_style, svg_map_mouse, svg_defs]
scripts: ["scripts/visualize/svg_skeleton.R"]
reader: svg
mimetype: image/svg+xml
title: "SVG skeleton"
alttext: "Beginning of the full storm SVG"

publish:
-
id: map_js
location: "js/map.js"
mimetype: application/javascript
-
id: vizstorm_page
name: index
template: fullpage
publisher: page
depends:
storm_figure: "svg_skeleton"
lib-d3-js: lib-d3-js
map_js: "map_js"
context:
resources:
sections: "storm_figure"
resources: ["lib-d3-js"]
sections: ["map_js"]

0 comments on commit ab43f11

Please sign in to comment.