diff --git a/assets/src/scripts/accessibility.js b/assets/src/scripts/accessibility.js
index 3ed52bf3bc69c8d1cef95cd9269ec0738d3366c4..a31c42b73f56c5440b6a107715b0cc28ec2cb014 100644
--- a/assets/src/scripts/accessibility.js
+++ b/assets/src/scripts/accessibility.js
@@ -7,7 +7,7 @@
  * @param {Boolean} isInteractive
  * @param {String} idPrefix
  */
-function addSVGAccessibility(svg, {title, description, isInteractive, idPrefix}) {
+export const addSVGAccessibility = function (svg, {title, description, isInteractive, idPrefix}) {
     svg.selectAll('title, desc').remove();
     let descElement = svg.insert('desc', ':first-child')
         .html(description);
@@ -20,7 +20,7 @@ function addSVGAccessibility(svg, {title, description, isInteractive, idPrefix})
     if (isInteractive) {
         svg.attr('tabindex', 0);
     }
-}
+};
 
 /**
  * Appends a table for screen readers only containing the data. The number
@@ -32,7 +32,7 @@ function addSVGAccessibility(svg, {title, description, isInteractive, idPrefix})
  * @param {String} describeById - Optional id string of the element that describes this table
  * @param {String} describeByText - Optional text that describes this table
  */
