Boilerplate for Creating Data Viz on newamerica.org

Setup

Run git clone https://github.com/newamerica-graphics/data-viz-boilerplate.git.

Before starting to build, run npm install and change the git origin git remote set-url origin https://github.com/newamerica-graphics/REPOSITORY.git.

1. Define all chartIDs that will be referenced in wagtail inside webpack.config.js
2. Create a .env file in the root of this directory with entries for AWS_ACCESS_KEY and AWS_SECRET_KEY.
3. Build your graphic any way you like
4. Inside src/index.js define initialization functions for each graphic. It may look somethings like this:

var settings = {
  "id-for-chart1": chart1init,
  "id-for-chart2": chart2init
};

window.renderDataViz = function(el) {
  let id = el.getAttribute(id);
  if (settings[id]) settings[id](el);
};

newamericadotorg looks for any element with the class .na-dataviz, and if a renderDataViz function is defined globally, calls it for each element. You can see a mock of what happens in the index.html file.

Notes

• React, ReactDOM, ReactRedux, and Redux are all globally scoped on newamerica.org, and defined as externals within this repo's webpack config. There is no need to install or bundle those dependencies if the graphic will exist exclusively on newamerica.org.

• Critical styles from newamerica.org are included in the head. This includes all fonts and type styles, bootstrap columns, margins, and containers.