analytics.usa.gov

A project to publish website analytics for the US federal government.

For a detailed description of how the site works, read 18F's blog post on analytics.usa.gov.

Other organizations who have reused this project for their analytics dashboard:

The City of Anchorage, AK	The City of Boulder, CO
The City of Los Angeles, CA	The City of Santa Monica, CA
The City of Omaha, NE	The City of San Francisco, CA
The City of Sacramento, CA	Carbarrus County, NC
Cook County, IL	State of Kansas
City of Seattle	Douglas County, NE
Washington State University	State of Indiana
The States of Jersey	The City of Pittsburgh
U.S. Department of Education	U.S. Department of Veterans Affairs
USA.gov - General Services Administration	Government of Canada
State of Georgia	State of Delaware

This blog post details their implementations and lessons learned.

About the components

Ths app uses Jekyll to build the site, and Sass, Bourbon, and Neat for CSS.

The javascript provided is a webpacked aggregation of several different modules, leveraging d3 for the visualizations. Learn more on the webpack configuration

This is the main repository for https://analytics.usa.gov. Additional repositories are:

• https://github.com/18f/analytics-reporter
• https://github.com/18f/analytics-reporter-api
• https://github.com/18f/analytics-restarter

Developing locally

There are a couple of different ways to develop locally. Either using docker or running without docker.

Setup using Docker

You need Docker and docker-compose.

To build and run the app with docker-compose, run docker-compose up -d then you can access the app from http://localhost:4000, as the local filesystem is mounted on top of the docker container you can edit the files as you are developing locally.

• this does not yet run the webpack script.

To see the jekyll logs, run:

docker-compose logs -f

Running locally without docker.

Run Jekyll with development settings:

make dev
npm install
npm run build-dev

(This runs bundle exec jekyll serve --watch --config=_config.yml,_development.yml.)

Adding Additional Agencies

1. Ensure that data is being collected for a specific agency's Google Analytics ID. Visit 18F's analytics-reporter for more information. Save the url path for the data collection path.
2. Create a new json object in the /_data/agencies.json file. The slug attribute of the object will be the url path. The name attribute is the Agency's name.

Developing with local data

The development settings assume data is available at /fakedata. You can change this in _development.yml.

Developing with real live data from analytics-reporter

If also working off of local data, e.g. using analytics-reporter, you will need to make the data available over HTTP and through CORS.

Various tools can do this. This project recommends using the Node module serve:

npm install -g serve

Generate data to a directory:

analytics --output [dir]

Then run serve from the output directory:

serve --cors

The data will be available at http://localhost:3000 over CORS, with no path prefix. For example, device data will be at http://localhost:3000/devices.json.

Javascript Modules

• Index - includes the main dom selection and rendering queue of components, and the entry point for the webpack bundler.
• lib/barchart the d3 configuration of the bar charts
• lib/blocks an object of the specific components
• lib/consoleprint the console messages displayed to users
• lib/exceptions agency data to be changed by discrete exception rules
• lib/formatters methods to help format the display of visualization scales and values
• lib/renderblock d3 manipulator to load and render data for a component block
• lib/timeseries the d3 configuration of the timeseries charts
• lib/transformers helper methods to manipulate and consolidate raw data into proportional data.

Deploying the app

Production and staging applications are deployed via CI automatically. Any commits to the master branch will be deployed to production after passing automated tests in CI. Any commits to the develop branch will be deployed to the staging application.

It shouldn't be necessary to deploy manually, but with the Cloud Foundry CLI installed, follow these steps to deploy.

To deploy to analytics.usa.gov after building the site with the details in _config.yml:

make deploy_production

To deploy to analytics-staging.app.cloud.gov after building the site with the details in _config.yml and _staging.yml:

make deploy_staging

Deploying the app using Docker

NOTE: 18F does not use Docker in production!

If you are using Docker in production and you want to deploy just the static pages, you can build an nginx container with the static files built in, running the following command:

make docker-build-production PROD_IMAGE=yourvendor/your-image-name PROD_TAG=production

The resulting image will be an nginx server image that you can safely push and deploy to your server.

The image accepts an environment variable to specify the S3 URL that data at /data/* is served from:

docker run -p 8080:80 -e S3_BUCKET_URL=https://s3-us-gov-west-1.amazonaws.com/your-s3-bucket/data yourvendor/your-image-name:production

Building & Pushing Docker Images

This repo has git tags. The tag for Docker images built for this repo relate to these git tags. In the examples below, <version refers to the tag value of the current commit. When building a new version, be sure to increment the git tag appropriately.

When building images there are 2 images to build: <version> and <version>-production.

To build the images:

docker build -f ./Dockerfile -t 18fgsa/analytics.usa.gov:<version> .
docker build -f ./Dockerfile.production -t 18fgsa/analytics.usa.gov:<version>-production .

To push the images:

docker push 18fgsa/analytics.usa.gov:<version>
docker push 18fgsa/analytics.usa.gov:<version>-production

Environments

Environment	Branch	URL
Production	master	https://analytics.usa.gov
Staging	master	https://analytics-staging.app.cloud.gov

Webpack Configuration

The application compiles es6 modules into web friendly js via Wepback and the babel loader.

The webpack configuration is set in the wepback.config.js.

The current configuration uses babel present-env.

The webpack also includes linting using eslint leveraging the AirBnb linting preset.

The webconfig uses the TerserWebpackPlugin to minimize the bundle.

The resulting uglified bundle is build into assest/bundle.js.

NPM webpack commands

Command	purpose
npm run build-dev	a watch command rebuilding the webpack with a development configuration (i.e. no minifiecation)
npm run build-prod	a webpack command to build a minified and transpiled bundle.js

Public domain

This project is in the worldwide public domain. As stated in CONTRIBUTING:

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.