Skip to content

Commit

Permalink
Merge pull request #40 from lindsaycarr/d3
Browse files Browse the repository at this point in the history
d3 add precip cells for one timestep
  • Loading branch information
Lindsay Carr authored Jan 11, 2018
2 parents ef5d63a + 0718488 commit 4e57e52
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 27 deletions.
42 changes: 24 additions & 18 deletions js/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,23 @@ var div = d3.select("body")
.style("border", "3px")
.style("border-radius", "8px")
.style("font-family", "sans-serif");

// setup var to map precip data to cells
var precip = d3.map();

// precip color scale
var color = d3.scaleThreshold()
.domain(d3.range(0, 10)) // need better way to get range of data, should do inside queue
.range(d3.schemeBlues[9]);

// 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")
.defer(d3.csv, "../cache/precip_cell_data.csv", function(d) {
precip.set(d.cell, +d.precip);
})
.await(createMap);

function createMap() {
Expand All @@ -53,9 +64,7 @@ function createMap() {
.data(state_data.features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', "#9a9a9a")
.attr('stroke', 'none');
.attr('d', path);

// add counties
map.append("g").attr('id', 'countypolygons')
Expand All @@ -64,9 +73,6 @@ function createMap() {
.enter()
.append('path')
.attr('d', path)
.attr('fill', "#efefef")
.attr('stroke', '#c6c6c6')
.attr('stroke-width', 0.5)
.on("mouseover", mouseover)
.on("mouseout", mouseout);

Expand All @@ -76,11 +82,7 @@ function createMap() {
.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);
.attr('d', path); // pointer events passed to county layer

// add precip cells on top of everything else
map.append("g").attr('id', 'precipcells')
Expand All @@ -89,10 +91,14 @@ function createMap() {
.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);
.attr('fill', function(d) {
d.precip = precip.get(d.properties.ID); //use "get" to grab precip from the match ID
if(d.precip > 0) { //need if statement, adding "transparent" to array did not work
return color(d.precip);
} else {
return "transparent";
}
});
}

function mouseover(d) {
Expand All @@ -102,11 +108,8 @@ function mouseover(d) {

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');
Expand All @@ -121,3 +124,6 @@ function mouseout(d) {

function formatCountyName(nm) {
return nm.split(",").reverse().join(", ");
}


34 changes: 34 additions & 0 deletions layout/css/map.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
#statepolygons path,
#statepolygons line {
fill: #9a9a9a;
stroke: none;
stroke-width: 2;
}

#countypolygons path,
#countypolygons line {
fill: #efefef;
stroke: #c6c6c6;
stroke-width: 0.5;
}

#stateoutline path,
#stateoutline line {
fill: none;
stroke: #5f5f5f;
stroke-width: 0.5;
pointer-events: none; /* pointer events passed to layer below*/
}

#precipcells path,
#precipcells line {
stroke: none;
opacity: 0.7;
pointer-events: none; /* pointer events passed to layer below*/
}

.tooltip {
position: absolute;
text-anchor: end;
text-transform: capitalize;
}
9 changes: 8 additions & 1 deletion scripts/fetch/precip_cell_data.R
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,14 @@ fetch.stageiv_precip_gdp <- function(viz){
job <- geoknife::geoknife(stencil, fabric, wait = TRUE, REQUIRE_FULL_COVERAGE=FALSE)

data <- geoknife::result(job, with.units = TRUE)
saveRDS(data, file = viz[['location']])

tidy_data <- tidyr::gather(data, key = "cell", value = "precip",
-c(DateTime, variable, statistic, units))

#force into one timestep for now...animation of multiple will come later
tidy_data_t <- dplyr::filter(tidy_data, DateTime == "2014-01-02 12:00:00")

write.csv(tidy_data_t, file = viz[['location']], row.names=FALSE)
}

fetchTimestamp.stageiv_precip_gdp <- vizlab::alwaysCurrent
22 changes: 14 additions & 8 deletions viz.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ info:
required-packages:
vizlab:
repo: github
version: 0.2.2.9003
version: 0.2.2.9008
name: USGS-VIZLAB/vizlab
ref: v0.2.2.9003
ref: v0.2.2.9008
dplyr:
repo: CRAN
version: 0.5.0
Expand Down Expand Up @@ -81,8 +81,8 @@ fetch:
depends: viewbox_limits
-
id: precip_cell_data
location: cache/precip_cell_data.rds
reader: rds
location: cache/precip_cell_data.csv
reader: csv
fetcher: stageiv_precip_gdp
scripts: scripts/fetch/precip_cell_data.R
depends:
Expand Down Expand Up @@ -124,11 +124,11 @@ process:
id: precip_cells
location: cache/precip_cells.rds
reader: rds
cell_size: 80000
cell_size: 0.3
processor: cells_from_mask
scripts: [scripts/process/cells_from_mask.R]
depends:
mask_poly: "state_map_data"
mask_poly: "county_map_data"
-
id: precip_cells_geojson
location: cache/precip_cells.geojson
Expand Down Expand Up @@ -176,15 +176,21 @@ publish:
id: map_js
location: "js/map.js"
mimetype: application/javascript
-
id: map_css
location: "layout/css/map.css"
mimetype: text/css
-
id: vizstorm_page
name: index
template: fullpage
publisher: page
depends:
lib-d3-js: lib-d3-js
lib_d3_js: "lib-d3-js"
lib_d3_scale_js: "lib-d3-scale-js"
map_js: "map_js"
map_css: "map_css"
context:
resources: ["lib-d3-js"]
resources: ["lib_d3_js", "lib_d3_scale_js", "map_css"]
sections: ["map_js"]

0 comments on commit 4e57e52

Please sign in to comment.