Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

successfully inject map d3 into target/index.html (correct branch this time!) #35

Merged
merged 19 commits into from
Jan 5, 2018
Merged
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){

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

../cache isn't going to be available on CHS

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.....WUT 🤦‍♀️ been operating under that assumption with this code.

Do you think I can push them to a target/data directory?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think data that you want access to in target needs to be publish or otherwise exported.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see #37


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"]