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");
}
266 changes: 0 additions & 266 deletions scripts/process/as_svg.R

This file was deleted.

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.

Loading