Gatsby explore data page

.gitignore

@@ -17,3 +17,5 @@ styleguide
 .brackets.json
 .clasp.json
 .npmrc
+/.project
+gatsby-public

.settings/.gitignore

@@ -0,0 +1,3 @@
+/.jsdtscope
+/org.eclipse.wst.jsdt.ui.superType.container
+/org.eclipse.wst.jsdt.ui.superType.name

.settings/com.genuitec.eclipse.code.core.prefs

@@ -0,0 +1,2 @@
+codemixBuild=true
+eclipse.preferences.version=1

CONTRIBUTING.md

@@ -164,6 +164,31 @@ If you would like to query the local database instance:
 
 To update site data, run `make site-data`.
 
+
+### Gatsby gotchas
+
+[Gatsby](https://www.gatsbyjs.org/) is a JavaScript framework for building
+static websites. We're currently migrating from Jekyll to Gatsby. The migration
+is over a long time span, and there are some gotchas about making Jekyll and
+Gatsby work together.
+
+Our approach is to replace Jekyll pages with Gatsby pages in batches. Since
+Jekyll is happy to take static pages and assets and copy them over to the
+`_site` build directory, Gatsby can output compiled pages and then we just drop
+them in the right location in the Jekyll source. E.g. for the about page, after
+Gatsby builds it, we copy the about.html to the Jekyll source directory and then
+the Jekyll build will pick it up.
+
+Gatsby expects to own the entire website, so ...
+
+
+#### Path prefix
+
+Gatsby supports a [path prefix](https://www.gatsbyjs.org/docs/path-prefix/)
+which we use for the Federalist build previews. Gatsby expects to be the entire
+site.
+
+
 ### Deployment
 
 This site is deployed on [Federalist](https://federalist.fr.cloud.gov/) whenever a commit it pushed to GitHub. Changes are deployed automatically to the production site when commits are pushed to the `master` branch.

_bin/federalist-build.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+# 
+# Sets up the Federalist build for Jekyll 
+# Federalist already does this, but not until right before running jekyll. we
+# need to run jekyll as part of the npm setup because gatsby has to be built
+# after the jekyll build
+
+project_dir=$(dirname $(dirname $0))
+
+# Setup RVM for ruby
+source /usr/local/rvm/scripts/rvm
+
+# Set these after rvm to avoid them applying to the rvm function
+set -o errexit
+set -o pipefail
+set -o nounset
+set -x
+
+# Install the correct version of ruby
+read ruby_version < "$project_dir/.ruby-version"
+rvm install "$ruby_version"
+
+ruby -v
+
+# Install ruby dependencies
+gem install bundler
+bundle install
+
+# Append Federalist configuration to Jekyll config
+cat <<EOF >> "$project_dir/_config.yml"
+baseurl: "$BASEURL"
+branch: "$BRANCH"
+EOF
+
+bundle exec jekyll build

_config.noop.yml

@@ -0,0 +1,3 @@
+# A jekyll config that only copies from one directory to another
+source: _stage
+destination: _site

_config.yml

@@ -146,3 +146,5 @@ shruggie:
   - 009f8804ce5413a0d2a604e9938dba635c6c6222
   - cc20376993abd596768c9c60ff456ad9f4fe8e7c
   - 7f39b8e0a432747338ce075c50c19d2323da0e14
+
+destination: _site

_layouts/gatsby.html

@@ -0,0 +1 @@
+{{ content }}

explore/index.html

@@ -1,16 +1,7 @@
 ---
-layout: default
-permalink: /explore/
-redirect_from:
-  - /explore/exports/
-  - /explore/gdp/
-  - /explore/jobs/
-  - /explore/all-lands-production/
-  - /explore/federal-production/
-  - /explore/disbursements/
-  - /explore/federal-revenue-by-location/
+
 id: US
-title: Explore data
+
 national_page: true
 selector: location
 nav_items:

gatsby-site/README.md

@@ -1,6 +1,6 @@
 # gatsby-starter-default
 
-Minimalistic starter template for Gatsby with Redux and Emotion to get you started.
+Minimalistic starter template for Gatsby with Redux to get you started.
 
 ## Demo
 
@@ -25,4 +25,50 @@ gatsby new your-project-name https://github.com/caki0915/gatsby-starter-redux
 
 ## Deploy
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/caki0915/gatsby-starter-redux)
+Steps:
+1. Update gatsby-config.js to include the appropriate path-prefix
+2. Run gatsby build --prefix-paths
+3. Update the generated pages with the related frontmatter.
+  # About Page Frontmatter
+
+---
+title: About
+layout: none
+permalink: /about/
+redirect_from: /about/whats-new/
+---
+  # Explore Data Page Frontmatter
+
+---
+title: Explore data
+layout: none
+permalink: /explore/
+redirect_from:
+  - /explore/exports/
+  - /explore/gdp/
+  - /explore/jobs/
+  - /explore/all-lands-production/
+  - /explore/federal-production/
+  - /explore/disbursements/
+  - /explore/federal-revenue-by-location/
+---
+
+4. Delete all contents of gatsby-public
+5. Copy contents in the gatsby-site/public to gatsby-public
+
+## Leveraging Atomic Design Methodology
+Our React component code is organized by leveraging the Atomic Design Methodology approach. This helps us in organizing our code in logical way that is not bound by our current site design. 
+
+## D3 and React Integration Approach
+Since both React and D3 want to control the DOM we had to decide on a approach to leverage the best of both worlds. We wanted to leverage React for its Virtual DOM, Redux for its data management and D3 for its charting/math capabilties. So in order for us to maximize what we wanted from all libraries we decide on a "React Lifecycle Methods" approach. Here is a great article that summarizes the various approaches we reviewed.
+
+https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/
+
+More about the React Lifecycle Method approach
+
+http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
+
+https://medium.com/@sxywu/on-d3-react-and-a-little-bit-of-flux-88a226f328f3
+
+
+

gatsby-site/builds/maps/Makefile

@@ -0,0 +1,74 @@
+node_bin ?= ../node_modules/.bin/
+svgo ?= $(node_bin)svgo --disable=cleanupIDs
+svgeo ?= $(node_bin)svgeo --projection ../lib/albers-custom.js --mesh --
+topojson ?= $(node_nin)topojson
+raster_scale ?= 4
+states = AL AK AZ AR CA CO CT DE DC FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI WY
+
+all: \
+	state-maps \
+	viewboxes \
+	land/combined.gif
+
+state-maps: \
+	$(foreach state,$(states),states/$(state).svg) \
+	states/all.svg
+
+viewboxes: ../_data/viewboxes.yml
+
+optimize-svg:
+	$(svgo) -f states
+
+land/combined.gif: land/federal.gif land/tribal.gif
+	composite $^ $@
+
+land/%.gif: land/%.png
+	convert -posterize 2 -transparent-color white $^ $@
+
+land/%.png: land/%.json
+	./bin/rasterize.js --scale $(raster_scale) $^ > $@
+
+land/federal.json: data/shp/fedlanp010g.shp
+	$(topojson) -p FEATURE1 federal=$^ > $@.tmp
+	$(topojson)-merge --io federal --oo federal \
+		-k d.properties.FEATURE1 -- $@.tmp > $@
+	rm $@.tmp
+
+land/tribal.json: data/shp/indlanp010g.shp
+	$(topojson) tribal=$^ > $@
+
+data/shp/%.shp:
+	mkdir -p $(dir $@)
+	cd $(dir $@); \
+		curl -s "ftp://rockyftp.cr.usgs.gov/vdelivery/Datasets/Staged/SmallScale/Data/Boundaries/$*.shp_nt00966.tar.gz" \
+			| tar -xzvf -
+
+states/all.svg: data/us-topology.json
+	./bin/state-map.js $^ | $(svgo) -i - -o $@
+
+states/%.svg: data/us-topology.json
+	./bin/state-map.js --state $* --counties -- $^ \
+		| $(svgo) -i - -o $@
+
+offshore/all.svg: data/offshore.json
+	mkdir -p $(dir $@)
+	$(svgeo) $^ > $@
+
+../_data/viewboxes.yml:
+	echo "# viewboxes:" > $@
+	for state in all $(states); do \
+		echo "$${state}: \c" >> $@; \
+		xpath states/$${state}.svg '//@viewBox' \
+			| perl -p -e 's/^.*="([^"]+)"/"$$1"\n/' >> $@; \
+	done
+
+clean:
+	rm -f states/*.svg
+	rm -f land/*.png land/*.gif
+
+distclean:
+	rm -f data/shp
+
+.PHONY: \
+	state-maps \
+	viewboxes