-function addSROnlyTable(container, {columnNames, data, describeById=null, describeByText=null}) {
+export const addSROnlyTable = function (container, {columnNames, data, describeById=null, describeByText=null}) {
     if (data.length > 0) {
         const table = container
             .append('table')
@@ -70,7 +70,4 @@ function addSROnlyTable(container, {columnNames, data, describeById=null, descri
                     return d;
                 });
     }
-
-}
-
-module.exports = {addSVGAccessibility, addSROnlyTable};
+};
diff --git a/assets/src/scripts/accessibility.spec.js b/assets/src/scripts/accessibility.spec.js
index deab10fb4b4d17c0326ff8fdcf4c349664fba9de..2d6ce879fe077069bd4ca47f052ba824d34affa8 100644
--- a/assets/src/scripts/accessibility.spec.js
+++ b/assets/src/scripts/accessibility.spec.js
@@ -1,5 +1,5 @@
-const { addSVGAccessibility, addSROnlyTable } = require('./accessibility');
-const { select } = require('d3-selection');
+import { addSVGAccessibility, addSROnlyTable } from './accessibility';
+import { select } from 'd3-selection';
 
 describe('svgAccessibility tests', () => {
     describe('addAccessibility tests', () => {
diff --git a/assets/src/scripts/ajax.js b/assets/src/scripts/ajax.js
index abe32d4904283fecfa4b57e7e7ce3687e48e13d7..b4630fa100e23cc5ca059346abe618b5300aeee7 100644
--- a/assets/src/scripts/ajax.js
+++ b/assets/src/scripts/ajax.js
@@ -1,6 +1,6 @@
 // http://www.html5rocks.com/en/tutorials/es6/promises/
 
-export function get(url) {
+export const get = function (url) {
     // Return a new promise.
     return new Promise(function(resolve, reject) {
         // Do the usual XHR stuff
@@ -31,6 +31,6 @@ export function get(url) {
         // Make the request
         req.send();
     });
-}
+};
 
 window.testGet = get;
diff --git a/assets/src/scripts/ajax.spec.js b/assets/src/scripts/ajax.spec.js
index 933821e41fef7e115b5a853cbaa6ab553edee407..9180574097dc49eea2ce1b1e155e475f4b4e19a2 100644
--- a/assets/src/scripts/ajax.spec.js
+++ b/assets/src/scripts/ajax.spec.js
@@ -1,4 +1,4 @@
-const { get } = require('./ajax');
+import { get } from './ajax';
 
 describe('ajax module', () => {
     describe('get', () => {
diff --git a/assets/src/scripts/components/embed.js b/assets/src/scripts/components/embed.js
index cd13022d73650a3f830df470cb0b028d40bb5603..937cc18f7579a6479f9a0d6d21de55936639e2c5 100644
--- a/assets/src/scripts/components/embed.js
+++ b/assets/src/scripts/components/embed.js
@@ -1,4 +1,4 @@
-const { select } = require('d3-selection');
+import { select } from 'd3-selection';
 
 
 /*
@@ -6,12 +6,10 @@ const { select } = require('d3-selection');
  * @param {Object} store - Redux store
  * @param {Object} node - DOM element
  */
-function attachToNode(store, node) {
+export const attachToNode = function (store, node) {
     // Select all text in input when it gets focus
     const input = select(node).select('input');
     input.on('focus', function () {
         this.setSelectionRange(0, this.value.length);
     });
 }
-
-module.exports = {attachToNode};
diff --git a/assets/src/scripts/components/embed.spec.js b/assets/src/scripts/components/embed.spec.js
index 15bbb97b9002e5529fc6bfde7b62e132a1379327..bdf460b573fe8a23bd221427c6e854d5a2f07e91 100644
--- a/assets/src/scripts/components/embed.spec.js
+++ b/assets/src/scripts/components/embed.spec.js
@@ -1,6 +1,5 @@
-const { select } = require('d3-selection');
-
-const { attachToNode } = require('./embed');
+import { select } from 'd3-selection';
+import { attachToNode } from './embed';
 
 
 describe('embed component', () => {
diff --git a/assets/src/scripts/components/hydrograph/audible.js b/assets/src/scripts/components/hydrograph/audible.js
index 78052ec2da3ff149cb9425a5dc65a9330bcb9527..cc816bd52189d8cae1eca1935be9f6721a017951 100644
--- a/assets/src/scripts/components/hydrograph/audible.js
+++ b/assets/src/scripts/components/hydrograph/audible.js
@@ -1,20 +1,18 @@
-const { scaleLinear } = require('d3-scale');
-const { select } = require('d3-selection');
-const memoize = require('fast-memoize');
-const { createSelector, createStructuredSelector } = require('reselect');
-
-const { tsCursorPointsSelector } = require('./cursor');
-const { xScaleSelector, yScaleSelector } = require('./scales');
-const { allTimeSeriesSelector } = require('./timeSeries');
-
-const { TIMESERIES_AUDIO_ENABLED } = require('../../config');
-const { dispatch, link } = require('../../lib/redux');
-const { Actions } = require('../../store');
+import { scaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import memoize from 'fast-memoize';
+import { createSelector, createStructuredSelector } from 'reselect';
+import { tsCursorPointsSelector } from './cursor';
+import { xScaleSelector, yScaleSelector } from './scales';
+import { allTimeSeriesSelector } from './timeSeries';
+import config from '../../config';
+import { dispatch, link } from '../../lib/redux';
+import { Actions } from '../../store';
 
 // Higher tones get lower volume
 const volumeScale = scaleLinear().range([2, .3]);
 
-const AudioContext = TIMESERIES_AUDIO_ENABLED ? window.AudioContext || window.webkitAudioContext : null;
+const AudioContext = config.TIMESERIES_AUDIO_ENABLED ? window.AudioContext || window.webkitAudioContext : null;
 const getAudioContext = memoize(function () {
     return new AudioContext();
 });
@@ -114,7 +112,7 @@ const audiblePointsSelector = createSelector(
 
 export const audibleUI = function (elem) {
     // Only enable the audio interface on dev tiers.
-    if (!TIMESERIES_AUDIO_ENABLED) {
+    if (!config.TIMESERIES_AUDIO_ENABLED) {
         return;
     }
 
diff --git a/assets/src/scripts/components/hydrograph/audible.spec.js b/assets/src/scripts/components/hydrograph/audible.spec.js
index a9b97a3f905d2413908f7db7fe7708c27aa46bb0..a054581a2a1dedd03247aa37997276594df3b964 100644
--- a/assets/src/scripts/components/hydrograph/audible.spec.js
+++ b/assets/src/scripts/components/hydrograph/audible.spec.js
@@ -1,10 +1,7 @@
-const { select } = require('d3-selection');
-
-const { audibleUI } = require('./audible');
-
-const { provide } = require('../../lib/redux');
-
-const { configureStore } = require('../../store');
+import { select } from 'd3-selection';
+import { audibleUI } from './audible';
+import { provide } from '../../lib/redux';
+import { configureStore } from '../../store';
 
 
 const TEST_STATE = {
diff --git a/assets/src/scripts/components/hydrograph/axes.js b/assets/src/scripts/components/hydrograph/axes.js
index ddacb819bb0e1ad634e32633ef6921c958da9c96..a3a2ce94fcd6e1b12d1e37507d6bcb937400bf62 100644
--- a/assets/src/scripts/components/hydrograph/axes.js
+++ b/assets/src/scripts/components/hydrograph/axes.js
@@ -1,18 +1,14 @@
-const { axisBottom, axisLeft } = require('d3-axis');
-const { timeFormat } = require('d3-time-format');
-const { createSelector } = require('reselect');
-const { DateTime } = require('luxon');
-
-const { wrap } = require('../../utils');
-
-const { getYTickDetails } = require('./domain');
-const { layoutSelector } = require('./layout');
-const { xScaleSelector, yScaleSelector } = require('./scales');
-const { yLabelSelector, tsTimeZoneSelector } = require('./timeSeries');
-
-const { USWDS_LARGE_SCREEN } = require('../../config');
-const { getCurrentDateRange, getCurrentParmCd } = require('../../selectors/timeSeriesSelector');
-const { mediaQuery } = require('../../utils');
+import { axisBottom, axisLeft } from 'd3-axis';
+import { createSelector } from 'reselect';
+import { DateTime } from 'luxon';
+import { wrap } from '../../utils';
+import { getYTickDetails } from './domain';
+import { layoutSelector } from './layout';
+import { xScaleSelector, yScaleSelector } from './scales';
+import { yLabelSelector, tsTimeZoneSelector } from './timeSeries';
+import config from '../../config';
+import { getCurrentDateRange, getCurrentParmCd } from '../../selectors/timeSeriesSelector';
+import { mediaQuery } from '../../utils';
 
 
 const FORMAT = {
@@ -52,7 +48,7 @@ export const generateDateTicks = function(startDate, endDate, period, ianaTimeZo
         case 'P1Y':
             date = tzStartDate.startOf('month');
             timePeriod = 'months';
-            if (mediaQuery(USWDS_LARGE_SCREEN)) {
+            if (mediaQuery(config.USWDS_LARGE_SCREEN)) {
                 interval = 1;
             } else {
                 interval = 2;
diff --git a/assets/src/scripts/components/hydrograph/axes.spec.js b/assets/src/scripts/components/hydrograph/axes.spec.js
index 04cc741175a05290a5b87174d56d368c350484ea..cfb6803f1996091e6069ef791f3958b0c50bd603 100644
--- a/assets/src/scripts/components/hydrograph/axes.spec.js
+++ b/assets/src/scripts/components/hydrograph/axes.spec.js
@@ -1,7 +1,6 @@
-const { scaleLinear } = require('d3-scale');
-const { select } = require('d3-selection');
-
-const { createAxes, appendAxes, generateDateTicks } = require('./axes');
+import { scaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import { createAxes, appendAxes, generateDateTicks } from './axes';
 
 
 describe('Chart axes', () => {
diff --git a/assets/src/scripts/components/hydrograph/cursor.js b/assets/src/scripts/components/hydrograph/cursor.js
index c96e1cd64cac347c9c0488dcb522b3c8db670473..b591acd0a32dcd741a5fca65f27b8d528b29c3f0 100644
--- a/assets/src/scripts/components/hydrograph/cursor.js
+++ b/assets/src/scripts/components/hydrograph/cursor.js
@@ -1,14 +1,12 @@
-const { bisector } = require('d3-array');
-const memoize = require('fast-memoize');
-const { createSelector } = require('reselect');
-
-const { currentVariablePointsByTsIdSelector } = require('./drawingData');
-const { layoutSelector } = require('./layout');
-const { xScaleSelector } = require('./scales');
-const { isVisibleSelector } = require('./timeSeries');
-
-const { Actions } = require('../../store');
-const { dispatch, link } = require('../../lib/redux');
+import { bisector } from 'd3-array';
+import memoize from 'fast-memoize';
+import { createSelector } from 'reselect';
+import { currentVariablePointsByTsIdSelector } from './drawingData';
+import { layoutSelector } from './layout';
+import { xScaleSelector } from './scales';
+import { isVisibleSelector } from './timeSeries';
+import { Actions } from '../../store';
+import { dispatch, link } from '../../lib/redux';
 
 const SLIDER_STEPS = 1000;
 
diff --git a/assets/src/scripts/components/hydrograph/cursor.spec.js b/assets/src/scripts/components/hydrograph/cursor.spec.js
index 5bba92ec0ddd87ed498eadc125632501d4e70d04..723ecf450332a174160dd4a45d065a3addd48173 100644
--- a/assets/src/scripts/components/hydrograph/cursor.spec.js
+++ b/assets/src/scripts/components/hydrograph/cursor.spec.js
@@ -1,9 +1,7 @@
-const { select } = require('d3-selection');
-
-const { Actions, configureStore } = require('../../store');
-const { provide } = require('../../lib/redux');
-
-const { cursorSlider, getNearestTime, tsCursorPointsSelector, cursorOffsetSelector } = require('./cursor');
+import { select } from 'd3-selection';
+import { Actions, configureStore } from '../../store';
+import { provide } from '../../lib/redux';
+import { cursorSlider, getNearestTime, tsCursorPointsSelector, cursorOffsetSelector } from './cursor';
 
 
 
diff --git a/assets/src/scripts/components/hydrograph/domain.js b/assets/src/scripts/components/hydrograph/domain.js
index 117c632f8b9907efd8e4887c5d4f3bf7609ad120..6f892308471f72fa32b83f4cf58b92790a1f940a 100644
--- a/assets/src/scripts/components/hydrograph/domain.js
+++ b/assets/src/scripts/components/hydrograph/domain.js
@@ -1,13 +1,10 @@
-const { extent, ticks } = require('d3-array');
-const { format } = require('d3-format');
-const { createSelector } = require('reselect');
-
-const { mediaQuery } = require('../../utils');
-const config = require('../../config');
-
-const { visiblePointsSelector } = require('./drawingData');
-
-const { getCurrentParmCd } = require('../../selectors/timeSeriesSelector');
+import { extent, ticks } from 'd3-array';
+import { format } from 'd3-format';
+import { createSelector } from 'reselect';
+import { mediaQuery } from '../../utils';
+import config from '../../config';
+import { visiblePointsSelector } from './drawingData';
+import { getCurrentParmCd } from '../../selectors/timeSeriesSelector';
 
 
 
diff --git a/assets/src/scripts/components/hydrograph/domain.spec.js b/assets/src/scripts/components/hydrograph/domain.spec.js
index e0c020615b361b5ecaf36f155d319d78e053305f..20f636330e217e47e343bd2701f64f9584beacc0 100644
--- a/assets/src/scripts/components/hydrograph/domain.spec.js
+++ b/assets/src/scripts/components/hydrograph/domain.spec.js
@@ -1,4 +1,4 @@
-const { extendDomain, getYDomain, getYTickDetails } = require('./domain');
+import { extendDomain, getYDomain, getYTickDetails } from './domain';
 
 
 describe('domain module', () => {
diff --git a/assets/src/scripts/components/hydrograph/drawingData.js b/assets/src/scripts/components/hydrograph/drawingData.js
index 539c808fdc59ee66bf35837732cbf59440118199..ab7dfd2c68826c86c3473ef4044d79c656c6128b 100644
--- a/assets/src/scripts/components/hydrograph/drawingData.js
+++ b/assets/src/scripts/components/hydrograph/drawingData.js
@@ -1,13 +1,11 @@
-const memoize = require('fast-memoize');
-const find = require('lodash/find');
-const { DateTime } = require('luxon');
-const { createSelector } = require('reselect');
-const { format } = require('d3-format');
-
-const { allTimeSeriesSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeSeries');
-
-const { getVariables, getTsRequestKey, getRequestTimeRange, getIanaTimeZone } = require('../../selectors/timeSeriesSelector');
-const { getCurrentVariableMedianStatistics } = require('../../selectors/medianStatisticsSelector');
+import memoize from 'fast-memoize';
+import find from 'lodash/find';
+import { DateTime } from 'luxon';
+import { createSelector } from 'reselect';
+import { format } from 'd3-format';
+import { allTimeSeriesSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } from './timeSeries';
+import { getVariables, getTsRequestKey, getRequestTimeRange, getIanaTimeZone } from '../../selectors/timeSeriesSelector';
+import { getCurrentVariableMedianStatistics } from '../../selectors/medianStatisticsSelector';
 
 export const MASK_DESC = {
     ice: 'Ice Affected',
diff --git a/assets/src/scripts/components/hydrograph/drawingData.spec.js b/assets/src/scripts/components/hydrograph/drawingData.spec.js
index d2c1ad475ae9e7ce342a5ff7769730f1f4be602e..9b18e9d50a6e0d78d64125de00e2c8a030ec0281 100644
--- a/assets/src/scripts/components/hydrograph/drawingData.spec.js
+++ b/assets/src/scripts/components/hydrograph/drawingData.spec.js
@@ -1,9 +1,6 @@
 
-const { DateTime } = require('luxon');
-const { lineSegmentsSelector, pointsSelector, pointsTableDataSelector, allPointsSelector, pointsByTsKeySelector,
-    classesForPoint, lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector,
-    currentVariablePointsSelector, currentVariablePointsByTsIdSelector, visiblePointsSelector,
-    getCurrentVariableMedianStatPoints, MAX_LINE_POINT_GAP } = require('./drawingData');
+import { DateTime } from 'luxon';
+import { lineSegmentsSelector, pointsSelector, pointsTableDataSelector, allPointsSelector, pointsByTsKeySelector, classesForPoint, lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, currentVariablePointsSelector, currentVariablePointsByTsIdSelector, visiblePointsSelector, getCurrentVariableMedianStatPoints, MAX_LINE_POINT_GAP } from './drawingData';
 
 const TEST_DATA = {
     series: {
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 6890d5549fc21260dfc49ef77a24ee08c1067171..8c0f233f6fb384257f0e73984e7bb34d31ee426c 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -1,32 +1,27 @@
 /**
  * Hydrograph charting module.
  */
-const { extent } = require('d3-array');
-const { line: d3Line, curveStepAfter } = require('d3-shape');
-const { select } = require('d3-selection');
-
-const { createStructuredSelector } = require('reselect');
-
-const { addSVGAccessibility } = require('../../accessibility');
-const { USWDS_SMALL_SCREEN, STATIC_URL } = require('../../config');
-const { dispatch, link, provide } = require('../../lib/redux');
-const { Actions } = require('../../store');
-const { callIf, mediaQuery } = require('../../utils');
-
-const { audibleUI } = require('./audible');
-const { appendAxes, axesSelector } = require('./axes');
-const { cursorSlider } = require('./cursor');
-const {lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID,
-    getCurrentVariableMedianStatPoints } = require('./drawingData');
-const { CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } = require('./layout');
-const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend');
-const { plotSeriesSelectTable, availableTimeSeriesSelector } = require('./parameters');
-const { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } = require('./scales');
-const { allTimeSeriesSelector,  isVisibleSelector, titleSelector,
-    descriptionSelector,  currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } = require('./timeSeries');
-const { createTooltipFocus, createTooltipText } = require('./tooltip');
-
-const { getTimeSeriesCollectionIds, isLoadingTS } = require('../../selectors/timeSeriesSelector');
+import { extent } from 'd3-array';
+
+import { line as d3Line, curveStepAfter } from 'd3-shape';
+import { select } from 'd3-selection';
+import { createStructuredSelector } from 'reselect';
+import { addSVGAccessibility } from '../../accessibility';
+import config from '../../config';
+import { dispatch, link, provide } from '../../lib/redux';
+import { Actions } from '../../store';
+import { callIf, mediaQuery } from '../../utils';
+import { audibleUI } from './audible';
+import { appendAxes, axesSelector } from './axes';
+import { cursorSlider } from './cursor';
+import { lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID, getCurrentVariableMedianStatPoints } from './drawingData';
+import { CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } from './layout';
+import { drawSimpleLegend, legendMarkerRowsSelector } from './legend';
+import { plotSeriesSelectTable, availableTimeSeriesSelector } from './parameters';
+import { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } from './scales';
+import { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector, currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } from './timeSeries';
+import { createTooltipFocus, createTooltipText } from './tooltip';
+import { getTimeSeriesCollectionIds, isLoadingTS } from '../../selectors/timeSeriesSelector';
 
 
 const drawMessage = function(elem, message) {
@@ -165,7 +160,7 @@ const plotSvgDefs = function(elem) {
 };
 
 
-const timeSeriesLegend = function(elem) {
+export const timeSeriesLegend = function(elem) {
     elem.append('div')
         .classed('hydrograph-container', true)
         .call(link(drawSimpleLegend, createStructuredSelector({
@@ -235,13 +230,13 @@ const watermark = function (elem) {
     elem.append('img')
         .classed('watermark', true)
         .attr('alt', 'USGS - science for a changing world')
-        .attr('src', STATIC_URL + '/img/USGS_green_logo.svg')
+        .attr('src', config.STATIC_URL + '/img/USGS_green_logo.svg')
         .call(link(function(elem, layout) {
             const transformStringSmallScreen = `matrix(0.5, 0, 0, 0.5, ${(layout.width - layout.margin.left) * .025
                     + layout.margin.left - 50}, ${layout.height * .60})`;
             const transformStringForAllOtherScreens = `matrix(1, 0, 0, 1, ${(layout.width - layout.margin.left) * .025
                     + layout.margin.left}, ${(layout.height * .75 - (-1 * layout.height + 503) * .12)})`;
-            if (!mediaQuery(USWDS_SMALL_SCREEN)) {
+            if (!mediaQuery(config.USWDS_SMALL_SCREEN)) {
                 // calculates the watermark position based on current layout dimensions
                 // and a conversion factor minus the area for blank space due to scaling
                 elem.style('transform', transformStringSmallScreen);
@@ -256,7 +251,7 @@ const watermark = function (elem) {
         }, layoutSelector));
 };
 
-const timeSeriesGraph = function(elem) {
+export const timeSeriesGraph = function(elem) {
     elem.append('div')
         .attr('class', 'hydrograph-container')
         .call(watermark)
@@ -430,7 +425,7 @@ const noDataAlert = function(elem, tsCollectionIds) {
     }
 };
 
-const attachToNode = function (store, node, {siteno, parameter, compare, cursorOffset, interactive = true} = {}) {
+export const attachToNode = function (store, node, {siteno, parameter, compare, cursorOffset, interactive = true} = {}) {
     if (!siteno) {
         select(node).call(drawMessage, 'No data is available.');
         return;
@@ -490,6 +485,3 @@ const attachToNode = function (store, node, {siteno, parameter, compare, cursorO
     store.dispatch(Actions.retrieveTimeSeries(siteno, parameter ? [parameter] : null));
     store.dispatch(Actions.retrieveMedianStatistics(siteno));
 };
-
-
-module.exports = {attachToNode, timeSeriesLegend, timeSeriesGraph};
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index df18de5cc12bd2bf24b07b6e598f547699791bc3..2e6dfde2953083667a714e99138faf004fc5bcca 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -1,8 +1,7 @@
-const { select, selectAll } = require('d3-selection');
-const { provide } = require('../../lib/redux');
-
-const { attachToNode, timeSeriesGraph, timeSeriesLegend } = require('./index');
-const { Actions, configureStore } = require('../../store');
+import { select, selectAll } from 'd3-selection';
+import { provide } from '../../lib/redux';
+import { attachToNode, timeSeriesGraph, timeSeriesLegend } from './index';
+import { Actions, configureStore } from '../../store';
 
 
 const TEST_STATE = {
diff --git a/assets/src/scripts/components/hydrograph/layout.js b/assets/src/scripts/components/hydrograph/layout.js
index e5f5909480115ff5c6eaad6701fce8aafef8a61f..e0aee1e66f316e2755333aaf2f9aa3058b22a0b7 100644
--- a/assets/src/scripts/components/hydrograph/layout.js
+++ b/assets/src/scripts/components/hydrograph/layout.js
@@ -1,16 +1,15 @@
 // Define constants for the time series graph's aspect ratio and margins as well as a
 // selector function which will return the width/height to use.
-const { createSelector } = require('reselect');
+import { createSelector } from 'reselect';
 
-const { USWDS_SITE_MAX_WIDTH } = require('../../config');
-const { mediaQuery } = require('../../utils');
+import config from '../../config';
+import { mediaQuery } from '../../utils';
+import { tickSelector } from './domain';
 
-const { tickSelector } = require('./domain');
 
 
-
-const ASPECT_RATIO = 1 / 2;
-const ASPECT_RATIO_PERCENT = `${100 * ASPECT_RATIO}%`;
+export const ASPECT_RATIO = 1 / 2;
+export const ASPECT_RATIO_PERCENT = `${100 * ASPECT_RATIO}%`;
 const MARGIN = {
     top: 25,
     right: 0,
@@ -23,10 +22,10 @@ const MARGIN_SMALL_DEVICE = {
     bottom: 10,
     left: 0
 };
-const CIRCLE_RADIUS = 4;
-const CIRCLE_RADIUS_SINGLE_PT = 1;
+export const CIRCLE_RADIUS = 4;
+export const CIRCLE_RADIUS_SINGLE_PT = 1;
 
-const SPARK_LINE_DIM = {
+export const SPARK_LINE_DIM = {
     width: 60,
     height: 30
 };
@@ -36,12 +35,12 @@ const SPARK_LINE_DIM = {
  * @param {Object} state - Redux store
  * @return {Object} containing width and height properties.
  */
-const layoutSelector = createSelector(
+export const layoutSelector = createSelector(
     (state) => state.ui.width,
     (state) => state.ui.windowWidth,
     tickSelector,
     (width, windowWidth, tickDetails) => {
-        const margin = mediaQuery(USWDS_SITE_MAX_WIDTH) ? MARGIN : MARGIN_SMALL_DEVICE;
+        const margin = mediaQuery(config.USWDS_SITE_MAX_WIDTH) ? MARGIN : MARGIN_SMALL_DEVICE;
         const tickLengths = tickDetails.tickValues.map(v => tickDetails.tickFormat(v).length);
         const approxLabelLength = Math.max(...tickLengths) * 10;
         return {
@@ -55,6 +54,3 @@ const layoutSelector = createSelector(
         };
     }
 );
-
-module.exports = {ASPECT_RATIO, ASPECT_RATIO_PERCENT, CIRCLE_RADIUS, layoutSelector, SPARK_LINE_DIM,
-    CIRCLE_RADIUS_SINGLE_PT};
diff --git a/assets/src/scripts/components/hydrograph/layout.spec.js b/assets/src/scripts/components/hydrograph/layout.spec.js
index 0a36d5b5635f1c3b01c95a855df80114878ff117..68c957f5d8388561701e10ea9eda47e1f802e39a 100644
--- a/assets/src/scripts/components/hydrograph/layout.spec.js
+++ b/assets/src/scripts/components/hydrograph/layout.spec.js
@@ -1,7 +1,7 @@
-const proxyquire = require('proxyquireify')(require);
-const { format } = require('d3-format');
-
-const { ASPECT_RATIO } = require('./layout');
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
+import { format } from 'd3-format';
+import { ASPECT_RATIO } from './layout';
 
 describe('points module', () => {
     let layoutMock = proxyquire('./layout', {
diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index 9527b29bfd12af2f33ffa87b7b15519b8ae3bf6d..093c6b955470bd0888381838f3c736d6a7eddc84 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -1,15 +1,14 @@
 // functions to facilitate legend creation for a d3 plot
-const memoize = require('fast-memoize');
-const { createSelector } = require('reselect');
+import memoize from 'fast-memoize';
 
-const { CIRCLE_RADIUS } = require('./layout');
-const { defineLineMarker, defineTextOnlyMarker, defineRectangleMarker} = require('./markers');
-const { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC } = require('./drawingData');
-
-const { USWDS_MEDIUM_SCREEN } = require('../../config');
-const { getMethods } = require('../../selectors/timeSeriesSelector');
-const { getCurrentVariableMedianMetadata} = require('../../selectors/medianStatisticsSelector');
-const { mediaQuery } = require('../../utils');
+import { createSelector } from 'reselect';
+import { CIRCLE_RADIUS } from './layout';
+import { defineLineMarker, defineTextOnlyMarker, defineRectangleMarker } from './markers';
+import { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC } from './drawingData';
+import config from '../../config';
+import { getMethods } from '../../selectors/timeSeriesSelector';
+import { getCurrentVariableMedianMetadata } from '../../selectors/medianStatisticsSelector';
+import { mediaQuery } from '../../utils';
 
 const TS_LABEL = {
     'current': 'Current: ',
@@ -125,7 +124,7 @@ export const drawSimpleLegend = function(div, {legendMarkerRows, layout}) {
     let legend = svg
         .append('g')
             .attr('class', 'legend')
-            .attr('transform', `translate(${mediaQuery(USWDS_MEDIUM_SCREEN) ? layout.margin.left : 0}, 0)`);
+            .attr('transform', `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? layout.margin.left : 0}, 0)`);
 
     legendMarkerRows.forEach((rowMarkers, rowIndex) => {
         let xPosition = 0;
diff --git a/assets/src/scripts/components/hydrograph/legend.spec.js b/assets/src/scripts/components/hydrograph/legend.spec.js
index 7241ab26407d4b62df48c64743bd1fb6be637d93..aed285f9059814af1f0d3dcffbe964c7429083ca 100644
--- a/assets/src/scripts/components/hydrograph/legend.spec.js
+++ b/assets/src/scripts/components/hydrograph/legend.spec.js
@@ -1,7 +1,6 @@
-const { select } = require('d3-selection');
-
-const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend');
-const { lineMarker, rectangleMarker, textOnlyMarker } = require('./markers');
+import { select } from 'd3-selection';
+import { drawSimpleLegend, legendMarkerRowsSelector } from './legend';
+import { lineMarker, rectangleMarker, textOnlyMarker } from './markers';
 
 describe('Legend module', () => {
 
diff --git a/assets/src/scripts/components/hydrograph/markers.spec.js b/assets/src/scripts/components/hydrograph/markers.spec.js
index c18094174673eb0c690d1407649c67e9db2111bf..5f07b1cb6e228fb5d14b5010d1c256731f35cd51 100644
--- a/assets/src/scripts/components/hydrograph/markers.spec.js
+++ b/assets/src/scripts/components/hydrograph/markers.spec.js
@@ -1,6 +1,5 @@
-const { select } = require('d3-selection');
-
-const { lineMarker, circleMarker, rectangleMarker, textOnlyMarker } = require('./markers');
+import { select } from 'd3-selection';
+import { lineMarker, circleMarker, rectangleMarker, textOnlyMarker } from './markers';
 
 describe('Markers module', () => {
 
diff --git a/assets/src/scripts/components/hydrograph/parameters.js b/assets/src/scripts/components/hydrograph/parameters.js
index e5979a6c13dc4da54e90e8b930ad4cadfa1aaffd..7a0304c8895d25d79cad6edb764884d903bf03e0 100644
--- a/assets/src/scripts/components/hydrograph/parameters.js
+++ b/assets/src/scripts/components/hydrograph/parameters.js
@@ -1,17 +1,14 @@
-const { createSelector } = require('reselect');
-const { line } = require('d3-shape');
-const { select } = require('d3-selection');
-
-const { MASK_DESC } = require('./drawingData');
-const { SPARK_LINE_DIM, CIRCLE_RADIUS_SINGLE_PT } = require('./layout');
-const { allTimeSeriesSelector } = require('./timeSeries');
-
-const { dispatch } = require('../../lib/redux');
-const { sortedParameters } = require('../../models');
-const { Actions } = require('../../store');
-const { appendTooltip } = require('../../tooltips');
-
-const { getVariables, getCurrentVariableID } = require('../../selectors/timeSeriesSelector');
+import { createSelector } from 'reselect';
+import { line } from 'd3-shape';
+import { select } from 'd3-selection';
+import { MASK_DESC } from './drawingData';
+import { SPARK_LINE_DIM, CIRCLE_RADIUS_SINGLE_PT } from './layout';
+import { allTimeSeriesSelector } from './timeSeries';
+import { dispatch } from '../../lib/redux';
+import { sortedParameters } from '../../models';
+import { Actions } from '../../store';
+import { appendTooltip } from '../../tooltips';
+import { getVariables, getCurrentVariableID } from '../../selectors/timeSeriesSelector';
 
 
 /**
diff --git a/assets/src/scripts/components/hydrograph/parameters.spec.js b/assets/src/scripts/components/hydrograph/parameters.spec.js
index c141d72fa9cdf6711349266be80a11fd5e19ec20..3c87249c1a58b0cfd007d9a30b47feacf37d05f6 100644
--- a/assets/src/scripts/components/hydrograph/parameters.spec.js
+++ b/assets/src/scripts/components/hydrograph/parameters.spec.js
@@ -1,7 +1,6 @@
-const { select } = require('d3-selection');
-const { scaleLinear } = require('d3-scale');
-
-const { addSparkLine, availableTimeSeriesSelector, plotSeriesSelectTable } = require('./parameters');
+import { select } from 'd3-selection';
+import { scaleLinear } from 'd3-scale';
+import { addSparkLine, availableTimeSeriesSelector, plotSeriesSelectTable } from './parameters';
 
 
 describe('Parameters module', () => {
diff --git a/assets/src/scripts/components/hydrograph/scales.js b/assets/src/scripts/components/hydrograph/scales.js
index 785fd718462784395494aa8bde4940b6cd5c5f23..b6b955b7e778ba1fc27c97e8105fd515597e9f23 100644
--- a/assets/src/scripts/components/hydrograph/scales.js
+++ b/assets/src/scripts/components/hydrograph/scales.js
@@ -1,14 +1,12 @@
-const { scaleLinear } = require('d3-scale');
-const memoize = require('fast-memoize');
-const { createSelector } = require('reselect');
-
-const { default: scaleSymlog } = require('../../lib/symlog');
-const { getYDomain, SYMLOG_PARMS } = require('./domain');
-const { layoutSelector } = require('./layout');
-const { timeSeriesSelector} = require('./timeSeries');
-const { visiblePointsSelector, pointsByTsKeySelector } = require('./drawingData');
-
-const { getVariables, getCurrentParmCd, getRequestTimeRange } = require('../../selectors/timeSeriesSelector');
+import { scaleLinear } from 'd3-scale';
+import memoize from 'fast-memoize';
+import { createSelector } from 'reselect';
+import { default as scaleSymlog } from '../../lib/symlog';
+import { getYDomain, SYMLOG_PARMS } from './domain';
+import { layoutSelector } from './layout';
+import { timeSeriesSelector } from './timeSeries';
+import { visiblePointsSelector, pointsByTsKeySelector } from './drawingData';
+import { getVariables, getCurrentParmCd, getRequestTimeRange } from '../../selectors/timeSeriesSelector';
 
 
 /**
@@ -17,7 +15,7 @@ const { getVariables, getCurrentParmCd, getRequestTimeRange } = require('../../s
  * @param {Number} xSize - range of scale
  * @return {Object} d3 scale for time.
  */
-function createXScale(timeRange, xSize) {
+export const createXScale = function (timeRange, xSize) {
     // xScale is oriented on the left
     let scale = scaleLinear()
         .range([0, xSize]);
@@ -25,7 +23,7 @@ function createXScale(timeRange, xSize) {
         scale.domain([timeRange.start, timeRange.end]);
     }
     return scale;
-}
+};
 
 /**
  * Create the scale based on the parameter code
@@ -34,7 +32,7 @@ function createXScale(timeRange, xSize) {
  * @param {Array} extent
  * @param {Number} size
  */
-function createYScale(parmCd, extent, size) {
+export const createYScale = function (parmCd, extent, size) {
     if (SYMLOG_PARMS.indexOf(parmCd) >= 0) {
         return scaleSymlog()
             .domain(extent)
@@ -44,7 +42,7 @@ function createYScale(parmCd, extent, size) {
             .domain(extent)
             .range([size, 0]);
     }
-}
+};
 
 
 /**
@@ -53,7 +51,7 @@ function createYScale(parmCd, extent, size) {
  * @param  {Object} state       Redux store
  * @return {Function}           D3 scale function
  */
-const xScaleSelector = memoize(tsKey => createSelector(
+export const xScaleSelector = memoize(tsKey => createSelector(
     layoutSelector,
     getRequestTimeRange(tsKey),
     (layout, requestTimeRange) => {
@@ -67,7 +65,7 @@ const xScaleSelector = memoize(tsKey => createSelector(
  * @param  {Object} state   Redux store
  * @return {Function}       D3 scale function
  */
-const yScaleSelector = createSelector(
+export const yScaleSelector = createSelector(
     layoutSelector,
     visiblePointsSelector,
     getCurrentParmCd,
@@ -105,7 +103,7 @@ const parmCdPointsSelector = memoize((tsKey, period) => createSelector(
  * Returns x and y scales for all "current" time series.
  * @type {Object}   Mapping of parameter code to time series list.
  */
-const timeSeriesScalesByParmCdSelector = memoize((tsKey, period, dimensions) => createSelector(
+export const timeSeriesScalesByParmCdSelector = memoize((tsKey, period, dimensions) => createSelector(
     parmCdPointsSelector(tsKey, period),
     getRequestTimeRange(tsKey, period),
     (pointsByParmCd, requestTimeRange) => {
@@ -120,6 +118,3 @@ const timeSeriesScalesByParmCdSelector = memoize((tsKey, period, dimensions) =>
         }, {});
     }
 ));
-
-
-module.exports = {createXScale, createYScale, xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector};
diff --git a/assets/src/scripts/components/hydrograph/scales.spec.js b/assets/src/scripts/components/hydrograph/scales.spec.js
index 6a735a4416ee892ceae9de66b8997eb94107dd3d..bd75633523a08cea0e470df1c48f64c49513b758 100644
--- a/assets/src/scripts/components/hydrograph/scales.spec.js
+++ b/assets/src/scripts/components/hydrograph/scales.spec.js
@@ -1,7 +1,6 @@
-const { extent } = require('d3-array');
-const { DateTime } = require('luxon');
-
-const { createXScale, createYScale, yScaleSelector } = require('./scales');
+import { extent } from 'd3-array';
+import { DateTime } from 'luxon';
+import { createXScale, createYScale, yScaleSelector } from './scales';
 
 
 describe('scales', () => {
diff --git a/assets/src/scripts/components/hydrograph/timeSeries.js b/assets/src/scripts/components/hydrograph/timeSeries.js
index 2c37fe74682ee0782b0a6453d8c386bf5960421a..1623c56f8f402b41a9edfa5e0e72b512614928af 100644
--- a/assets/src/scripts/components/hydrograph/timeSeries.js
+++ b/assets/src/scripts/components/hydrograph/timeSeries.js
@@ -1,9 +1,8 @@
-const { timeFormat } = require('d3-time-format');
-const memoize = require('fast-memoize');
-const { createSelector } = require('reselect');
-const { DateTime } = require('luxon');
-
-const { getRequestTimeRange, getCurrentVariable, getTsRequestKey, getIanaTimeZone, getNwisTimeZone } = require('../../selectors/timeSeriesSelector');
+import { timeFormat } from 'd3-time-format';
+import memoize from 'fast-memoize';
+import { createSelector } from 'reselect';
+import { DateTime } from 'luxon';
+import { getRequestTimeRange, getCurrentVariable, getTsRequestKey, getIanaTimeZone, getNwisTimeZone } from '../../selectors/timeSeriesSelector';
 
 
 // Create a time formatting function from D3's timeFormat
diff --git a/assets/src/scripts/components/hydrograph/timeSeries.spec.js b/assets/src/scripts/components/hydrograph/timeSeries.spec.js
index c61dd6821519dccdaa9c9d850d511b17c118eef1..69744d8162c5e4d13093b65519f1f3b348d950ef 100644
--- a/assets/src/scripts/components/hydrograph/timeSeries.spec.js
+++ b/assets/src/scripts/components/hydrograph/timeSeries.spec.js
@@ -1,6 +1,4 @@
-const { timeSeriesSelector, hasTimeSeriesWithPoints, isVisibleSelector, yLabelSelector,
-    titleSelector, descriptionSelector, currentVariableTimeSeriesSelector,
-    allTimeSeriesSelector, tsTimeZoneSelector} = require('./timeSeries');
+import { timeSeriesSelector, hasTimeSeriesWithPoints, isVisibleSelector, yLabelSelector, titleSelector, descriptionSelector, currentVariableTimeSeriesSelector, allTimeSeriesSelector, tsTimeZoneSelector } from './timeSeries';
 
 
 const TEST_DATA = {
diff --git a/assets/src/scripts/components/hydrograph/tooltip.js b/assets/src/scripts/components/hydrograph/tooltip.js
index aa87e50789b9e12bce5505079cb2c23d17ca5c8f..c39f3dc6bbcd581f49a5c3a249f63b5f303c81ec 100644
--- a/assets/src/scripts/components/hydrograph/tooltip.js
+++ b/assets/src/scripts/components/hydrograph/tooltip.js
@@ -1,23 +1,19 @@
 
-const { mouse, select } = require('d3-selection');
-const { transition } = require('d3-transition');
-const memoize = require('fast-memoize');
-const { createSelector, createStructuredSelector } = require('reselect');
-const { DateTime } = require('luxon');
-
-const { dispatch, link, initAndUpdate } = require('../../lib/redux');
-const { Actions } = require('../../store');
-
-const { cursorTimeSelector, tsCursorPointsSelector } = require('./cursor');
-const { classesForPoint, MASK_DESC } = require('./drawingData');
-const { layoutSelector } = require('./layout');
-const { xScaleSelector, yScaleSelector } = require('./scales');
-const { tsTimeZoneSelector } = require('./timeSeries');
-
-const { getCurrentVariable } = require('../../selectors/timeSeriesSelector');
-
-const { USWDS_SMALL_SCREEN, USWDS_MEDIUM_SCREEN } = require('../../config');
-const { mediaQuery } = require('../../utils');
+import { mouse, select } from 'd3-selection';
+import { transition } from 'd3-transition';
+import memoize from 'fast-memoize';
+import { createSelector, createStructuredSelector } from 'reselect';
+import { DateTime } from 'luxon';
+import { dispatch, link, initAndUpdate } from '../../lib/redux';
+import { Actions } from '../../store';
+import { cursorTimeSelector, tsCursorPointsSelector } from './cursor';
+import { classesForPoint, MASK_DESC } from './drawingData';
+import { layoutSelector } from './layout';
+import { xScaleSelector, yScaleSelector } from './scales';
+import { tsTimeZoneSelector } from './timeSeries';
+import { getCurrentVariable } from '../../selectors/timeSeriesSelector';
+import config from '../../config';
+import { mediaQuery } from '../../utils';
 
 
 const createFocusLine = function(elem) {
@@ -56,7 +52,7 @@ const updateFocusLine = function(elem, {cursorTime, yScale, xScale}) {
  * @param String} tsKey - Time series key
  * @return {Object}
  */
-const tooltipPointsSelector = memoize(tsKey => createSelector(
+export const tooltipPointsSelector = memoize(tsKey => createSelector(
     xScaleSelector(tsKey),
     yScaleSelector,
     tsCursorPointsSelector(tsKey),
@@ -144,7 +140,7 @@ const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qu
     const adjustTooltipFontSize = function() {
         const totalTooltipsShowing = Object.values(currentPoints).length + Object.values(comparePoints).length;
         let tooltipFontSize = 0;
-        if (mediaQuery(USWDS_MEDIUM_SCREEN)) {
+        if (mediaQuery(config.USWDS_MEDIUM_SCREEN)) {
             if (totalTooltipsShowing <= 2) {
                 tooltipFontSize = 2;
             } else if (totalTooltipsShowing <= 4) {
@@ -152,7 +148,7 @@ const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qu
             } else {
                tooltipFontSize = 1.25;
             }
-        } else if (mediaQuery(USWDS_SMALL_SCREEN)) {
+        } else if (mediaQuery(config.USWDS_SMALL_SCREEN)) {
             if (totalTooltipsShowing <= 2) {
                 tooltipFontSize = 1.75;
             } else if (totalTooltipsShowing <= 4) {
@@ -191,7 +187,7 @@ const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qu
  * Append a group containing the tooltip text elements to elem
  * @param {Object} elem - D3 selector
  */
-const createTooltipText = function (elem) {
+export const createTooltipText = function (elem) {
     elem.call(link(createTooltipTextGroup, createStructuredSelector({
         currentPoints: tsCursorPointsSelector('current'),
         comparePoints: tsCursorPointsSelector('compare'),
@@ -243,7 +239,7 @@ const createFocusCircles = function (elem, tooltipPoints, circleContainer) {
  * @param {Array} compareTsData - compare time series points
  * @param {Boolean} isCompareVisible
  */
-const createTooltipFocus = function(elem) {
+export const createTooltipFocus = function(elem) {
     elem.call(link(initAndUpdate(createFocusLine, updateFocusLine), createStructuredSelector({
         xScale: xScaleSelector('current'),
         yScale: yScaleSelector,
@@ -284,5 +280,3 @@ const createTooltipFocus = function(elem) {
         layout: layoutSelector
     })));
 };
-
-module.exports = {createTooltipFocus, createTooltipText, tooltipPointsSelector};
diff --git a/assets/src/scripts/components/hydrograph/tooltip.spec.js b/assets/src/scripts/components/hydrograph/tooltip.spec.js
index c6aecac56a73e79b8895a1510503cac91009cd26..ca30f0998b82523fed4901088e3087448d8ae2c3 100644
--- a/assets/src/scripts/components/hydrograph/tooltip.spec.js
+++ b/assets/src/scripts/components/hydrograph/tooltip.spec.js
@@ -1,10 +1,10 @@
 
-const { select } = require('d3-selection');
-const proxyquire = require('proxyquireify')(require);
-
-const { provide } = require('../../lib/redux');
-const { Actions, configureStore } = require('../../store');
-const { createTooltipText, createTooltipFocus } = require('./tooltip');
+import { select } from 'd3-selection';
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
+import { provide } from '../../lib/redux';
+import { Actions, configureStore } from '../../store';
+import { createTooltipText, createTooltipFocus } from './tooltip';
 
 
 describe('Hydrograph tooltip module', () => {
diff --git a/assets/src/scripts/components/map/floodSlider.js b/assets/src/scripts/components/map/floodSlider.js
index bd6f3da9ab61eca82a5cc5a2e61e57701248b10e..6851f6a83b968fb5d8e0cc6c37d2b0b44c8a2a1a 100644
--- a/assets/src/scripts/components/map/floodSlider.js
+++ b/assets/src/scripts/components/map/floodSlider.js
@@ -1,10 +1,8 @@
-const { createStructuredSelector } = require('reselect');
-
-const { dispatch, link } = require('../../lib/redux');
-const { getFloodStages, getFloodStageHeight, getFloodGageHeightStageIndex,
-    hasFloodData} = require('../../selectors/floodDataSelector');
-const { Actions } = require('../../store');
-const { appendTooltip } = require('../../tooltips');
+import { createStructuredSelector } from 'reselect';
+import { dispatch, link } from '../../lib/redux';
+import { getFloodStages, getFloodStageHeight, getFloodGageHeightStageIndex, hasFloodData } from '../../selectors/floodDataSelector';
+import { Actions } from '../../store';
+import { appendTooltip } from '../../tooltips';
 
 
 
diff --git a/assets/src/scripts/components/map/floodSlider.spec.js b/assets/src/scripts/components/map/floodSlider.spec.js
index b56a46cf953a022a09b63021524df430a985fdaa..3f99a47cf82fca1fc84e30a3fbf3a69762de19ce 100644
--- a/assets/src/scripts/components/map/floodSlider.spec.js
+++ b/assets/src/scripts/components/map/floodSlider.spec.js
@@ -1,10 +1,8 @@
-const { select } = require('d3-selection');
-
-const { provide } = require('../../lib/redux');
-const { hasFloodDataSelector } = require('../../selectors/floodDataSelector');
-const { configureStore } = require('../../store');
-
-const { floodSlider } = require('./floodSlider');
+import { select } from 'd3-selection';
+import { provide } from '../../lib/redux';
+import { hasFloodDataSelector } from '../../selectors/floodDataSelector';
+import { configureStore } from '../../store';
+import { floodSlider } from './floodSlider';
 
 
 describe('floodSlider', () => {
diff --git a/assets/src/scripts/components/map/index.js b/assets/src/scripts/components/map/index.js
index 03d64b96fd4b4f2043599ce9f57645631c11e517..61021afcb87c3effa05975eaee330d02696458e3 100644
--- a/assets/src/scripts/components/map/index.js
+++ b/assets/src/scripts/components/map/index.js
@@ -1,18 +1,14 @@
-const { select } = require('d3-selection');
-const { createStructuredSelector } = require('reselect');
-
-const { map: createMap, marker: createMarker } = require('leaflet');
-const { BasemapLayer, TiledMapLayer, dynamicMapLayer, Util } = require('esri-leaflet');
-
-const { link, provide } = require('../../lib/redux');
-
-const { FIM_ENDPOINT, HYDRO_ENDPOINT } = require('../../config');
-const { FLOOD_EXTENTS_ENDPOINT, FLOOD_BREACH_ENDPOINT, FLOOD_LEVEE_ENDPOINT } = require('../../floodData');
-const { hasFloodData, getFloodExtent, getFloodStageHeight } = require('../../selectors/floodDataSelector');
-const { Actions } = require('../../store');
-
-const { floodSlider } = require('./floodSlider');
-const { createLegendControl, createFIMLegend } = require('./legend');
+import { select } from 'd3-selection';
+import { createStructuredSelector } from 'reselect';
+import { map as createMap, marker as createMarker } from 'leaflet';
+import { BasemapLayer, TiledMapLayer, dynamicMapLayer, Util } from 'esri-leaflet';
+import { link, provide } from '../../lib/redux';
+import config from '../../config';
+import { FLOOD_EXTENTS_ENDPOINT, FLOOD_BREACH_ENDPOINT, FLOOD_LEVEE_ENDPOINT } from '../../floodData';
+import { hasFloodData, getFloodExtent, getFloodStageHeight } from '../../selectors/floodDataSelector';
+import { Actions } from '../../store';
+import { floodSlider } from './floodSlider';
+import { createLegendControl, createFIMLegend } from './legend';
 
 
 const getLayerDefs = function(layerNo, siteno, stage) {
@@ -108,7 +104,7 @@ const siteMap = function(node, {siteno, latitude, longitude, zoom}) {
         if (hasFloodData) {
             node.append('a')
                 .attr('id', 'fim-link')
-                .attr('href', `${FIM_ENDPOINT}?site_no=${siteno}`)
+                .attr('href', `${config.FIM_ENDPOINT}?site_no=${siteno}`)
                 .attr('target', '_blank')
                 .attr('rel', 'noopener')
                 .text('Provisional Flood Information');
@@ -121,8 +117,8 @@ const siteMap = function(node, {siteno, latitude, longitude, zoom}) {
     map.addLayer(new BasemapLayer('Gray'));
 
     // Add the ESRI World Hydro Reference Overlay
-    if (HYDRO_ENDPOINT) {
-        map.addLayer(new TiledMapLayer({url: HYDRO_ENDPOINT}));
+    if (config.HYDRO_ENDPOINT) {
+        map.addLayer(new TiledMapLayer({url: config.HYDRO_ENDPOINT}));
     }
 
     // Add a marker at the site location
diff --git a/assets/src/scripts/components/map/index.spec.js b/assets/src/scripts/components/map/index.spec.js
index 139657b21d62efd05c8c94aac7c3c4764fba92fe..c8700b1076da27d3de8f64be6ca44bf3c93dc578 100644
--- a/assets/src/scripts/components/map/index.spec.js
+++ b/assets/src/scripts/components/map/index.spec.js
@@ -1,8 +1,8 @@
-const { select } = require('d3-selection');
-const proxyquire = require('proxyquireify')(require);
-
-const { attachToNode } = require('./index');
-const { configureStore } = require('../../store');
+import { select } from 'd3-selection';
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
+import { attachToNode } from './index';
+import { configureStore } from '../../store';
 
 describe('map module', () => {
     let mapNode;
diff --git a/assets/src/scripts/components/map/legend.js b/assets/src/scripts/components/map/legend.js
index 3c9cfa9044ec5cd78419df0107dbf51b3bfe897d..d32173a2e240b152b517d0c23bd2e2baf44d7295 100644
--- a/assets/src/scripts/components/map/legend.js
+++ b/assets/src/scripts/components/map/legend.js
@@ -1,16 +1,16 @@
 // Creates a Leaflet legend control. If the legend contains FIM information than the expand/collapse control
 // will be visible
 
-const { select } = require('d3-selection');
-const { control: createControl, DomUtil, DomEvent } = require('leaflet');
+import { select } from 'd3-selection';
 
-const { get } = require('../../ajax');
-const { FIM_GIS_ENDPOINT, STATIC_URL, USWDS_MEDIUM_SCREEN } = require('../../config');
-const { mediaQuery } = require('../../utils');
+import { control as createControl, DomUtil, DomEvent } from 'leaflet';
+import { get } from '../../ajax';
+import config from '../../config';
+import { mediaQuery } from '../../utils';
 
 
 const fetchLayerLegend = function(layer, defaultName) {
-    return get(`${FIM_GIS_ENDPOINT}${layer}/MapServer/legend?f=json`)
+    return get(`${config.FIM_GIS_ENDPOINT}${layer}/MapServer/legend?f=json`)
         .then((responseText) => {
             const resp = JSON.parse(responseText);
             if (resp.error) {
@@ -56,7 +56,7 @@ export const createLegendControl = function(options) {
         let legendListContainer = DomUtil.create('div', 'legend-list-container', container);
         let legendList = DomUtil.create('ul', 'usa-unstyled-list', legendListContainer);
         legendList.id = 'site-legend-list';
-        legendList.innerHTML = `<li><img src="${STATIC_URL}/images/marker-icon.png" alt="Map marker"/><span>Monitoring Location</span> </li>`;
+        legendList.innerHTML = `<li><img src="${config.STATIC_URL}/images/marker-icon.png" alt="Map marker"/><span>Monitoring Location</span> </li>`;
 
         // Set up click handler for the expandButton
         DomEvent.on(expandButton, 'click', function() {
@@ -95,7 +95,7 @@ export const createFIMLegend = function(legendControl, isFIMAvailable) {
 
         // Set legend to be compressed if on medium or small device, otherwise show.
         let button = legendContainer.select('.legend-expand');
-        if (mediaQuery(USWDS_MEDIUM_SCREEN)) {
+        if (mediaQuery(config.USWDS_MEDIUM_SCREEN)) {
             if (button.attr('title') === 'Show legend') {
                 button.dispatch('click');
             }
diff --git a/assets/src/scripts/components/map/legend.spec.js b/assets/src/scripts/components/map/legend.spec.js
index 187c17999e513f31f34ec67d81f54fd022a7839b..3d8e59f0863da3618f4432fe4a744aad5faed861 100644
--- a/assets/src/scripts/components/map/legend.spec.js
+++ b/assets/src/scripts/components/map/legend.spec.js
@@ -1,7 +1,7 @@
-const proxyquire = require('proxyquireify')(require);
-
-const { select } = require('d3-selection');
-const { map: createMap } = require('leaflet');
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
+import { select } from 'd3-selection';
+import { map as createMap } from 'leaflet';
 
 
 describe('component/map/legend module', () => {
diff --git a/assets/src/scripts/config.js b/assets/src/scripts/config.js
index 7180534dbda82c46cd2692440baba0d2b0f5e940..61f2bca55bd4a1ba8f4e6ab296bf34772a281b3c 100644
--- a/assets/src/scripts/config.js
+++ b/assets/src/scripts/config.js
@@ -1,8 +1,8 @@
 /**
  * Export runtime configuration settings stored in the global CONFIG variable.
  */
-module.exports = {
-    ...window.CONFIG || {},
+export default {
+    ...(window.CONFIG || {}),
 
     // These are the screen size breakpoints in the USWDS style sheet
     USWDS_SMALL_SCREEN: 481,
diff --git a/assets/src/scripts/floodData.js b/assets/src/scripts/floodData.js
index 89a9c226003454d1c0a35bedc046132461305425..6f536d2f1f51436a95f06c68af220944880b9f18 100644
--- a/assets/src/scripts/floodData.js
+++ b/assets/src/scripts/floodData.js
@@ -1,17 +1,17 @@
-const {get} = require('./ajax');
-const {FIM_GIS_ENDPOINT} = require('./config');
+import { get } from './ajax';
+import config from './config';
 
 
-const FLOOD_EXTENTS_ENDPOINT = `${FIM_GIS_ENDPOINT}floodExtents/MapServer/`;
-const FLOOD_BREACH_ENDPOINT = `${FIM_GIS_ENDPOINT}breach/MapServer/`;
-const FLOOD_LEVEE_ENDPOINT = `${FIM_GIS_ENDPOINT}suppLyrs/MapServer/`;
+export const FLOOD_EXTENTS_ENDPOINT = `${config.FIM_GIS_ENDPOINT}floodExtents/MapServer/`;
+export const FLOOD_BREACH_ENDPOINT = `${config.FIM_GIS_ENDPOINT}breach/MapServer/`;
+export const FLOOD_LEVEE_ENDPOINT = `${config.FIM_GIS_ENDPOINT}suppLyrs/MapServer/`;
 
 /*
  * Retrieve flood features if any for siteno
  * @param {String} siteno
  * @return {Promise} resolves to an array of features for the site
  */
-const fetchFloodFeatures = function(siteno) {
+export const fetchFloodFeatures = function(siteno) {
     const FIM_QUERY = `${FLOOD_EXTENTS_ENDPOINT}/0/query?where=USGSID+%3D+%27${siteno}%27&outFields=USGSID%2C+STAGE&returnGeometry=false&returnTrueCurves=false&returnIdsOnly=false&returnCountOnly=false&returnZ=false&returnM=falsereturnDistinctValues=false&f=json`;
 
     return get(FIM_QUERY)
@@ -30,7 +30,7 @@ const fetchFloodFeatures = function(siteno) {
  * @param {String} siteno
  * @return {Promise} resolves to the extent Object or the empty object if an errors
  */
-const fetchFloodExtent = function(siteno){
+export const fetchFloodExtent = function(siteno){
     const FIM_QUERY = `${FLOOD_EXTENTS_ENDPOINT}/0/query?where=USGSID+%3D+%27${siteno}%27&returnExtentOnly=true&outSR=4326&f=json`;
     return get(FIM_QUERY)
         .then((response) => {
@@ -41,8 +41,3 @@ const fetchFloodExtent = function(siteno){
             return {};
         });
 };
-
-
-module.exports = {
-    FLOOD_EXTENTS_ENDPOINT, FLOOD_BREACH_ENDPOINT, FLOOD_LEVEE_ENDPOINT, fetchFloodFeatures, fetchFloodExtent
-};
diff --git a/assets/src/scripts/floodData.spec.js b/assets/src/scripts/floodData.spec.js
index 0eb4d4d0cfed5b63825b3f32313921a4ca558019..d9b3a845e13cb5fba4f67858d87f4de75b0d045b 100644
--- a/assets/src/scripts/floodData.spec.js
+++ b/assets/src/scripts/floodData.spec.js
@@ -1,4 +1,5 @@
-const proxyquire = require('proxyquireify')(require);
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
 
 describe('flood_data module', () => {
 
diff --git a/assets/src/scripts/helpers.spec.js b/assets/src/scripts/helpers.spec.js
index f3137b399971401ac1908c633d8853c9e50eea09..146cf347992e153e57722fef13a55281ce92795c 100644
--- a/assets/src/scripts/helpers.spec.js
+++ b/assets/src/scripts/helpers.spec.js
@@ -1,6 +1,5 @@
-const { select } = require('d3-selection');
-
-const { registerTooltips, unregisterTooltips } = require('./helpers');
+import { select } from 'd3-selection';
+import { registerTooltips, unregisterTooltips } from './helpers';
 
 
 /**
diff --git a/assets/src/scripts/index.js b/assets/src/scripts/index.js
index d141ac62085cb30226d9c1f2ae464c0cf9df6ca3..70f2432f7a1b40e91d67ede1cdbb73f54b9784b8 100644
--- a/assets/src/scripts/index.js
+++ b/assets/src/scripts/index.js
@@ -1,19 +1,24 @@
-require('babel-polyfill');
-require('matchmedia-polyfill');
+import 'babel-polyfill';
+import 'matchmedia-polyfill';
 
 // Initialize the 18F Web design standards
-require('uswds');
+import 'uswds';
 
 // Load misc Javascript helpers for general page interactivity.
-require('./helpers').register();
+import { register as registerHelpers } from './helpers';
+registerHelpers();
 
-const { configureStore } = require('./store');
+import { configureStore } from './store';
+
+import { attachToNode as EmbedComponent } from './components/embed';
+import { attachToNode as HydrographComponent } from './components/hydrograph';
+import { attachToNode as MapComponent } from './components/map';
 
 
 const COMPONENTS = {
-    embed: require('./components/embed').attachToNode,
-    hydrograph: require('./components/hydrograph').attachToNode,
-    map: require('./components/map').attachToNode
+    embed: EmbedComponent,
+    hydrograph: HydrographComponent,
+    map: MapComponent
 };
 
 
diff --git a/assets/src/scripts/layout.js b/assets/src/scripts/layout.js
index 18d602f3d1f33bcbcc85a4b37e4e22a441a81785..ef7dfb51f444a9e92708e4ae2d7c0fe4fbf35f20 100644
--- a/assets/src/scripts/layout.js
+++ b/assets/src/scripts/layout.js
@@ -1,4 +1,4 @@
-const { local } = require('d3-selection');
+import { local } from 'd3-selection';
 
 const layoutLocal = local();
 
@@ -19,7 +19,7 @@ const layoutLocal = local();
  * @param  {Function} layoutFunction
  * @return {Function}
  */
-export function layout(layoutFunction) {
+export const layout = function (layoutFunction) {
     return function (selection) {
         selection.each(function () {
             layoutLocal.set(this, {
@@ -28,7 +28,7 @@ export function layout(layoutFunction) {
             });
         });
     };
-}
+};
 
 
 /**
diff --git a/assets/src/scripts/layout.spec.js b/assets/src/scripts/layout.spec.js
index d14c126e0536fcf95f24fb775ff263d711813a96..cd187d9dd2685f6c433c031d01c7316ed20a94e8 100644
--- a/assets/src/scripts/layout.spec.js
+++ b/assets/src/scripts/layout.spec.js
@@ -1,6 +1,5 @@
-const { select } = require('d3-selection');
-
-const { layout, invalidate } = require('./layout');
+import { select } from 'd3-selection';
+import { layout, invalidate } from './layout';
 
 
 describe('layout', () => {
diff --git a/assets/src/scripts/lib/redux.js b/assets/src/scripts/lib/redux.js
index e5a610f1d298681ede4f1c7445c8667a4b5591a1..f436e00bcce5eeb9cacbf5dc5da17520470da5e2 100644
--- a/assets/src/scripts/lib/redux.js
+++ b/assets/src/scripts/lib/redux.js
@@ -1,12 +1,12 @@
 // This code is derived from d3-redux: https://github.com/couchand/d3-redux
 // Copyright (c) 2017 Andrew Couch, MIT licensed.
 
-const { local } = require('d3-selection');
+import { local } from 'd3-selection';
 
 const storeLocal = local();
 
 
-export function subscribe(store, callback, args) {
+export const subscribe = function (store, callback, args) {
     let currentState = store.getState();
 
     function handleUpdate() {
@@ -19,10 +19,9 @@ export function subscribe(store, callback, args) {
     }
 
     store.subscribe(handleUpdate);
-}
+};
 
-
-export function connect(callback) {
+export const connect = function (callback) {
     return function(selection) {
         let args = [selection].concat([].slice.call(arguments, 1));
 
@@ -37,10 +36,9 @@ export function connect(callback) {
             callback.apply(null, args.concat([stores[i].getState()]));
         }
     };
-}
-
+};
 
-export function dispatch(handler) {
+export const dispatch = function (handler) {
     return function (d, i, g) {
         let action = handler.call(this, d, i, g);
         if (action) {
@@ -48,23 +46,20 @@ export function dispatch(handler) {
             store.dispatch(action);
         }
     };
-}
-
+};
 
-export function fromState(selector) {
+export const fromState = function (selector) {
     return function () {
         let store = storeLocal.get(this);
         return selector.call(this, store.getState(), ...arguments);
     };
-}
+};
 
-
-export function provide(store) {
+export const provide = function (store) {
     return function (selection) {
         selection.property(storeLocal, store);
     };
-}
-
+};
 
 /**
  * Calls the provided D3 callback with provided state when updated.
@@ -72,7 +67,7 @@ export function provide(store) {
  * @param  {Object} selector Source selector for options
  * @return {Function}        D3 callback
  */
-export function link(func, selector) {
+export const link = function (func, selector) {
     let currentOptions = null;
     let context = null;
     return connect(function (selection, state) {
@@ -83,8 +78,7 @@ export function link(func, selector) {
         }
         return context;
     });
-}
-
+};
 
 /**
  * Calls the provided D3 callbacks, calling an initialization function and
@@ -92,7 +86,7 @@ export function link(func, selector) {
  * @param  {Function} initFunc (elem, options) => D3 selection
  * @param  {Function} updateFunc (elem, options)
  */
-export function initAndUpdate(initFunc, updateFunc) {
+export const initAndUpdate = function (initFunc, updateFunc) {
     let node = null;
     return function (elem, options) {
         if (node === null) {
@@ -100,4 +94,4 @@ export function initAndUpdate(initFunc, updateFunc) {
         }
         updateFunc(node, options);
     };
-}
+};
diff --git a/assets/src/scripts/lib/symlog.js b/assets/src/scripts/lib/symlog.js
index a9310f911830c124ffc98112fada17bf9f7e8fb5..072bc3e97c2999c582a289b795cf39b011376815 100644
--- a/assets/src/scripts/lib/symlog.js
+++ b/assets/src/scripts/lib/symlog.js
@@ -1,5 +1,5 @@
-const { default: compound } = require('./compound');
-const { scaleLinear: linear, scaleLog: log } = require('d3-scale');
+import { default as compound } from './compound';
+import { scaleLinear as linear, scaleLog as log } from 'd3-scale';
 
 function intersection(r1, r2) {
   var reverse = r1[0] > r1[1];
diff --git a/assets/src/scripts/models.js b/assets/src/scripts/models.js
index bf0f3cea432ece5e9d3acb3e35412c8a059640e4..0d5ced2cb253bae3cbfe1bea84503264054e9fc4 100644
--- a/assets/src/scripts/models.js
+++ b/assets/src/scripts/models.js
@@ -1,7 +1,6 @@
-const { utcFormat } = require('d3-time-format');
-
-const config = require('./config');
-const { get } = require('./ajax');
+import { utcFormat } from 'd3-time-format';
+import config from './config';
+import { get } from './ajax';
 
 
 // Define Water Services root URL - use global variable if defined, otherwise
@@ -34,7 +33,7 @@ function tsServiceRoot(date) {
  * @param {Date} endData
  * @return {Promise} resolves to an array of time series model object, rejects to an error
  */
-export function getTimeSeries({sites, params=null, startDate=null, endDate=null}) {
+export const getTimeSeries = function ({sites, params=null, startDate=null, endDate=null}) {
     let timeParams;
     let serviceRoot;
     if (!startDate && !endDate) {
@@ -55,19 +54,18 @@ export function getTimeSeries({sites, params=null, startDate=null, endDate=null}
             console.error(reason);
             return [];
         });
-}
+};
 
-export function getPreviousYearTimeSeries({site, startTime, endTime}) {
+export const getPreviousYearTimeSeries = function ({site, startTime, endTime}) {
     let lastYearStartTime = new Date(startTime);
     let lastYearEndTime = new Date(endTime);
 
     lastYearStartTime.setFullYear(lastYearStartTime.getFullYear() - 1);
     lastYearEndTime.setFullYear(lastYearEndTime.getFullYear() - 1);
     return getTimeSeries({sites: [site], startDate: lastYearStartTime, endDate: lastYearEndTime});
-}
-
+};
 
-export function sortedParameters(variables) {
+export const sortedParameters = function (variables) {
     const dataVars = variables ? Object.values(variables) : [];
     const pertinentParmCds = Object.keys(PARAM_PERTINENCE);
     const highPertinenceVars = dataVars.filter(x => pertinentParmCds.includes(x.variableCode.value))
@@ -91,10 +89,9 @@ export function sortedParameters(variables) {
             }
         });
     return highPertinenceVars.concat(lowPertinenceVars);
-}
-
+};
 
-export function queryWeatherService(latitude, longitude) {
+export const queryWeatherService = function (latitude, longitude) {
     const url = `${WEATHER_SERVICE_ROOT}/points/${latitude},${longitude}`;
     return get(url)
         .then(response => JSON.parse(response))
@@ -102,4 +99,4 @@ export function queryWeatherService(latitude, longitude) {
             console.error(reason);
             return {properties: {}};
         });
-}
+};
diff --git a/assets/src/scripts/models.spec.js b/assets/src/scripts/models.spec.js
index 7c6109c68ea62c712430a94704c8e508e84a76ea..baa0db34adbd60462c12e8935b1bbe636e106be4 100644
--- a/assets/src/scripts/models.spec.js
+++ b/assets/src/scripts/models.spec.js
@@ -1,6 +1,6 @@
-let proxyquire = require('proxyquireify')(require);
-
-const { sortedParameters } = require('./models');
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
+import { sortedParameters } from './models';
 
 
 describe('Models module', () => {
diff --git a/assets/src/scripts/schema.js b/assets/src/scripts/schema.js
index db2b42552194fe59917de2fec673871f11b904a0..1e215085c8e4b02bf7f8d6176fcddf884d158fbe 100644
--- a/assets/src/scripts/schema.js
+++ b/assets/src/scripts/schema.js
@@ -1,7 +1,6 @@
-const memoize = require('fast-memoize');
-const { normalize: normalizr, schema } = require('normalizr');
-
-const { replaceHtmlEntities } = require('./utils');
+import memoize from 'fast-memoize';
+import { normalize as normalizr, schema } from 'normalizr';
+import { replaceHtmlEntities } from './utils';
 
 
 // sourceInfo schema
@@ -161,9 +160,6 @@ const request = memoize(tsKey => new schema.Entity('requests', {
  * @param  {String} tsKey  Time series key. eg, "current"
  * @return {Object}        Normalized entities
  */
-const normalize = function (ivData, tsKey) {
+export const normalize = function (ivData, tsKey) {
     return normalizr(ivData, request(tsKey)).entities;
 };
-
-
-module.exports = {normalize};
diff --git a/assets/src/scripts/schema.spec.js b/assets/src/scripts/schema.spec.js
index b4732159fea2918feb44d353b8fcc7211da7a810..a44eedfda31786478c82cf23537557aa0f7f67a3 100644
--- a/assets/src/scripts/schema.spec.js
+++ b/assets/src/scripts/schema.spec.js
@@ -1,4 +1,4 @@
-const { normalize } = require('./schema');
+import { normalize } from './schema';
 
 
 describe('Normalizr schema', () => {
diff --git a/assets/src/scripts/selectors/floodDataSelector.js b/assets/src/scripts/selectors/floodDataSelector.js
index e119edeb3d0c76263f5d2a0789b9d3f6667b5576..967e112e7bbc1a3fa752c0f9777d9622647a6bbf 100644
--- a/assets/src/scripts/selectors/floodDataSelector.js
+++ b/assets/src/scripts/selectors/floodDataSelector.js
@@ -1,4 +1,4 @@
-const { createSelector } = require('reselect');
+import { createSelector } from 'reselect';
 
 
 export const getFloodStages = state => state.floodData.stages;
diff --git a/assets/src/scripts/selectors/floodDataSelector.spec.js b/assets/src/scripts/selectors/floodDataSelector.spec.js
index de96f22287cef47023724cf511f154d9765c9a65..e204b27eb811f7e945fe6336eaeb84236aaad809 100644
--- a/assets/src/scripts/selectors/floodDataSelector.spec.js
+++ b/assets/src/scripts/selectors/floodDataSelector.spec.js
@@ -1,4 +1,4 @@
-const { getFloodStageHeight, hasFloodData, getFloodGageHeightStageIndex} = require('./floodDataSelector');
+import { getFloodStageHeight, hasFloodData, getFloodGageHeightStageIndex } from './floodDataSelector';
 
 describe('floodDataSelector', () => {
 
diff --git a/assets/src/scripts/selectors/medianStatisticsSelector.js b/assets/src/scripts/selectors/medianStatisticsSelector.js
index f6e50d2a445103edbf32a854bc59f7ba1e86f933..ec1716a2556726c1b177ea5fefa4a4bba79405ad 100644
--- a/assets/src/scripts/selectors/medianStatisticsSelector.js
+++ b/assets/src/scripts/selectors/medianStatisticsSelector.js
@@ -1,9 +1,8 @@
 
-const memoize = require('fast-memoize');
-const reduce = require('lodash/reduce');
-const { createSelector } = require('reselect');
-
-const { getCurrentParmCd } = require('./timeSeriesSelector');
+import memoize from 'fast-memoize';
+import reduce from 'lodash/reduce';
+import { createSelector } from 'reselect';
+import { getCurrentParmCd } from './timeSeriesSelector';
 
 /*
  * Selectors that return properties from the state
diff --git a/assets/src/scripts/selectors/medianStatisticsSelector.spec.js b/assets/src/scripts/selectors/medianStatisticsSelector.spec.js
index 00bb1ab919b81bcfd3ea6fe90894d94761817206..3114fc13ef07b69ad76d7e0b6aa9761f91b9b1f7 100644
--- a/assets/src/scripts/selectors/medianStatisticsSelector.spec.js
+++ b/assets/src/scripts/selectors/medianStatisticsSelector.spec.js
@@ -1,5 +1,4 @@
-const { getMedianStatistics, getMedianStatisticsByParmCd, getCurrentVariableMedianStatistics,
-    getCurrentVariableMedianMetadata} = require('./medianStatisticsSelector');
+import { getMedianStatistics, getMedianStatisticsByParmCd, getCurrentVariableMedianStatistics, getCurrentVariableMedianMetadata } from './medianStatisticsSelector';
 
 describe('medianStatisticsSelector', () => {
     const TEST_VARS = {
diff --git a/assets/src/scripts/selectors/timeSeriesSelector.js b/assets/src/scripts/selectors/timeSeriesSelector.js
index 52303cf52aa2cfe58fc03d7deb4227b90877411b..9e43c8df5e0453c0b9cd268b7d154f16c876d522 100644
--- a/assets/src/scripts/selectors/timeSeriesSelector.js
+++ b/assets/src/scripts/selectors/timeSeriesSelector.js
@@ -1,5 +1,5 @@
-const memoize = require('fast-memoize');
-const { createSelector } = require('reselect');
+import memoize from 'fast-memoize';
+import { createSelector } from 'reselect';
 
 /*
  * Selectors that return properties from the state
diff --git a/assets/src/scripts/selectors/timeSeriesSelector.spec.js b/assets/src/scripts/selectors/timeSeriesSelector.spec.js
index 513533f4c1a5176afe0229e776ef4592bc9fce2e..33ed0b12b68ecbbccb69a85b57af6606cdaa811e 100644
--- a/assets/src/scripts/selectors/timeSeriesSelector.spec.js
+++ b/assets/src/scripts/selectors/timeSeriesSelector.spec.js
@@ -1,6 +1,4 @@
-const { getVariables, getCurrentVariableID, getCurrentDateRange, getCurrentVariable, getQueryInfo, getRequests,
-    getCurrentParmCd, hasTimeSeries, getTsRequestKey, getTsQueryInfo, getRequestTimeRange, isLoadingTS, getTSRequest,
-    getTimeSeriesCollectionIds, getIanaTimeZone, getNwisTimeZone} = require('./timeSeriesSelector');
+import { getVariables, getCurrentVariableID, getCurrentDateRange, getCurrentVariable, getQueryInfo, getRequests, getCurrentParmCd, hasTimeSeries, getTsRequestKey, getTsQueryInfo, getRequestTimeRange, isLoadingTS, getTSRequest, getTimeSeriesCollectionIds, getIanaTimeZone, getNwisTimeZone } from './timeSeriesSelector';
 
 describe('timeSeriesSelector', () => {
     const TEST_VARS = {
diff --git a/assets/src/scripts/statisticsData.js b/assets/src/scripts/statisticsData.js
index dc4365d27ca1b7a5b0147cb15775f68653a0a4f8..45af233a0f6711153a95830cd7344678dbd19eb8 100644
--- a/assets/src/scripts/statisticsData.js
+++ b/assets/src/scripts/statisticsData.js
@@ -1,6 +1,6 @@
-const { get } = require('./ajax');
-const config = require('./config');
-const { parseRDB } = require('./utils');
+import { get } from './ajax';
+import config from './config';
+import { parseRDB } from './utils';
 
 
 
diff --git a/assets/src/scripts/statisticsData.spec.js b/assets/src/scripts/statisticsData.spec.js
index 6fdb454c5cb5b6a6159e36311104a8fc2ca723d4..6c48f76fd192c92662a76255841d122e6a0c4f31 100644
--- a/assets/src/scripts/statisticsData.spec.js
+++ b/assets/src/scripts/statisticsData.spec.js
@@ -1,4 +1,5 @@
-let proxyquire = require('proxyquireify')(require);
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
 
 
 describe('statisticsData', () => {
diff --git a/assets/src/scripts/store/floodDataReducer.spec.js b/assets/src/scripts/store/floodDataReducer.spec.js
index c4b14652fdf61c5d20ed7aabd98f5d51af6100b7..8c8ea321f1298cb2373433574daa70a00d24e9a5 100644
--- a/assets/src/scripts/store/floodDataReducer.spec.js
+++ b/assets/src/scripts/store/floodDataReducer.spec.js
@@ -1,4 +1,4 @@
-const { floodDataReducer } = require('./floodDataReducer');
+import { floodDataReducer } from './floodDataReducer';
 
 describe('floodDataReducer', () => {
 
diff --git a/assets/src/scripts/store/floodStateReducer.spec.js b/assets/src/scripts/store/floodStateReducer.spec.js
index 82962b319a94adc101fad0db08c4f7fc842e9acf..b6fd019e4f1cbc022fb448ce61e69cd841208234 100644
--- a/assets/src/scripts/store/floodStateReducer.spec.js
+++ b/assets/src/scripts/store/floodStateReducer.spec.js
@@ -1,4 +1,4 @@
-const { floodStateReducer } = require('./floodStateReducer');
+import { floodStateReducer } from './floodStateReducer';
 
 describe('floodStateReducer', () => {
 
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index 79eac69b632385d254d81ce454f65a1aa7676d79..44301fb3a3c115a05eea4bc5aaec84544d73e6ce 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -1,23 +1,20 @@
 
-const findKey = require('lodash/findKey');
-const last = require('lodash/last');
-const { applyMiddleware, createStore, combineReducers, compose } = require('redux');
-const { default: thunk } = require('redux-thunk');
-
-const { getPreviousYearTimeSeries, getTimeSeries, sortedParameters, queryWeatherService } = require('../models');
-const { calcStartTime } = require('../utils');
-const { normalize } = require('../schema');
-const { fetchFloodFeatures, fetchFloodExtent } = require('../floodData');
-const { fetchSiteStatistics } = require('../statisticsData');
-const { getCurrentParmCd, getCurrentDateRange, hasTimeSeries, getTsRequestKey, getRequestTimeRange
-    } = require('../selectors/timeSeriesSelector');
-
-const { floodDataReducer: floodData } = require('./floodDataReducer');
-const { floodStateReducer: floodState } = require('./floodStateReducer');
-const { seriesReducer: series } = require('./seriesReducer');
-const { statisticsDataReducer: statisticsData } = require('./statisticsDataReducer');
-const { timeSeriesStateReducer: timeSeriesState } = require('./timeSeriesStateReducer');
-const { uiReducer: ui } = require('./uiReducer');
+import findKey from 'lodash/findKey';
+import last from 'lodash/last';
+import { applyMiddleware, createStore, combineReducers, compose } from 'redux';
+import { default as thunk } from 'redux-thunk';
+import { getPreviousYearTimeSeries, getTimeSeries, sortedParameters, queryWeatherService } from '../models';
+import { calcStartTime } from '../utils';
+import { normalize } from '../schema';
+import { fetchFloodFeatures, fetchFloodExtent } from '../floodData';
+import { fetchSiteStatistics } from '../statisticsData';
+import { getCurrentParmCd, getCurrentDateRange, hasTimeSeries, getTsRequestKey, getRequestTimeRange } from '../selectors/timeSeriesSelector';
+import { floodDataReducer as floodData } from './floodDataReducer';
+import { floodStateReducer as floodState } from './floodStateReducer';
+import { seriesReducer as series } from './seriesReducer';
+import { statisticsDataReducer as statisticsData } from './statisticsDataReducer';
+import { timeSeriesStateReducer as timeSeriesState } from './timeSeriesStateReducer';
+import { uiReducer as ui } from './uiReducer';
 
 const GAGE_HEIGHT_CD = '00065';
 /*
diff --git a/assets/src/scripts/store/index.spec.js b/assets/src/scripts/store/index.spec.js
index 93f16e8b6640d1e76f2803dafd6d3b254ea1c1e4..917dab49f163c30c6035bbd5cf3561bc48a97b98 100644
--- a/assets/src/scripts/store/index.spec.js
+++ b/assets/src/scripts/store/index.spec.js
@@ -1,6 +1,6 @@
-let proxyquire = require('proxyquireify')(require);
-
-const { Actions } = require('./index');
+import proxyquireFactory from 'proxyquireify';
+const proxyquire = proxyquireFactory(require);
+import { Actions } from './index';
 
 describe('Redux store', () => {
 
diff --git a/assets/src/scripts/store/seriesReducer.js b/assets/src/scripts/store/seriesReducer.js
index 02729c6e924d38ed8ce72c05be41dcf93a420c02..7c5fcb51c9a2b4c6940add9648e35ed75e5cebe3 100644
--- a/assets/src/scripts/store/seriesReducer.js
+++ b/assets/src/scripts/store/seriesReducer.js
@@ -1,5 +1,5 @@
-const merge = require('lodash/merge');
-const omitBy = require('lodash/omitBy');
+import merge from 'lodash/merge';
+import omitBy from 'lodash/omitBy';
 
 /*
  * Case reducers
diff --git a/assets/src/scripts/store/seriesReducer.spec.js b/assets/src/scripts/store/seriesReducer.spec.js
index a183a107725996a325a65a04a9554c09bf07a52c..4577231c026e4a25be5d54fb88d23ba1e0728dc5 100644
--- a/assets/src/scripts/store/seriesReducer.spec.js
+++ b/assets/src/scripts/store/seriesReducer.spec.js
@@ -1,5 +1,5 @@
 
-const { seriesReducer } = require('./seriesReducer');
+import { seriesReducer } from './seriesReducer';
 
 describe('seriesReducer', () => {
 
diff --git a/assets/src/scripts/store/statisticsDataReducer.js b/assets/src/scripts/store/statisticsDataReducer.js
index 5baef94480f0ae4d5b9a76315b69009432dde7e2..182400677bc30ea946abe8291156c90a22024998 100644
--- a/assets/src/scripts/store/statisticsDataReducer.js
+++ b/assets/src/scripts/store/statisticsDataReducer.js
@@ -1,4 +1,4 @@
-const merge = require('lodash/merge');
+import merge from 'lodash/merge';
 
 const INITIAL_STATE = {
     median: {}
diff --git a/assets/src/scripts/store/timeSeriesStateReducer.spec.js b/assets/src/scripts/store/timeSeriesStateReducer.spec.js
index 0a46a37ae490f8d889d69aac6ebeef68327c728f..228e4b14ccacd3198366ad57d9564f73e14b0f3b 100644
--- a/assets/src/scripts/store/timeSeriesStateReducer.spec.js
+++ b/assets/src/scripts/store/timeSeriesStateReducer.spec.js
@@ -1,5 +1,5 @@
 
-const { timeSeriesStateReducer } = require('./timeSeriesStateReducer');
+import { timeSeriesStateReducer } from './timeSeriesStateReducer';
 
 describe('timeSeriesStateReducer', () => {
 
diff --git a/assets/src/scripts/store/uiReducer.spec.js b/assets/src/scripts/store/uiReducer.spec.js
index ded8de7871fc9e2943f2ddeab519160e192b2c70..3f18c2bcdbc241eed6b6b7d5e0ec40e9ba966213 100644
--- a/assets/src/scripts/store/uiReducer.spec.js
+++ b/assets/src/scripts/store/uiReducer.spec.js
@@ -1,4 +1,4 @@
-const { uiReducer } = require('./uiReducer');
+import { uiReducer } from './uiReducer';
 
 describe('uiReducer', () => {
 
diff --git a/assets/src/scripts/tooltips.spec.js b/assets/src/scripts/tooltips.spec.js
index 804201ebea8ba83d608c8bd3bc8e475e7e0cba1c..e3fadc212dbeea22497e0e4264119dee1123d306 100644
--- a/assets/src/scripts/tooltips.spec.js
+++ b/assets/src/scripts/tooltips.spec.js
@@ -1,6 +1,5 @@
-const { select } = require('d3-selection');
-
-const { appendTooltip } = require('./tooltips');
+import { select } from 'd3-selection';
+import { appendTooltip } from './tooltips';
 
 
 describe('tooltips', () => {
diff --git a/assets/src/scripts/utils.js b/assets/src/scripts/utils.js
index 377fc586a3126eb1b6fd449142b5d709287d5f53..e975fea407811ecf027f2320698ed7983fc66c19 100644
--- a/assets/src/scripts/utils.js
+++ b/assets/src/scripts/utils.js
@@ -1,5 +1,5 @@
-const { select } = require('d3-selection');
-const { DateTime } = require('luxon');
+import { select } from 'd3-selection';
+import { DateTime } from 'luxon';
 
 /**
  * Determine the unicode variant of an HTML decimal entity
@@ -7,14 +7,14 @@ const { DateTime } = require('luxon');
  * @param someString
  * @returns {string}
  */
-export function unicodeHtmlEntity(someString) {
+export const unicodeHtmlEntity = function (someString) {
     let numericValue = parseInt(someString.slice(2, -1), 10);
     if (numericValue) {
         return String.fromCharCode(numericValue);
     } else {
         return '';
     }
-}
+};
 
 /**
  * Determine if a string contains an HTML decimal entity
@@ -22,10 +22,10 @@ export function unicodeHtmlEntity(someString) {
  * @param someString
  * @returns {array} or {null}
  */
-export function getHtmlFromString(someString) {
+export const getHtmlFromString = function (someString) {
     let re = /&(?:[a-z]+|#\d+);/g;
     return someString.match(re);
-}
+};
 
 /**
  * Replace html entities with unicode entities
@@ -33,7 +33,7 @@ export function getHtmlFromString(someString) {
  * @param someString
  * @returns {*}
  */
-export function replaceHtmlEntities(someString) {
+export const replaceHtmlEntities = function (someString) {
     let entities = getHtmlFromString(someString);
     if (entities) {
         for (let entity of entities) {
@@ -42,7 +42,7 @@ export function replaceHtmlEntities(someString) {
         }
     }
     return someString;
-}
+};
 
 /**
  * Calculate the difference in days between two Date objects
@@ -51,7 +51,7 @@ export function replaceHtmlEntities(someString) {
  * @param date2
  * @returns {number}
  */
-export function deltaDays(date1, date2) {
+export const deltaDays = function (date1, date2) {
     let one_day_ms = 24*60*60*1000;
     let date1_ms = date1.getTime();
     let date2_ms = date2.getTime();
@@ -59,7 +59,7 @@ export function deltaDays(date1, date2) {
     let delta_ms = date2_ms - date1_ms;
 
     return Math.round(delta_ms/one_day_ms);
-}
+};
 
 /**
  * Determine if two sets are equal
@@ -68,13 +68,13 @@ export function deltaDays(date1, date2) {
  * @param set2
  * @returns {boolean}
  */
-export function setEquality(set1, set2) {
+export const setEquality = function (set1, set2) {
     let sizeEqual = set1.size === set2.size;
     let itemsEqual = [...set1].every(x => {
         return set2.has(x);
     });
     return sizeEqual && itemsEqual;
-}
+};
 
 
 const TEXT_WRAP_LINE_HEIGHT = 1.1;  // ems
@@ -87,7 +87,7 @@ const TEXT_WRAP_BREAK_CHARS = [];
  * @param  {String} text
  * @param  {Number} width
  */
-export function wrap(text, width, break_chars=TEXT_WRAP_BREAK_CHARS) {
+export const wrap = function (text, width, break_chars=TEXT_WRAP_BREAK_CHARS) {
     text.each(function () {
         const elem = select(this);
 
@@ -141,7 +141,7 @@ export function wrap(text, width, break_chars=TEXT_WRAP_BREAK_CHARS) {
             }
         }
     });
-}
+};
 
 /**
  * This will execute the equivalent media query as the USWDS given a minWidth.
diff --git a/assets/src/scripts/utils.spec.js b/assets/src/scripts/utils.spec.js
index 0fd4b8a398a37e93d20690c28c2bbb17c512fd47..38a8e9021219a615c92f57d0a83a7fdfa7d65f2e 100644
--- a/assets/src/scripts/utils.spec.js
+++ b/assets/src/scripts/utils.spec.js
@@ -1,7 +1,5 @@
-const { select } = require('d3-selection');
-
-const { unicodeHtmlEntity, getHtmlFromString, deltaDays, replaceHtmlEntities, setEquality, wrap, mediaQuery,
-    calcStartTime, callIf, parseRDB } = require('./utils');
+import { select } from 'd3-selection';
+import { unicodeHtmlEntity, getHtmlFromString, deltaDays, replaceHtmlEntities, setEquality, wrap, mediaQuery, calcStartTime, callIf, parseRDB } from './utils';
 
 
 describe('Utils module', () => {