diff --git a/.env.sample b/.env.sample
index 39d1bd4a26..09e0189579 100644
--- a/.env.sample
+++ b/.env.sample
@@ -17,4 +17,5 @@ USER_SURVEY_SPREADSHEET_URL=
 USER_NEWSLETTER_URL=
 REDIS_SERVER=redis://localhost:6379/0
 
-FEATURE_POP_UP=
\ No newline at end of file
+FEATURE_POP_UP=
+FEATURE_NDC_ENHANCEMENTS=
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 2ac4a388d5..67cc00a209 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -28,6 +28,9 @@ ENV ONE_SIGNAL_ID $ONE_SIGNAL_ID
 ARG FEATURE_POP_UP
 ENV FEATURE_POP_UP $FEATURE_POP_UP
 
+ARG FEATURE_NDC_ENHANCEMENTS
+ENV FEATURE_NDC_ENHANCEMENTS $FEATURE_NDC_ENHANCEMENTS
+
 ARG POP_UP
 ENV POP_UP $POP_UP
 
diff --git a/Jenkinsfile b/Jenkinsfile
index dbe8532b6e..f1abd96f20 100755
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -27,7 +27,7 @@ node {
     cw_files_prefix = 'climatewatch.org/www.climatewatch.org/climate-watch/'
     user_report_key = '81f6ea43-5c9f-48e0-bdb2-56fc59aafbb4'
   } else {
-    feature_flags_env = feature_flags_env + ' --build-arg FEATURE_POP_UP=false'
+    feature_flags_env = feature_flags_env + ' --build-arg FEATURE_POP_UP=false --build-arg FEATURE_NDC_ENHANCEMENTS=true'
   }
 
   // env vars with build-arg
diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-legacy-viz.js b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-legacy-viz.js
new file mode 100644
index 0000000000..f0a70081a5
--- /dev/null
+++ b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-legacy-viz.js
@@ -0,0 +1,189 @@
+import { PureComponent, createElement } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types';
+import qs from 'query-string';
+import { handleAnalytics } from 'utils/analytics';
+import { isCountryIncluded } from 'app/utils';
+import { getLocationParamUpdated } from 'utils/navigation';
+import { europeSlug, europeanCountries } from 'app/data/european-countries';
+
+import { actions as fetchActions } from 'pages/ndcs-enhancements';
+import { actions as modalActions } from 'components/modal-metadata';
+
+import Component from './ndcs-enhancements-viz-component';
+
+import {
+  getMapIndicator,
+  getIndicatorsParsed,
+  getPathsWithStyles,
+  getISOCountries,
+  getLinkToDataExplorer,
+  summarizeIndicators,
+  MAP_COLORS
+} from './ndcs-enhancements-viz-selectors';
+
+const actions = { ...fetchActions, ...modalActions };
+
+const mapStateToProps = (state, { location }) => {
+  const { data, loading } = state.ndcsEnhancements;
+  const { countries } = state;
+  const search = qs.parse(location.search);
+  const ndcsEnhancementsWithSelection = {
+    ...data,
+    countries: countries.data,
+    query: search.search,
+    search
+  };
+  return {
+    loading,
+    query: ndcsEnhancementsWithSelection.query,
+    paths: getPathsWithStyles(ndcsEnhancementsWithSelection),
+    countries: countries.data,
+    isoCountries: getISOCountries(ndcsEnhancementsWithSelection),
+    indicator: getMapIndicator(ndcsEnhancementsWithSelection),
+    indicators: getIndicatorsParsed(ndcsEnhancementsWithSelection),
+    summaryData: summarizeIndicators(ndcsEnhancementsWithSelection),
+    downloadLink: getLinkToDataExplorer(ndcsEnhancementsWithSelection),
+    mapColors: MAP_COLORS
+  };
+};
+
+class NDCSEnhancementsVizContainer extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      geometryIdHover: null,
+      country: null
+    };
+  }
+
+  componentWillMount() {
+    this.props.fetchNDCSEnhancements();
+  }
+
+  getTooltipValues() {
+    const { geometryIdHover } = this.state;
+    const { indicator, indicators } = this.props;
+    if (!geometryIdHover || !indicator) return null;
+
+    const isEuropeanCountry = europeanCountries.includes(geometryIdHover);
+    const id = isEuropeanCountry ? europeSlug : geometryIdHover;
+
+    const dateIndicator = indicators.find(i => i.value === 'ndce_date');
+    const statementIndicator = indicators.find(
+      i => i.value === 'ndce_statement'
+    );
+
+    if (
+      indicator.locations &&
+      indicator.locations[id] &&
+      indicator.locations[id].label_slug !== 'no_info_2020'
+    ) {
+      const tooltipValues = {
+        label: this.getTooltipLabel(),
+        value: undefined,
+        statement: undefined,
+        note: 'Learn more in table below'
+      };
+      if (statementIndicator.locations[id]) { tooltipValues.statement = `${statementIndicator.locations[id].value}`; }
+      tooltipValues.value =
+        indicator.locations[id].label_slug === 'submitted_2020'
+          ? `Submitted a 2020 NDC on ${dateIndicator.locations[id].value}.`
+          : `${indicator.locations[id].value}`;
+
+      return tooltipValues;
+    }
+    return null;
+  }
+
+  getTooltipLabel() {
+    const { geometryIdHover } = this.state;
+    const { indicator, countries } = this.props;
+    if (!geometryIdHover || !indicator) return '';
+    if (europeanCountries.includes(geometryIdHover)) {
+      return countries.find(c => c.iso_code3 === 'EUU').wri_standard_name;
+    }
+    const country = countries.find(c => c.iso_code3 === geometryIdHover);
+    return country ? country.wri_standard_name : '';
+  }
+
+  handleSearchChange = query => {
+    this.updateUrlParam({ name: 'search', value: query });
+  };
+
+  handleCountryClick = geography => {
+    // Click action has been disabled for countries on this map per WRI request
+    const { isoCountries } = this.props;
+    const iso = geography.properties && geography.properties.id;
+    if (iso && isCountryIncluded(isoCountries, iso)) {
+      this.props.history.push(`/ndcs/country/${iso}`);
+      handleAnalytics(
+        'NDC Content Map',
+        'Use map to find country',
+        geography.properties.name
+      );
+    }
+  };
+
+  handleCountryEnter = geography => {
+    const iso = geography.properties && geography.properties.id;
+    if (iso) this.setState({ geometryIdHover: iso });
+    this.setState({ country: geography.properties });
+  };
+
+  handleSearchChange = query => {
+    this.updateUrlParam({ name: 'search', value: query });
+  };
+
+  handleInfoClick = () => {
+    this.props.setModalMetadata({
+      customTitle: 'NDC Content',
+      category: 'NDC Content Map',
+      slugs: ['ndc_cw', 'ndc_wb', 'ndc_die'],
+      open: true
+    });
+  };
+
+  updateUrlParam(param, clear) {
+    const { history, location } = this.props;
+    history.replace(getLocationParamUpdated(location, param, clear));
+  }
+
+  render() {
+    const tooltipValues = this.getTooltipValues();
+    const { query } = this.props;
+    const noContentMsg = query
+      ? 'No results found'
+      : 'There is no data for this indicator';
+    return createElement(Component, {
+      ...this.props,
+      tooltipValues,
+      handleCountryClick: this.handleCountryClick,
+      handleCountryEnter: this.handleCountryEnter,
+      handleInfoClick: this.handleInfoClick,
+      noContentMsg,
+      handleSearchChange: this.handleSearchChange,
+      indicator: this.props.indicator,
+      countryData: this.state.country,
+      summaryData: this.props.summaryData
+    });
+  }
+}
+
+NDCSEnhancementsVizContainer.propTypes = {
+  history: PropTypes.object.isRequired,
+  query: PropTypes.string,
+  indicator: PropTypes.object,
+  indicators: PropTypes.array,
+  summaryData: PropTypes.object,
+  location: PropTypes.object.isRequired,
+  isoCountries: PropTypes.array.isRequired,
+  countries: PropTypes.array,
+  setModalMetadata: PropTypes.func.isRequired,
+  fetchNDCSEnhancements: PropTypes.func.isRequired
+};
+
+export default withRouter(
+  connect(mapStateToProps, actions)(NDCSEnhancementsVizContainer)
+);
diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss
new file mode 100644
index 0000000000..6efd0ef5f2
--- /dev/null
+++ b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss
@@ -0,0 +1,15 @@
+@import '~styles/settings.scss';
+
+.tooltipContainer {
+  p {
+    margin-bottom: 1em;
+  }
+}
+
+.tooltipValue {
+  font-weight: $font-weight-bold;
+}
+
+.tooltipNote {
+  font-style: italic;
+}
diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx
new file mode 100644
index 0000000000..713ead637d
--- /dev/null
+++ b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import cx from 'classnames';
+import Icon from 'components/icon';
+import accordionArrow from 'assets/icons/accordion-arrow.svg';
+
+import tooltipTheme from 'styles/themes/map-tooltip/map-tooltip.scss';
+import styles from 'components/ndcs/ndcs-enhancements-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss';
+
+const NDCSEnhancementsTooltip = props => {
+  const { isTablet, tooltipValues, id } = props;
+  return (
+    <ReactTooltip
+      className={cx(tooltipTheme.tooltipContainer, styles.tooltipContainer)}
+      id={id}
+      delayHide={isTablet ? 0 : 3000}
+    >
+      <div className={tooltipTheme.countryName}>{tooltipValues.label}</div>
+      {tooltipValues.value && (
+        <p
+          className={cx(tooltipTheme.text, styles.tooltipValue)}
+          dangerouslySetInnerHTML={{ __html: tooltipValues.value }} // eslint-disable-line
+        />
+      )}
+      {tooltipValues.statement && (
+        <p className={tooltipTheme.text}>{tooltipValues.statement}</p>
+      )}
+      {tooltipValues.note && (
+        <p className={cx(tooltipTheme.text, styles.tooltipNote)}>
+          {tooltipValues.note}
+        </p>
+      )}
+      <Icon icon={accordionArrow} className={tooltipTheme.icon} />
+    </ReactTooltip>
+  );
+};
+
+NDCSEnhancementsTooltip.propTypes = {
+  isTablet: PropTypes.bool,
+  tooltipValues: PropTypes.object,
+  id: PropTypes.string
+};
+
+export default NDCSEnhancementsTooltip;
diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-component.jsx b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-component.jsx
new file mode 100644
index 0000000000..f90d6071ed
--- /dev/null
+++ b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-component.jsx
@@ -0,0 +1,188 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TabletLandscape } from 'components/responsive';
+import Map from 'components/map';
+import MapLegend from 'components/map-legend';
+import ButtonGroup from 'components/button-group';
+import Loading from 'components/loading';
+import Icon from 'components/icon';
+import infoIcon from 'assets/icons/info.svg';
+import ModalMetadata from 'components/modal-metadata';
+import CircularChart from 'components/circular-chart';
+import NDCSEnhancementsTooltip from 'components/ndcs/ndcs-enhancements-viz/ndcs-enhancements-tooltip';
+import ReactTooltip from 'react-tooltip';
+
+import styles from './ndcs-enhancements-viz-styles.scss';
+
+const renderButtonGroup = (clickHandler, downloadLink) => (
+  <div className={styles.containerControls}>
+    <div>
+      <p>
+        <em>
+          Track which countries are updating or enhancing their national climate
+          commitments in 2020 or in the lead up to COP26. To request changes or
+          additions, please contact &nbsp;
+          <a
+            href="mailto:Rhys.Gerholdt@wri.org?subject=2020 NDC Tracker Update"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Rhys Gerholdt
+          </a>
+          .
+        </em>
+      </p>
+    </div>
+    <div>
+      <ButtonGroup
+        className={styles.buttonGroup}
+        buttonsConfig={[
+          {
+            type: 'info',
+            onClick: clickHandler
+          },
+          {
+            type: 'share',
+            shareUrl: '/embed/2020-ndc-tracker',
+            analyticsGraphName: 'Ndcs',
+            positionRight: true
+          },
+          {
+            type: 'download',
+            section: 'ndcs-content',
+            link: downloadLink
+          },
+          {
+            type: 'addToUser'
+          }
+        ]}
+      />
+    </div>
+  </div>
+);
+
+const renderCircular = datum => (
+  <div className={styles.circularChartContainer}>
+    <div>
+      <CircularChart
+        index={0.1}
+        value={Math.round((datum.value / datum.max) * 100 * 10) / 10}
+        color={datum.opts.color}
+      />
+      <div className={styles.circularChartValues}>
+        <div
+          style={{
+            color: datum.opts.color
+          }}
+        >
+          {datum.opts.prefix}
+          {datum.value}
+          {datum.opts.suffix}
+        </div>
+      </div>
+    </div>
+    <div className={styles.circularChartLabels}>
+      <div dangerouslySetInnerHTML={{ __html: datum.opts.label }} />
+    </div>
+  </div>
+);
+
+const TOOLTIP_ID = 'ndcs-map-tooltip';
+
+const NDCSEnhancementsViz = ({
+  loading,
+  indicator,
+  paths,
+  tooltipValues,
+  downloadLink,
+  countryData,
+  summaryData,
+  handleInfoClick,
+  handleCountryEnter,
+  mapColors
+}) => (
+  <div>
+    <TabletLandscape>
+      {isTablet => (
+        <div className={styles.wrapper}>
+          <div className={styles.filtersLayout}>
+            {isTablet && renderButtonGroup(handleInfoClick, downloadLink)}
+          </div>
+
+          <div className={styles.containerUpper}>
+            <div className={styles.containerCharts}>
+              {!loading && summaryData && (
+                <div className={styles.summary}>
+                  <div
+                    data-tip
+                    data-for="covid-update-tooltip"
+                    className={styles.summaryTitle}
+                  >
+                    COVID-19 Update
+                    <Icon icon={infoIcon} className={styles.infoIcon} />
+                  </div>
+                  <ReactTooltip
+                    id="covid-update-tooltip"
+                    className={styles.covidTooltip}
+                  >
+                    Some nations have signaled that the impacts of the
+                    coronavirus pandemic may delay their submission of updated
+                    or enhanced NDCs. While many will submit in 2020 as
+                    scheduled, some have indicated they may do so in 2021 ahead
+                    of COP26. The information below does not reflect these
+                    possible delays.
+                  </ReactTooltip>
+                  {renderCircular(summaryData.enhance_2020.countries)}
+                  {renderCircular(summaryData.submitted_2020.countries)}
+                </div>
+              )}
+            </div>
+            <div className={styles.containerMap}>
+              {loading && <Loading light className={styles.loader} />}
+              {!isTablet && renderButtonGroup(handleInfoClick, downloadLink)}
+              <Map
+                paths={paths}
+                tooltipId={TOOLTIP_ID}
+                onCountryEnter={handleCountryEnter}
+                onCountryFocus={handleCountryEnter}
+                zoomEnable
+                customCenter={!isTablet ? [10, -10] : null}
+              />
+              {countryData && tooltipValues && (
+                <NDCSEnhancementsTooltip
+                  id={TOOLTIP_ID}
+                  tooltipValues={tooltipValues}
+                />
+              )}
+              {indicator && (
+                <MapLegend
+                  className={styles.legend}
+                  title={indicator.legend}
+                  buckets={indicator.legendBuckets}
+                  mapColors={mapColors}
+                />
+              )}
+            </div>
+          </div>
+          <ModalMetadata />
+        </div>
+      )}
+    </TabletLandscape>
+  </div>
+);
+
+NDCSEnhancementsViz.propTypes = {
+  loading: PropTypes.bool,
+  indicator: PropTypes.object,
+  paths: PropTypes.array.isRequired,
+  tooltipValues: PropTypes.object,
+  downloadLink: PropTypes.string,
+  countryData: PropTypes.object,
+  summaryData: PropTypes.object,
+  handleCountryEnter: PropTypes.func.isRequired,
+  handleInfoClick: PropTypes.func.isRequired,
+  mapColors: PropTypes.array
+};
+
+export default NDCSEnhancementsViz;
diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-selectors.js b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-selectors.js
new file mode 100644
index 0000000000..af9be24e83
--- /dev/null
+++ b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-selectors.js
@@ -0,0 +1,278 @@
+/* eslint-disable max-len */
+import { createSelector } from 'reselect';
+import {
+  getColorByIndex,
+  createLegendBuckets,
+  shouldShowPath
+} from 'utils/map';
+import uniqBy from 'lodash/uniqBy';
+import sortBy from 'lodash/sortBy';
+import { generateLinkToDataExplorer } from 'utils/data-explorer';
+import worldPaths from 'app/data/world-50m-paths';
+import { europeSlug, europeanCountries } from 'app/data/european-countries';
+import { COUNTRY_STYLES } from 'components/ndcs/shared/constants';
+
+const getSearch = state => state.search || null;
+const getCountries = state => state.countries || null;
+const getCategories = state => state.categories || null;
+const getIndicatorsData = state => state.indicators || null;
+
+export const getISOCountries = createSelector([getCountries], countries =>
+  countries.map(country => country.iso_code3)
+);
+
+export const getIndicatorsParsed = createSelector(
+  [getCategories, getIndicatorsData, getISOCountries],
+  (categories, indicators, isos) => {
+    if (!categories || !indicators || !indicators.length) return null;
+    const categoryId = Object.keys(categories).find(
+      id => categories[id].slug === 'ndc_enhancement'
+    );
+    return sortBy(
+      uniqBy(
+        indicators.map(i => {
+          const legendBuckets = createLegendBuckets(
+            i.locations,
+            i.labels,
+            isos
+          );
+          return {
+            label: i.name,
+            value: i.slug,
+            categoryIds: i.category_ids,
+            locations: i.locations,
+            legendBuckets
+          };
+        }),
+        'value'
+      ),
+      'label'
+    ).filter(ind => ind.categoryIds.indexOf(parseInt(categoryId, 10)) > -1);
+  }
+);
+
+export const getMapIndicator = createSelector(
+  [getIndicatorsParsed, getISOCountries],
+  (indicators, isos) => {
+    if (!indicators || !indicators.length) return null;
+    const mapIndicator = indicators.find(
+      ind => ind.value === 'ndce_status_2020'
+    );
+    if (mapIndicator) {
+      const noInfoId = Object.keys(mapIndicator.legendBuckets).find(
+        id => mapIndicator.legendBuckets[id].slug === 'no_info_2020'
+      );
+      // Set all countries without values to "No Information" by default
+      if (noInfoId) {
+        isos.forEach(iso => {
+          if (!mapIndicator.locations[iso]) {
+            mapIndicator.locations[iso] = {
+              value: mapIndicator.legendBuckets[noInfoId].name,
+              label_id: noInfoId,
+              label_slug: mapIndicator.legendBuckets[noInfoId].slug
+            };
+          }
+        });
+      }
+    }
+    return mapIndicator;
+  }
+);
+
+export const MAP_COLORS = [
+  [
+    'rgb(255, 108, 47)',
+    'rgb(30, 79, 116)',
+    'rgb(132, 181, 218)',
+    'rgb(204, 204, 204)'
+  ],
+  [
+    'rgb(255, 108, 47)',
+    'rgb(30, 79, 116)',
+    'rgb(132, 181, 218)',
+    'rgb(204, 204, 204)'
+  ],
+  [
+    'rgb(255, 108, 47)',
+    'rgb(30, 79, 116)',
+    'rgb(132, 181, 218)',
+    'rgb(204, 204, 204)'
+  ],
+  [
+    'rgb(255, 108, 47)',
+    'rgb(30, 79, 116)',
+    'rgb(132, 181, 218)',
+    'rgb(204, 204, 204)'
+  ],
+  [
+    'rgb(255, 108, 47)',
+    'rgb(30, 79, 116)',
+    'rgb(132, 181, 218)',
+    'rgb(204, 204, 204)'
+  ]
+];
+
+export const getPathsWithStyles = createSelector(
+  [getMapIndicator, getISOCountries],
+  indicator => {
+    if (!indicator) return [];
+    const paths = [];
+    worldPaths.forEach(path => {
+      if (shouldShowPath(path)) {
+        const { locations, legendBuckets } = indicator;
+
+        if (!locations) {
+          paths.push({
+            ...path,
+            COUNTRY_STYLES
+          });
+          return null;
+        }
+
+        const iso = path.properties && path.properties.id;
+        const isEuropeanCountry = europeanCountries.includes(iso);
+        const countryData = isEuropeanCountry
+          ? locations[europeSlug]
+          : locations[iso];
+
+        let style = COUNTRY_STYLES;
+        if (countryData && countryData.label_id) {
+          const legendIndex = legendBuckets[countryData.label_id].index;
+          const color = getColorByIndex(legendBuckets, legendIndex, MAP_COLORS);
+          style = {
+            ...COUNTRY_STYLES,
+            default: {
+              ...COUNTRY_STYLES.default,
+              fill: color,
+              fillOpacity: 1
+            },
+            hover: {
+              ...COUNTRY_STYLES.hover,
+              fill: color,
+              fillOpacity: 1
+            }
+          };
+        }
+
+        paths.push({
+          ...path,
+          style
+        });
+      }
+      return null;
+    });
+    return paths;
+  }
+);
+
+export const getLinkToDataExplorer = createSelector([getSearch], search => {
+  const section = 'ndc-content';
+  return generateLinkToDataExplorer(
+    {
+      category: 'ndc_enhancement',
+      ...search
+    },
+    section
+  );
+});
+
+// Chart data methods
+
+export const summarizeIndicators = createSelector(
+  [getIndicatorsParsed, getMapIndicator],
+  (indicators, indicator) => {
+    if (!indicator || !indicators) return null;
+    const summaryData = {};
+    const labels = Object.keys(indicator.legendBuckets).map(id => ({
+      ...indicator.legendBuckets[id],
+      id
+    }));
+
+    const locations = Object.keys(indicator.locations);
+
+    // Retain functionality for showing submitted 2020 NDCs in case this becomes useful to display later
+    // Retain functionality for showing emissions percentage in case this becomes useful to display later
+    // ONLY "intent to submit" and "intent to enhance" 2020 NDCs currently displayed in component
+    // ONLY country totals currently displayed in component
+    labels.forEach(label => {
+      summaryData[label.slug] = {
+        includesEU: false,
+        countries: {
+          value: 0,
+          max: locations.length,
+          opts: {
+            color: getColorByIndex(
+              indicator.legendBuckets,
+              label.index,
+              MAP_COLORS
+            ),
+            label: undefined
+          }
+        },
+        emissions: {
+          value: 0,
+          max: 100,
+          opts: {
+            color: getColorByIndex(
+              indicator.legendBuckets,
+              label.index,
+              MAP_COLORS
+            ),
+            suffix: '%',
+            label:
+              'of global emissions are represented by these countries (2016 emissions data)'
+          }
+        }
+      };
+    });
+    const emissionsIndicator = indicators.find(ind => ind.value === 'ndce_ghg');
+    locations.forEach(l => {
+      const location = indicator.locations[l];
+      const type = location.label_slug;
+      const emissionPercentages = emissionsIndicator.locations;
+      if (type) {
+        if (l === europeSlug) {
+          const EUTotal = parseFloat(emissionPercentages[europeSlug].value);
+          const europeanLocationIsos = locations.filter(iso =>
+            europeanCountries.includes(iso)
+          );
+          const europeanLocationsValue = europeanLocationIsos.reduce(
+            (acc, iso) => acc + parseFloat(emissionPercentages[iso].value),
+            0
+          );
+          summaryData[type].emissions.value += EUTotal - europeanLocationsValue; // To avoid double counting
+          summaryData[type].countries.value +=
+            europeanCountries.length - europeanLocationIsos.length; // To avoid double counting
+          summaryData[type].includesEU = true;
+        } else {
+          summaryData[type].countries.value += 1;
+
+          if (emissionsIndicator.locations[l]) {
+            summaryData[type].emissions.value += parseFloat(
+              emissionsIndicator.locations[l].value
+            );
+          }
+        }
+      }
+    });
+    Object.keys(summaryData).forEach(type => {
+      summaryData[type].emissions.value = parseFloat(
+        summaryData[type].emissions.value.toFixed(1)
+      );
+      const emissionsString = `, representing <span title="2016 emissions data">${summaryData[type].emissions.value}% of global emissions</span>`;
+      summaryData[type].countries.opts.label =
+        {
+          enhance_2020: `<strong>countries</strong>${emissionsString}, <strong>have stated their intention to <span title="Definition: Strengthening mitigation ambition and/or increasing adaptation action in a new or updated NDC.">enhance ambition or action</span> in new or updated NDCs</strong>`,
+          submitted_2020: `<strong>countries (including the 27 EU countries)</strong>${emissionsString}, <strong>have submitted a new or updated NDC</strong>`
+        }[type] || '';
+    });
+    return summaryData;
+  }
+);
+
+export default {
+  getMapIndicator,
+  getIndicatorsParsed,
+  summarizeIndicators,
+  getPathsWithStyles
+};
diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-styles.scss b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-styles.scss
new file mode 100644
index 0000000000..d9ba8a5c10
--- /dev/null
+++ b/app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-viz-styles.scss
@@ -0,0 +1,259 @@
+@import '~styles/layout.scss';
+@import '~styles/settings.scss';
+
+.wrapper {
+  position: relative;
+}
+
+.column {
+  @include columns();
+}
+
+.buttonGroup {
+  width: auto;
+  margin-top: 1em;
+  min-width: 200px;
+  float: right;
+
+  .containerControls & {
+    @media #{$tablet-portrait} {
+      margin-top: 0;
+      width: 100%;
+      min-width: 0;
+    }
+  }
+}
+
+.containerControls {
+  @media #{$tablet-portrait} {
+    @include columns((8,4));
+  }
+
+  margin-bottom: 40px;
+  margin-top: 20px;
+
+  @include clearFix();
+}
+
+.searchBox {
+  @media #{$tablet-landscape} {
+    @include column-offset(9, $gutters: true);
+
+    margin-top: 20px;
+  }
+}
+
+.legend {
+  position: absolute;
+  left: 0;
+  bottom: 12%;
+  max-width: 100%;
+
+  @media #{$tablet-portrait} {
+    max-width: 160px;
+  }
+
+  @media #{$tablet-landscape} {
+    bottom: 0;
+  }
+}
+
+.summary {
+  min-height: 300px;
+
+  @media #{$tablet-landscape} {
+    min-height: 500px;
+  }
+}
+
+:global .__react_component_tooltip {
+  max-width: 250px;
+  white-space: pre-line;
+}
+
+.loader {
+  min-height: 500px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: $z-index-loader;
+}
+
+.containerUpper,
+.containerCharts,
+.containerMap {
+  position: relative;
+}
+
+.containerMap {
+  @media #{$tablet-landscape} {
+    padding-left: calc(#{$gutter-padding} / 2);
+  }
+
+  padding-top: calc(#{$gutter-padding} / 2);
+
+  [class*=map-styles__wrapper] {
+    &,
+    &[class*=__notDraggable] {
+      cursor: default;
+    }
+  }
+}
+
+.containerUpper {
+  @media #{$tablet-landscape} {
+    @include columns((4,8));
+  }
+}
+
+.containerCharts {
+  background-color: $white;
+  box-shadow: $box-shadow-light;
+
+  > div {
+    @include columns(100%);
+  }
+
+  @media #{$tablet-portrait} {
+    > div {
+      @include columns(33.333%);
+    }
+  }
+
+  @media #{$tablet-landscape} {
+    &,
+    > div {
+      height: 100%;
+    }
+
+    > div {
+      @include columns(100%);
+    }
+  }
+}
+
+.summaryTitle {
+  font-weight: $font-weight-bold;
+  text-align: center;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  cursor: default;
+}
+
+.infoIcon {
+  margin-left: 5px;
+  transform: translateY(1px);
+}
+
+.covidTooltip {
+  line-height: $line-height-medium;
+}
+
+.circularChartContainer {
+  position: relative;
+  margin: -10% 0;
+  flex: 1;
+  height: 200px;
+  overflow: visible;
+  display: flex;
+  flex-direction: row;
+  font-size: 0.8em;
+
+  > div {
+    position: relative;
+
+    &:first-child {
+      max-width: 50%;
+    }
+  }
+
+  @media #{$tablet-portrait} {
+    font-size: 1em;
+    padding-right: calc(#{$gutter-padding} / 2);
+    margin: -60px 0 6.8em;
+    flex-direction: column;
+
+    &:last-child {
+      margin-bottom: 10%;
+    }
+
+    > div {
+      &:first-child {
+        max-width: 100%;
+      }
+    }
+  }
+
+  @media #{$tablet-landscape} {
+    margin: -5% $card-content-margin 0;
+
+    &:last-child {
+      margin-bottom: -5%;
+    }
+  }
+
+  @media #{$desktop} {
+    flex-direction: row;
+    margin-bottom: -10%;
+
+    > div {
+      &:first-child {
+        max-width: 50%;
+      }
+    }
+  }
+
+  [class*=circularChartWrapper] {
+    position: static;
+    margin: 0 auto;
+  }
+
+  svg {
+    height: 200px !important;
+  }
+
+  //Hiding circular charts for now because the number of countries will remain a small minority for some time
+  //Leaving functionality in place in case the data should be shown in the future
+  svg {
+    visibility: hidden;
+  }
+
+  .circularChartValues {
+    font-size: 4.5em;
+  }
+}
+
+.circularChartValues {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: $font-weight-bold;
+  font-size: 2.4em;
+}
+
+.circularChartLabels {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  top: 0;
+
+  @media #{$tablet-portrait} {
+    top: -2.4em;
+  }
+
+  @media #{$desktop} {
+    top: 0;
+  }
+
+  span[title] {
+    display: inline;
+    border-bottom: 1px solid #aaa;
+    cursor: default;
+
+    &:hover {
+      border-bottom-color: #000;
+    }
+  }
+}
diff --git a/app/javascript/app/routes/app-routes/ndcs-enhancements-sections/ndcs-enhancements-sections.js b/app/javascript/app/routes/app-routes/ndcs-enhancements-sections/ndcs-enhancements-sections.js
index d86cc8550f..d5800cb7dd 100644
--- a/app/javascript/app/routes/app-routes/ndcs-enhancements-sections/ndcs-enhancements-sections.js
+++ b/app/javascript/app/routes/app-routes/ndcs-enhancements-sections/ndcs-enhancements-sections.js
@@ -1,12 +1,18 @@
 import NDCSEnhancementsViz from 'components/ndcs/ndcs-enhancements-viz';
+import NDCSEnhancementsLegacyViz from 'components/ndcs/ndcs-enhancements-legacy-viz';
 import NDCSEnhancementsTable from 'components/ndcs/ndcs-enhancements-table';
 
+const FEATURE_NDC_ENHANCEMENTS =
+  process.env.FEATURE_NDC_ENHANCEMENTS === 'true';
+
 export default [
   {
     hash: 'map',
     anchor: true,
     label: 'Map',
-    component: NDCSEnhancementsViz
+    component: FEATURE_NDC_ENHANCEMENTS
+      ? NDCSEnhancementsViz
+      : NDCSEnhancementsLegacyViz
   },
   {
     hash: 'table',