<!DOCTYPE html>
<!--[if (gt IE 9)|!(IE)]> <!--><html lang="en" class="no-js page-interactive section-us page-theme-standard template-minimal tone-news page-interactive-default limit-small layout-xlarge app-interactive" itemid="https://www.nytimes.com/interactive/2017/08/29/us/houston-before-and-after-hurricane-harvey.html" itemtype="http://schema.org/NewsArticle" itemscope xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->
<!--[if IE 9]> <html lang="en" class="no-js ie9 lt-ie10 page-interactive section-us page-theme-standard template-minimal tone-news page-interactive-default limit-small layout-xlarge app-interactive" xmlns:og="http://opengraphprotocol.org/schema/"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8 lt-ie10 lt-ie9 page-interactive section-us page-theme-standard template-minimal tone-news page-interactive-default limit-small layout-xlarge app-interactive" xmlns:og="http://opengraphprotocol.org/schema/"> <![endif]-->
<!--[if (lt IE 8)]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 page-interactive section-us page-theme-standard template-minimal tone-news page-interactive-default limit-small layout-xlarge app-interactive" xmlns:og="http://opengraphprotocol.org/schema/"> <![endif]-->
<head>
<script>
if (document.location.search.indexOf('nytapp=true') > -1) document.documentElement.classList.add('nyt-hide-shell');
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Language" content="en" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="https://static01.nyt.com/favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="144×144" href="https://static01.nyt.com/images/icons/ios-ipad-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="https://static01.nyt.com/images/icons/ios-iphone-114x144.png" />
<link rel="apple-touch-icon-precomposed" href="https://static01.nyt.com/images/icons/ios-default-homescreen-57x57.png" />
<meta property="fb:app_id" content="9869919170" />
<meta name="twitter:site" value="@nytimes" />
<meta name="sourceApp" content="nyt-v5" />
<meta name="applicationName" content="interactive" id="applicationName" />
<meta name="foundation-build-id" content="nyt-v5" id="foundation-build-id" />
<link rel="canonical" href="https://www.nytimes.com/interactive/2017/08/29/us/houston-before-and-after-hurricane-harvey.html" />
<meta name="PT" content="Multimedia" />
<meta name="PST" content="Interactive" />
<meta name="tom" content="interactive_feature" />
<meta name="hdl" content="Before and After Hurricane Harvey" />
<meta name="slug" content="houston-before-and-after-hurricane-harvey" />
<meta name="lp" content="Torrential rain has fallen on the Gulf Coast in the aftermath of Hurricane Harvey, leaving swaths of Houston and surrounding cities under water." />
<meta name="col" content="" id="column-name" />
<meta name="dfp-ad-unit-path" content="us" />
<meta name="keywords" content="" />

<meta property="article:collection" content="https://static01.nyt.com/services/json/sectionfronts/us/index.jsonp" />
<meta name="DISPLAYDATE" content="Aug. 29, 2017" />
<meta name="dat" content="Aug. 29, 2017" />
<meta name="author" content="Malachy Browne" /><meta name="author" content="Jugal K. Patel" /><meta name="author" content="Sergio Peçanha" /><meta name="author" content="Ainara Tiefenthäler" /><meta name="author" content="Anjali Singhvi" /><meta name="author" content="Josh Williams" />
<title data-rh="true">Before and After Hurricane Harvey - The New York Times</title><meta data-rh="true" itemprop="inLanguage" content="en-US"/><meta data-rh="true" name="robots" content="noarchive"/><meta data-rh="true" name="articleid" itemprop="identifier" content="100000005398335"/><meta data-rh="true" name="description" itemprop="description" content="Torrential rain has fallen on the Gulf Coast in the aftermath of Hurricane Harvey, leaving swaths of Houston and surrounding cities under water."/><meta data-rh="true" name="byl" content="By MALACHY BROWNE, JUGAL K. PATEL, SERGIO PEÇANHA, AINARA TIEFENTHÄLER, ANJALI SINGHVI and JOSH WILLIAMS"/><meta data-rh="true" name="thumbnail" itemprop="thumbnailUrl" content="https://static01.nyt.com/images/2017/08/30/us/31Beforafter-alpha/31Beforafter-alpha-thumbStandard-v3.png"/><meta data-rh="true" name="news_keywords" content=""/><meta data-rh="true" name="usageTerms" itemprop="usageTerms" content="http://www.nytimes.com/content/help/rights/sale/terms-of-sale.html"/><meta data-rh="true" name="pdate" content="20170829"/><meta data-rh="true" name="utime" content="20170911145038"/><meta data-rh="true" name="ptime" content="20170829193122"/><meta data-rh="true" property="og:url" content="https://www.nytimes.com/interactive/2017/08/29/us/houston-before-and-after-hurricane-harvey.html"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="og:title" content="Before and After Hurricane Harvey"/><meta data-rh="true" property="og:image" content="https://static01.nyt.com/images/2017/08/30/us/31Beforafter-alpha/31Beforafter-alpha-facebookJumbo-v2.png"/><meta data-rh="true" property="og:description" content="Torrential rain has fallen on the Gulf Coast in the aftermath of Hurricane Harvey, leaving swaths of Houston and surrounding cities under water."/><meta data-rh="true" property="twitter:url" content="https://www.nytimes.com/interactive/2017/08/29/us/houston-before-and-after-hurricane-harvey.html"/><meta data-rh="true" property="twitter:title" content="Before and After Hurricane Harvey"/><meta data-rh="true" property="twitter:description" content="Torrential rain has fallen on the Gulf Coast in the aftermath of Hurricane Harvey, leaving swaths of Houston and surrounding cities under water."/><meta data-rh="true" property="twitter:image" content="https://static01.nyt.com/images/2017/08/30/us/31Beforafter-alpha/31Beforafter-alpha-videoSixteenByNineJumbo1600-v2.png"/><meta data-rh="true" property="twitter:image:alt" content=""/><meta data-rh="true" property="twitter:card" content="summary_large_image"/><meta data-rh="true" property="article:section" itemprop="articleSection" content="U.S."/><meta data-rh="true" property="article:section-taxonomy-id" itemprop="articleSection" content="23FD6C8B-62D5-4CEA-A331-6C2A9A1223BE"/><meta data-rh="true" property="article:author" content="https://www.nytimes.com/by/malachy-browne"/><meta data-rh="true" property="article:author" content="https://www.nytimes.com/by/jugal-k-patel"/><meta data-rh="true" property="article:author" content="https://www.nytimes.com/by/sergio-pecanha"/><meta data-rh="true" property="article:author" content="https://www.nytimes.com/by/ainara-tiefenthaler"/><meta data-rh="true" property="article:author" content="https://www.nytimes.com/by/anjali-singhvi"/><meta data-rh="true" property="article:author" content="https://www.nytimes.com/by/josh-williams"/><meta data-rh="true" property="article:published" itemprop="datePublished" content="2017-08-29T23:31:22.000Z"/><meta data-rh="true" property="article:modified" itemprop="dateModified" content="2017-09-11T18:50:38.000Z"/><meta data-rh="true" name="CG" content="us"/><meta data-rh="true" name="SCG" content=""/><meta data-rh="true" name="CN" content=""/><meta data-rh="true" name="CT" content=""/><meta data-rh="true" name="hostApp" content="vi"/><meta data-rh="true" name="ver" content="vi"/><meta data-rh="true" name="typ" content="art,interactive"/><meta data-rh="true" name="sub" content="anon"/><meta data-rh="true" name="vp" content="large"/><meta data-rh="true" name="page_view_id" content/><meta data-rh="true" name="ref" content=""/><meta data-rh="true" name="refdom" content=""/><meta data-rh="true" name="sov" content="1"/><meta data-rh="true" name="topref" content/><meta data-rh="true" name="template" content="interactive"/><meta data-rh="true" name="edn" content="us"/><meta data-rh="true" name="prop" content="nyt"/><meta data-rh="true" name="plat" content="web"/><meta data-rh="true" name="id" content="100000005398335"/><meta data-rh="true" name="auth" content="malachybrowne,jugalkpatel,sergiopeçanha,ainaratiefenthäler,anjalisinghvi,joshwilliams"/><meta data-rh="true" name="brandsensitive" content="false"/><link data-rh="true" rel="canonical" href="https://www.nytimes.com/interactive/2017/08/29/us/houston-before-and-after-hurricane-harvey.html"/>
<link id="legacy-zam5nzz" rel="stylesheet" type="text/css" href="https://typeface.nyt.com/css/zam5nzz.css" media="all" />
<!--[if (gt IE 9)|!(IE)]> <!-->
<link rel="stylesheet" type="text/css" media="screen" href="/vi-assets/static/nyt5/20171016/css/interactive/styles.css" />
<!--<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" media="screen" href="/vi-assets/static/nyt5/20171016/css/interactive/styles-ie.css" />
<![endif]-->

<style>.interactive-graphic > iframe { margin-left: auto !important; margin-right: auto !important; }</style>
<script>
    var NYTD=NYTD||{};NYTD.Abra=function(t){"use strict";function n(t){var n=i[t];return n&&n[1]||null}function e(t,n){if(t){var e,o,r=n[0],i=n[1],u=0,c=0;if(1!==i.length||4294967296!==i[0])for(e=a(t+" "+r)>>>0,u=0,c=0;o=i[u++];)if(e<(c+=o[0]))return o}}function o(n,e,o,a){s+="subject="+n+"&test="+encodeURIComponent(e)+"&variant="+encodeURIComponent(o||0)+"&url="+encodeURIComponent(t.location.href)+"&instant=1&skipAugment=true\n",a&&f.push(a),c||(c=t.setTimeout(r,0))}function r(){var n=new t.XMLHttpRequest,e=f;n.withCredentials=!0,n.open("POST",u),n.onreadystatechange=function(){var t,o;if(4==n.readyState)for(t=200==n.status?null:new Error(n.statusText);o=e.shift();)o(t)},n.send(s),s="",f=[],c=null}function a(t){for(var n,e,o,r,a,i,u,c=0,s=0,f=[],l=[n=1732584193,e=4023233417,~n,~e,3285377520],h=[],p=t.length;s<=p;)h[s>>2]|=(s<p?t.charCodeAt(s):128)<<8*(3-s++%4);for(h[u=p+8>>2|15]=p<<3;c<=u;c+=16){for(n=l,s=0;s<80;n=[0|[(i=((t=n[0])<<5|t>>>27)+n[4]+(f[s]=s<16?~~h[c+s]:i<<1|i>>>31)+1518500249)+((e=n[1])&(o=n[2])|~e&(r=n[3])),a=i+(e^o^r)+341275144,i+(e&o|e&r|o&r)+882459459,a+1535694389][0|s++/20],t,e<<30|e>>>2,o,r])i=f[s-3]^f[s-8]^f[s-14]^f[s-16];for(s=5;s;)l[--s]=l[s]+n[s]|0}return l[0]}var i,u,c,s="",f=[];return n.init=function(n,r){var a,c,s,f,l,h=[],p=(t.document.cookie.match(/(^|;) *nyt-a=([^;]*)/)||[])[2],d=(t.document.cookie.match(/(^|;) *ab7=([^;]*)/)||[])[2],m=new RegExp("[?&]abra(=([^&#]*))"),g=m.exec(t.location.search);if(g&&g[2]&&(d=d?g[2]+"&"+d:g[2]),i)throw new Error("can't init twice");if(u=r,i={},d)for(d=decodeURIComponent(d).split("&"),a=0;a<d.length;a++)l=d[a].split("="),l[0]in i||(i[l[0]]=[,l[1],1],o("ab-alloc",l[0],l[1]),l[1]&&h.push(l[0]+"="+l[1]));for(a=0;a<n.length;a++)s=n[a],(c=s[0])in i||(f=e(p,s)||[],i[c]=f,f[1]&&h.push(c.replace(/[^\w-]/g)+"="+(""+f[1]).replace(/[^\w-]/g)),f[2]&&o("ab-alloc",c,f[1]));h.length&&t.document.documentElement.setAttribute("data-nyt-ab",h.join(" "))},n.reportExposure=function(n,e){var r=i[n];r&&r[2]?o("ab-expose",n,r[1],e):e&&t.setTimeout(function(){e(null)},0)},n}(this);;
    NYTD.Abra.init([["WP_Platform",[[4294967296,"vi",0]]],["vi-indexHeaderBidder",[[4294967296,"1",1]]],["vi-adLibraryService",[[4294967296,"1",1]]],["vi-adStride",[[214748365,"44",1],[214748365,"46",1],[3865470566,null,0]]],["vi-ads-et",[[21474837,"1",1],[4273492459,null,0]]],["vi-ad-sandbox",[[4294967296,null,0]]],["story-page-newsletter-ux",[[2147483648,"control",1],[2147483648,"variant2",1]]],["messaging-optimizely",[[429496730,"0",1],[3865470566,"1",1]]]],"//et.nytimes.com");
  </script>
  <script>
    
/* ABRA reporting for Vi rollout. Please don't hand-edit this minified snippet. <https://github.com/nytm/vi-rollout-abra-reporting-js> (6abdd06 @ Wed Feb  7 15:26:18 EST 2018) */ function reportViRolloutToABRA(t,e,o){"use strict";var i,a,n,r,s="";if(e&&(/^mobile\./.test(window.location.hostname)?(i=(document.cookie.match(/(?:^|;) *vi=([^;]*)/)||[,""])[1],a=(document.cookie.match(/(?:^|;) *nyt\.np\.vi=([^;]*)/)||[,""])[1],n=/^b1/.test(i)?"WP_ProjectVi&variant=vi":/^z1/.test(i)?"WP_ProjectVi&variant=0":/^a2/.test(i)?"WP_ProjectVi2&variant=hp-st":/^b2/.test(i)?"WP_ProjectVi2&variant=hp":/^c2/.test(i)?"WP_ProjectVi2&variant=st":/^z2/.test(i)?"WP_ProjectVi2&variant=0":/^1\|/.test(a)?"WP_ProjectVi&variant=vi":/^2\|/.test(a)?"WP_ProjectVi&variant=0":null):/^www\./.test(window.location.hostname)&&(i=(document.cookie.match(/(?:^|;) *vi_www_hp=([^;]*)/)||[,""])[1],n=/^a2/.test(i)?"WP_ProjectVi_www_hp&variant=hp-st":/^b2/.test(i)?"WP_ProjectVi_www_hp&variant=hp":/^c2/.test(i)?"WP_ProjectVi_www_hp&variant=st":/^d2/.test(i)?"WP_ProjectVi_www_hp&variant=hp-2":/^e2/.test(i)?"WP_ProjectVi_www_hp&variant=hp-serv":/^f2/.test(i)?"WP_ProjectVi_www_hp&variant=hp-orig":/^y2/.test(i)?"WP_ProjectVi_www_hp&variant=0-2":/^z2/.test(i)?"WP_ProjectVi_www_hp&variant=0":null),n&&(s+="subject=ab-alloc&test="+n+"&url="+encodeURIComponent(window.location.href)+"&instant=1&skipAugment=true\n")),o&&(/^mobile\./.test(window.location.hostname)?(i=(document.cookie.match(/(?:^|;) *vistorymobile=([^;]*)/)||[,""])[1],r=/^a/.test(i)?"WP_ProjectVi_Story_Mobile&variant=st":/^b/.test(i)?"WP_ProjectVi_Story_Mobile&variant=sth":/^c/.test(i)?"WP_ProjectVi_Story_Mobile&variant=mw":/^z/.test(i)?"WP_ProjectVi_Story_Mobile&variant=mwh":null):/^www\./.test(window.location.hostname)&&(i=(document.cookie.match(/(?:^|;) *vistory=([^;]*)/)||[,""])[1],r=/^a/.test(i)?"WP_ProjectVi_story_desktop&variant=sd":/^b/.test(i)?"WP_ProjectVi_story_desktop&variant=sdh":/^c/.test(i)?"WP_ProjectVi_story_desktop&variant=nyt5":/^z/.test(i)?"WP_ProjectVi_story_desktop&variant=nyt5h":null),r&&(s+="subject=ab-alloc&test="+r+"&url="+encodeURIComponent(window.location.href)+"&instant=1&skipAugment=true\n")),s){var _=new XMLHttpRequest;_.withCredentials=!0,_.open("POST",t),_.send(s)}}

    reportViRolloutToABRA("//et.nytimes.com",true,true);
  </script>
<script id="page-config-data" type="text/json">{"pageconfig":{"collections":{}}}</script>
<script id="display_overrides">["INCLUDE_TOP_AD","HIDE_RIBBON","HIDE_NAVIGATION-EDGE","HIDE_KICKER","HIDE_TOP_AD","HIDE_TOP_NAV_AD"]</script>

<script type="text/javascript">var googletag=googletag||{};googletag.cmd=googletag.cmd||[],function(){var t=document.createElement("script");t.async=!0,t.type="text/javascript";var e="https:"==document.location.protocol;t.src=(e?"https:":"http:")+"//www.googletagservices.com/tag/js/gpt.js";var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(t,o)}();</script>
<script type="text/javascript" src="https://contextual.media.net/bidexchange.js?cid=8CULO58R6&https=1&version=3.3" async></script>
<script type="text/javascript" src="https://js-sec.indexww.com/ht/p/183760-179626133031071.js" async></script>
<script type="text/javascript" async>
  !function(a9,a,p,s,t,A,g){if(a[a9])return;
  function q(c,r){a[a9]._Q.push([c,r])}a[a9]={
      init:function(){q("i",arguments)},
      fetchBids:function(){q("f",arguments)},
      setDisplayBids:function(){},
      targetingKeys:function(){return[]},_Q:[]};
      A=p.createElement(s);
      A.async=!0;
      A.src=t;
      g=p.getElementsByTagName(s)[0];
      g.parentNode.insertBefore(A,g)}
  ("apstag",window,document,"script","//c.amazon-adsystem.com/aax2/apstag.js");
  apstag.init({
  pubID: '3030',
  adServer: 'googletag'
});
</script>
<script>
var require = {
  baseUrl: '/vi-assets/static/nyt5/20180207/js/',
  waitSeconds: 20,
  paths: {
    'videoFactory': 'https://static01.nyt.com/js2/build/video/2.0/videofactoryrequire',
    'videoPlaylist': 'https://static01.nyt.com/js2/build/video/players/extended/2.0/appRequire',
    'auth/mtr': 'https://static01.nyt.com/js/mtr',
    'auth/growl': 'https://static01.nyt.com/js/auth/growl/default',
    'vhs': 'https://static01.nyt.com/video/vhs/build/vhs-2.x.min',
    'vhs3': 'https://static01.nyt.com/video-static/vhs3/vhs.min'
  }
};

window.NYT_PLATFORM = 'nyt5';
window.NYT_CONTEXT = 'inline';
window.NYT_ENVIRONMENT = 'prd';

</script>

<!--[if (gte IE 9)|!(IE)]> <!-->
<script data-main="foundation/main" src="/vi-assets/static/nyt5/20180207/js/framework.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script>require.map = { '*': { 'foundation/main': 'foundation/legacy_main' } };</script>
<script data-main="foundation/legacy_main" src="/vi-assets/static/nyt5/20180207/js/framework.js"></script>
<![endif]-->
<script>
require(['foundation/main'], function () {
  require(['auth/mtr']);
});
</script>
<style>
.nyt-hide-shell #masthead, .nyt-hide-shell #ribbon, .nyt-hide-shell #TopAd, .nyt-hide-shell #page-footer {display: none;}
.nyt-hide-shell #shell {padding: 0;}
</style>
</head>
<body>
<style>
.lt-ie10 .messenger.suggestions {
  display: block !important;
  height: 50px;
}

.lt-ie10 .messenger.suggestions .message-bed {
  background-color: #f8e9d2;
  border-bottom: 1px solid #ccc;
}

.lt-ie10 .messenger.suggestions .message-container {
  padding: 11px 18px 11px 30px;
}

.lt-ie10 .messenger.suggestions .action-link {
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #a81817;
  text-transform: uppercase;
}

.lt-ie10 .messenger.suggestions .alert-icon {
  background: url('https://static01.nyt.com/images/icons/icon-alert-12x12-a81817.png') no-repeat;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-top: -2px;
  float: none;
}

.lt-ie10 .masthead,
.lt-ie10 .navigation,
.lt-ie10 .comments-panel {
  margin-top: 50px !important;
}

.lt-ie10 .ribbon {
  margin-top: 97px !important;
}
</style>
<div id="suggestions" class="suggestions messenger nocontent robots-nocontent" style="display:none;">
  <div class="message-bed">
    <div class="message-container last-message-container">
      <div class="message">
        <span class="message-content">
          <i class="icon alert-icon"></i><span class="message-title">NYTimes.com no longer supports Internet Explorer 9 or earlier. Please upgrade your browser.</span>
          <a href="http://www.nytimes.com/content/help/site/ie9-support.html" class="action-link">LEARN MORE »</a>
        </span>
      </div>
    </div>
  </div>
</div>
<div id="shell" class="shell">
  <header id="masthead" class="masthead masthead-theme-standard" role="banner">
  <div class="container">
    <div class="quick-navigation button-group">
      <button class="button sections-button"><i class="icon sprite-icon"></i><span class="button-text">Sections</span></button>
      <button class="button home-button" data-href="http://www.nytimes.com/" title="Go to the home page to see the latest top stories."><i class="icon sprite-icon"></i><span class="button-text">Home</span></button>
      <button class="button search-button"><i class="icon sprite-icon"></i><span class="button-text">Search</span></button>
    </div>
    <div class="branding">
      <h2 class="branding-heading">
        <a id="branding-heading-link" href="http://www.nytimes.com/">
          <span class="visually-hidden">The New York Times</span>
        </a>
      </h2>
      <script>
        window.magnum.writeLogo('small', '/vi-assets/static/nyt5/20180207/images/foundation/logos/', 'us', 'masthead-theme-standard', 'standard', 'branding-heading-link', 'interactive');
      </script>
      
    </div>
    <div class="story-meta">
      <h6 class="kicker">
        <span class="kicker-label">
          <a href="https://www.nytimes.com/section/us">U.S.</a>
        </span>
        <span class="pipe">|</span>Before and After Hurricane Harvey
      </h6>
    </div>
    <div class="user-tools">
  <div id="sharetools-masthead"
    aria-label="tools" role="group"
    class="sharetools theme-classic  sharetools-masthead  "
    data-shares="facebook,twitter,email,show-all,save"
    data-url="https://www.nytimes.com/interactive/2017/08/29/us/houston-before-and-after-hurricane-harvey.html"
    data-title="Before and After Hurricane Harvey"
    data-author="By MALACHY BROWNE, JUGAL K. PATEL, SERGIO PEÇANHA, AINARA TIEFENTHÄLER, ANJALI SINGHVI and JOSH WILLIAMS"
    data-media="https://static01.nyt.com/images/icons/t_logo_291_black.png"
    data-description="Torrential rain has fallen on the Gulf Coast in the aftermath of Hurricane Harvey, leaving swaths of Houston and surrounding cities under water."
    data-publish-date="August 29, 2017">
    <div class="ad sharetools-inline-article-ad hidden nocontent robots-nocontent"></div>
  </div>
  <div class="user-tools-button-group button-group">
    
    
    
  </div>
</div>
  </div>
  <div class="search-flyout-panel flyout-panel">
  <button class="button close-button" type="button"><i class="icon"></i><span class="visually-hidden">Close search</span></button>
  <nav class="search-form-control form-control layout-horizontal">
    <h2 class="visually-hidden">Site Search Navigation</h2>
    <form class="search-form" role="search">
      <div class="control">
        <div class="label-container visually-hidden">
          <label for="search-input">Search NYTimes.com</label>
        </div>
        <div class="field-container">
          <input id="search-input" name="search-input" type="text" class="search-input text" autocomplete="off" placeholder="Search NYTimes.com" />
          <button type="button" class="button clear-button" tabindex="-1" aria-describedby="clear-search-input"><i class="icon"></i><span id="clear-search-input" class="visually-hidden">Clear this text input</span></button>
          <div class="auto-suggest" style="display: none;">
            <ol></ol>
          </div>
          <button class="button submit-button" type="submit">Go</button>
        </div>
      </div>
    </form>
  </nav>
</div>
  <div id="notification-modals" class="notification-modals"></div>
  <span class="story-short-url"><a href="https://nyti.ms/2wgJdQN">https://nyti.ms/2wgJdQN</a></span>
</header>

<nav class="navigation" id="navigation">
  <h2 class="visually-hidden">Site Navigation</h2>
</nav>
<nav class="mobile-navigation hidden" id="mobile-navigation">
  <h2 class="visually-hidden">Site Mobile Navigation</h2>
</nav>

  <div id="page" class="page">
    
    <main id="main" class="main" role="main">
      <article id="story" class="story theme-interactive theme-minimal">
        
        <header class="story-header interactive-header">
          <div class="story-meta">
            <button class="button comments-button theme-kicker"></button>
            
            <h1 class="story-heading interactive-headline" itemprop="headline">Before and After Hurricane Harvey</h1>
            <div class="story-meta-footer interactive-meta-footer">
              
              <p class="interactive-leadin summary">
                
                
                <time class="dateline" datetime="AUG. 31, 2017"><span class="timestamp">UPDATED </span>AUG. 31, 2017</time>
              </p>
            </div>
          </div>
        </header>
        <div id="houston-before-and-after-hurricane-harvey" class="interactive-graphic"><!--

======================================================

THIS IS A GENERATED TEMPLATE FILE. DO NOT EDIT.

======================================================

-->
<!-- this file is generated from src/style.less -->
<style>/*
  SHOW LIBRARY
  ===================== */
.g-show-xsmall,
.g-show-small,
.g-show-smallplus,
.g-show-submedium,
.g-show-sub-medium,
.g-show-medium,
.g-show-large,
.g-show-xlarge {
  display: none;
}
.g-show {
  display: block;
}
.lt-ie10 .g-aiImg {
  width: 100%;
}
/* story top */
.story.theme-main .story-header .story-meta .story-heading {
  max-width: 720px;
  margin: 0 auto 10px;
  text-align: center;
  line-height: 2.844rem;
  font-size: 2.4rem;
}
@media only screen and (max-width: 1244px) {
  .story.theme-main .story-header .story-meta .story-heading {
    line-height: 2.5596rem;
    font-size: 2.16rem;
  }
}
@media only screen and (max-width: 719px) {
  .story.theme-main .story-header .story-meta .story-heading {
    line-height: 2.2752rem;
    font-size: 1.92rem;
  }
}
.story.theme-main .story-header .story-meta .interactive-leadin.summary {
  max-width: 460px;
  margin: 0 auto 20px auto;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
}
.story.theme-main .story-header .story-meta .byline-dateline {
  text-align: center;
}
/* top asset */
.g-top-asset {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.g-top-asset img {
  width: 100%;
}
/* body text */
.g-body {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.viewport-medium .g-body {
  font-size: 17px;
  line-height: 1.6;
}
.g-body a {
  text-decoration: underline;
}
/* subhed */
.g-subhed h2 {
  max-width: 460px;
  margin: 2em auto 1em auto;
  font: 700 1.2em/1.3em 'nyt-franklin', arial, sans-serif;
  text-align: center;
}
.viewport-small-10 .g-subhed h2 {
  font-size: 1.5em;
}
/* refer text box */
.g-refer {
  max-width: 460px;
  margin: 0 auto 25px;
  padding: 12px 15px;
  box-sizing: border-box;
  background: #fffcd9;
}
.g-refer .g-body {
  font-family: 'nyt-franklin', arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 0;
}
.g-refer a {
  text-decoration: underline;
}
/* images */
.g-item-image {
  margin: 25px auto;
}
.g-item-image img {
  width: 100%;
}
/* video */
.g-item-video {
  margin: 25px auto;
}
/* sources and credits */
.g-asset-source {
  padding-top: 3px;
}
.g-asset-source .g-source {
  font: 400 12px/15px 'nyt-franklin', arial, sans-serif;
  color: #999;
}
.g-asset-source .g-pipe {
  margin: 0 6px 0 3px;
  font: 400 12px/12px 'nyt-franklin', arial, sans-serif;
  color: #999;
}
.g-asset-source .g-caption {
  font: 300 14px/17px georgia, 'times new roman', times, serif;
}
.g-asset-source .g-credit {
  font: 400 12px/17px 'nyt-franklin', arial, sans-serif;
  display: inline-block;
  color: #999;
}
/* graphics */
.g-item-ai2html {
  margin: 25px auto;
}
p.g-asset-hed {
  font: 700 16px/18px 'nyt-franklin', arial, sans-serif;
  margin-bottom: 0;
}
.g-map-key {
  float: none;
  clear: both;
  overflow: hidden;
  margin: 10px auto 4px auto;
}
.g-map-key .g-key-row {
  margin-bottom: 5px;
  margin-right: 15px;
  float: left;
}
.viewport-small .g-map-key .g-key-row {
  width: auto;
  margin-bottom: 0;
}
.viewport-small-20 .g-map-key .g-key-row {
  width: auto;
}
.g-map-key .g-key-row .g-key-rect,
.g-map-key .g-key-row .g-key-circle {
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}
.g-map-key .g-key-row p {
  font: 500 0.9em/1.6 'nyt-franklin', arial, sans-serif;
  display: inline-block;
  vertical-align: middle;
  margin: -2px 0 0 0;
}
.viewport-small .g-map-key .g-key-row p {
  max-width: 92%;
}
.viewport-small-20 .g-map-key .g-key-row p {
  width: auto;
  max-width: none;
}
.g-map-key .g-key-row .g-key-rect {
  width: 22px;
  height: 10px;
}
.g-map-key .g-key-row .g-key-circle {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.g-map-key .g-key-row .g-key-custom {
  width: 20px;
  height: 20px;
  background-size: 100%;
  display: block;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -4px 2px 0 0;
}
.viewport-small .g-map-key .g-key-row-title p {
  width: 100%;
  max-width: none;
}
.g-red-dot,
.g-black-dot {
  display: inline-block;
  background: #d00;
  color: white;
  font-weight: bold;
  width: 20px;
  height: 20px;
  font: 700 14px/1.4 'nyt-franklin', arial, sans-serif;
  text-align: center;
  border-radius: 10px;
  line-height: 20px;
}
.g-black-dot {
  background: #222;
}
/* column text */
.g-column-container {
  max-width: 460px;
  margin: 20px auto 0 auto;
}
.viewport-medium .g-column-container {
  max-width: 1050px;
}
.viewport-large .g-column-container {
  margin-bottom: 30px;
}
.g-column-container .g-column-hed {
  font-family: 'nyt-franklin', arial, sans-serif;
  font-weight: 700;
  margin-bottom: 2px;
}
.g-column-container .g-column-col {
  vertical-align: top;
}
.viewport-small .g-column-container .g-column-col {
  display: block;
  min-width: 100%;
}
.viewport-medium .g-column-container .g-column-col {
  min-width: 0;
  display: inline-block;
  margin-right: 15px;
}
.viewport-medium .g-column-container .g-column-col:last-child {
  margin-right: 0;
}
.g-column-container .g-column-asset,
.g-column-container .g-column-image {
  margin-bottom: 8px;
}
.g-column-container .g-column-image img {
  width: 100%;
}
/* tables */
.g-table {
  margin: 0 auto;
  margin-bottom: 25px;
}
.g-table tr {
  border-bottom: 1px solid #ececec;
}
.g-table p {
  font: 500 14px/1.4 'nyt-franklin', arial, sans-serif;
  text-align: left;
  margin: 6px 0;
}
/* charts */
.g-chart {
  margin: 0 auto;
  margin-bottom: 25px;
  font: 500 14px/1.4 'nyt-franklin', arial, sans-serif;
}
.g-chart .g-chart-header {
  font-weight: bold;
}
.g-chart .g-chart-row,
.g-chart .g-chart-header {
  clear: both;
  height: 22px;
  margin-bottom: 9px;
}
.g-chart .g-chart-bar-container,
.g-chart .g-chart-label {
  float: left;
  height: 100%;
}
.g-chart .g-chart-bar-container {
  margin-left: 20px;
}
.g-chart .g-chart-bar-pos,
.g-chart .g-chart-bar-neg {
  height: 100%;
  float: left;
}
.g-chart .g-chart-label,
.g-chart .g-chart-bar {
  padding-top: 3px;
}
.g-chart .g-chart-label.not-first {
  margin-left: 20px;
}
.g-chart .g-chart-bar {
  height: 100%;
  background: lightsteelblue;
  position: relative;
}
.g-chart .g-chart-bar-label {
  padding-left: 6px;
}
.g-chart .g-chart-bar-neg .g-chart-bar {
  float: right;
}
.g-chart .g-chart-bar-neg .g-chart-bar-label {
  text-align: right;
  padding-right: 6px;
  padding-left: 0px;
}
.g-chart .out-label {
  padding-top: 3px;
  display: none;
}
.g-chart .outside .out-label {
  display: block;
}
.g-chart .outside .in-label {
  display: none;
}
.g-chart .g-bold {
  font-weight: bold;
}
/* grid */
.g-grid {
  margin-bottom: 15px;
}
.g-grid .g-grid-item {
  position: relative;
}
.g-grid .g-grid-item p {
  font: 500 15px/1.4 'nyt-franklin', arial, sans-serif;
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  margin-bottom: 0;
}
/* lazy images */
.g-freebird-lazy {
  display: block;
  width: 100%;
  height: auto;
}
.g-freebird-lazy.ll-init {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}
.g-freebird-lazy.ll-loaded {
  opacity: 1;
}
/* Mobile issues */
/* Get rid of border under intro and share tools on mobile */
.story-header.interactive-header {
  border-bottom: none !important;
}
/* Share tools issues */
/* Pad out the kicker/sharetool space */
.story.theme-main .story-header .story-meta .kicker-container {
  margin-bottom: 12px;
}
/* Override the moving sharetools on mobile */
.story.theme-main .story-header .story-meta .kicker-container .sharetools {
  position: relative;
  float: right;
  /*right: 0px;*/
  bottom: auto;
  left: auto;
  width: auto;
  margin-top: -6px;
  clear: none;
}
/* Maintain the proper space with the section name and kicker next to share tools */
.story.theme-main .story-header .story-meta .interactive-kicker {
  float: left;
  width: 70%;
  display: inline-block;
}
.g-graphic.g-graphic-freebird .g-ad-wrapper {
  margin: 30px auto;
  max-width: 1050px;
}
.viewport-medium .g-graphic.g-graphic-freebird .g-ad-wrapper {
  margin: 50px auto;
}
.g-graphic.g-graphic-freebird .g-ad-wrapper .ad {
  border-top: 1px solid #e2e2e2 !important;
  border-bottom: 1px solid #e2e2e2 !important;
  margin: 0 auto;
  padding: 10px 0;
  overflow: hidden;
  max-width: 100%;
}
.g-graphic.g-graphic-freebird .g-ad-wrapper .ad div {
  margin: 0 auto;
  display: block !important;
}
.g-graphic.g-graphic-freebird .g-ad-wrapper iframe {
  margin: 0 auto;
  display: block;
}
.g-graphic.g-graphic-freebird .g-ad-wrapper .g-ad-text {
  text-align: center;
  font: 500 12px/1.2 "nyt-franklin", arial, sans-serif;
  color: #bfbfbf;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.ad.top-ad {
  border: none;
  margin-left: auto;
  margin-right: auto;
}
/* Fix spacing at top of story */
.has-top-ad .story.theme-interactive,
.has-ribbon .story.theme-interactive {
  margin-top: 10px;
}

/* Fix comments button margin */
.story.theme-interactive .comments-button.theme-kicker {
  margin-top: 0;
}

/* Get rid of border under intro and share tools on mobile */
.page-interactive-default .story.theme-main .story-header {
  border-bottom: none;
}

/* Pad out the kicker/sharetool space */
.story.theme-interactive .story-meta .kicker {
  margin-bottom: 22px;
}

.viewport-medium-10 .story.theme-interactive .story-meta .kicker {
  margin-bottom: 24px;
}

/* Override the moving sharetools on mobile */
.story.theme-interactive .story-header .story-meta .kicker-container .sharetools {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  margin-top: -6px;
  float: right;
  clear: none;
}

/* Maintain the proper space with the section name and kicker next to share tools */
.story.theme-interactive .story-header .story-meta .interactive-kicker {
  float: left;
  width: 65%;
  display: inline-block;
}

/* Gets rid of the extra space under the intro that puts too much space there in mobile and desktop */
.page-interactive-default .story.theme-main .story-header {
  margin-bottom: 0;
}

.page-interactive-default .story.theme-main .story-header .story-meta {
  margin-bottom: 10px;
}

/*Fixes styling on share tools at bottom of minimal interactives*/
.story.theme-minimal .sharetools.layout-horizontal{
  width:auto;
  margin-top:11px;
}
.story.theme-minimal .sharetools.layout-horizontal .sharetool {
  display: inline-block;
  border-top: 0;
}
.story.theme-minimal .sharetools.layout-horizontal .sharetool:first-child a {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}
.story.theme-minimal .sharetools.layout-horizontal .sharetool a {
  padding-left: 15px;
  padding-right: 5px;
  height: 20px;
  border-left: 1px solid #e2e2e2;
}
.story.theme-minimal .sharetools.layout-horizontal .sharetool a:hover {
  background-color: transparent;  
}

/* uncomment to fix related content and footer layout on max_width: 720 pages */
/*
.related-coverage {
  max-width: 720px;
}

.viewport-medium-30 .page-footer nav ul,
.viewport-medium-50 .page-footer nav ul {
  margin-left: 28px;
}

.viewport-medium-30 .page-footer nav.last-nav {
  float: none;
}

.viewport-medium-30 .page-footer nav.last-nav ul {
  margin-left: 239px;
}
*/

/* remove left offset */
.viewport-medium-50 .masthead.masthead-theme-standard,
.viewport-large-20 .masthead.masthead-theme-standard {
  margin-left: 0;
}

.viewport-large-70 .masthead.masthead-theme-standard {
  margin-left: auto;
}

.viewport-medium-50 .masthead.masthead-theme-standard .quick-navigation,
.viewport-large-20 .masthead.masthead-theme-standard .quick-navigation {
  left: 15px;
}

#navigation-edge {
  display: none;
}

/* fullbleed #main */
#main {
  padding-left: 0;
  padding-right: 0;
}

.viewport-medium-10 #main {
  width: 100%;
  max-width: 100%;
}

/* constrain template containers */
.ad.top-ad {
  margin-left: 0;
  margin-right: 0;
}

.story-header.interactive-header,
.story.theme-main .story-footer,
.related-coverage {
  margin-left: 10px;
  margin-right: 10px;
}

.viewport-medium-10 .ad.top-ad,
.viewport-medium-10 .story-header.interactive-header,
.viewport-medium-10 .story.theme-main .story-footer,
.viewport-medium-10 .related-coverage {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.viewport-medium-30 .ad.top-ad,
.viewport-medium-30 .story-header.interactive-header,
.viewport-medium-30 .story.theme-main .story-footer,
.viewport-medium-30 .related-coverage {
  max-width: 945px;
}

.viewport-large-30 .ad.top-ad,
.viewport-large-30 .story-header.interactive-header,
.viewport-large-30 .story.theme-main .story-footer,
.viewport-large-30 .related-coverage {
  max-width: 1050px;
}

.g-body, .g-map-key, .g-asset-source, .g-table-container, .g-column-container, .g-asset-hed {
  padding-left: 10px;
  padding-right: 10px;
}

.viewport-large .g-body,
.viewport-large .g-map-key,
.viewport-large .g-asset-source,
.viewport-large .g-table-container,
.viewport-large .g-column-container,
.viewport-large .g-asset-hed {
  padding-left: 0;
  padding-right: 0;
}

/*
  Interactive Centered Headline
  ===================== */

.story.theme-interactive .story-meta .interactive-headline,
.story.theme-interactive .story-meta .story-meta-footer {
  text-align: center;
  /* optional max width container */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.story.theme-interactive .story-meta .byline-dateline {
  margin-right: 0;
}

.story.theme-interactive .story-header .story-meta .byline+.dateline {
  display: inline-block;
}


/*
  Embedded Interactive Centered Headline
  Insert scoop slug in place of scoop-slug-here to center
  ===================== */

/*
#scoop-slug-here .interactive-caption {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
*/

.g-graphic {
  position: relative;
  margin: 0 auto;
  max-width: 2000px;
}
.g-item {
  margin-left: auto;
  margin-right: auto;
}
.viewport-small-20 .g-item {
  margin-left: 20px;
  margin-right: 20px;
}
.story-footer {
  margin-left: 10px;
  margin-right: 10px;
}
.viewport-small-20 .story-footer {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% -  330px);
}
.viewport-large-30 .story-footer {
  max-width: 1050px;
}
.story-footer .sharetools {
  float: none;
}
.story-footer .interactive-credit:before {
  display: block;
  content: '';
  height: 1px;
  width: 70px;
  border-top: 1px solid #000;
  margin-top: 30px;
  margin-bottom: 30px;
}
.story-footer .interactive-credit p {
  font: 500 14px / 18px 'nyt-franklin', Arial, sans-serif;
}
.story-header.interactive-header {
  margin-top: 40px;
}
.viewport-medium .story-header.interactive-header {
  margin-top: 55px;
  margin-bottom: 20px;
}
.story-header.interactive-header .byline-dateline {
  text-align: center;
  float: none;
  line-height: 1.1rem;
  margin-top: 3px;
  margin-right: 0;
  margin-bottom: 13px;
}
.story-header.interactive-header .byline {
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
  font-style: normal;
  font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif;
}
.story-header.interactive-header .byline a {
  color: #000;
}
.story-header.interactive-header .byline.last-byline {
  margin-right: 7px;
}
.story-header.interactive-header .byline-author {
  white-space: nowrap;
}
.story-header.interactive-header .dateline {
  margin-left: 0;
  font-weight: 500;
  white-space: nowrap;
  font-size: 11px;
  line-height: 12px;
  font-style: normal;
  font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif;
  color: #000;
}
.story-header.interactive-header .dateline .timestamp {
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
  color: #a81817;
}
.story-heading.interactive-headline {
  font: 500 1.5rem / 1.625rem 'nyt-cheltenham', georgia, 'times new roman', times, serif;
  margin-bottom: 7px;
}
.viewport-medium .story-heading.interactive-headline {
  font: 500 35px / 41px 'nyt-cheltenham', georgia, 'times new roman', times, serif;
}
.g-item.g-video,
.g-item.g-grid {
  margin-top: 40px;
  margin-bottom: 20px;
}
.g-subhed + .g-item.g-video,
.g-subhed + .g-item.g-grid,
.g-text + .g-item.g-video,
.g-text + .g-item.g-grid {
  margin-top: 0px;
}
.g-item.g-video .g-harveymap,
.g-item.g-grid .g-harveymap {
  width: 100%;
  max-width: 130px;
  margin: 0 auto 20px auto;
}
.viewport-small-20 .g-item.g-video,
.viewport-small-20 .g-item.g-grid {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-right: 140px;
}
.viewport-small-20 .g-item.g-video .g-harveymap,
.viewport-small-20 .g-item.g-grid .g-harveymap {
  margin: 0 10px 0 0;
}
.g-item.g-video .g-grid-items,
.g-item.g-grid .g-grid-items,
.g-item.g-video .g-item-video,
.g-item.g-grid .g-item-video {
  position: relative;
  margin: 0 auto;
}
.g-item.g-video .g-grid-items:after,
.g-item.g-grid .g-grid-items:after,
.g-item.g-video .g-item-video:after,
.g-item.g-grid .g-item-video:after {
  display: block;
  content: '';
  border-bottom: 1px solid #999;
  height: 1px;
  margin: 20px auto;
  border-bottom: 1px solid #dcdcdc;
  width: calc(100% - 20px);
}
.viewport-small-20 .g-item.g-video .g-grid-items,
.viewport-small-20 .g-item.g-grid .g-grid-items,
.viewport-small-20 .g-item.g-video .g-item-video,
.viewport-small-20 .g-item.g-grid .g-item-video {
  width: calc(100% -  140px);
}
.viewport-small-20 .g-item.g-video .g-grid-items:after,
.viewport-small-20 .g-item.g-grid .g-grid-items:after,
.viewport-small-20 .g-item.g-video .g-item-video:after,
.viewport-small-20 .g-item.g-grid .g-item-video:after {
  display: none;
}
.viewport-small-20 .g-grid-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.viewport-small-20 .g-grid-items .g-grid-item {
  width: calc(50% - 2px);
}
.g-grid-items .g-grid-item:first-child {
  margin-bottom: 10px;
}
.viewport-small-20 .g-grid-items .g-grid-item:first-child {
  margin-bottom: 0;
}
.g-grid .g-grid-item .g-datelabel,
.g-datelabel {
  position: absolute;
  margin: 0;
  z-index: 100;
  top: 0px;
  bottom: auto;
  left: auto;
  right: auto;
  font: 400 13px / 1.1 'nyt-franklin', Arial, sans-serif;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 8px 11px;
}
.g-grid .g-grid-item .g-datelabel {
  right: 0px;
}
.viewport-small-20 .g-grid .g-grid-item .g-datelabel.g-datelabel-after {
  left: 0px;
  right: auto;
}
.g-item-video .g-datelabel {
  left: 50%;
}
.g-item-video .g-datelabel.g-datelabel-before {
  -webkit-transform: translateX(calc(-100% - 2px));
          transform: translateX(calc(-100% - 2px));
}
.g-item-video .g-datelabel.g-datelabel-after {
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
}
.g-videotape-vhs {
  cursor: pointer;
}
.g-button-play-wrapper {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid white;
  height: 90px;
  width: 90px;
  background-color: rgba(0, 0, 0, 0.73);
  cursor: pointer;
  pointer-events: none;
  transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.g-videotape-vhs:hover + .g-button-play-wrapper {
  background-color: #676767;
  -webkit-transform: scale(1.1, 1.1) translate(-45%, -45%);
          transform: scale(1.1, 1.1) translate(-45%, -45%);
}
.g-videotape-vhs.g-isplaying + .g-button-play-wrapper {
  display: none;
}
.g-button-play {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 55px;
  margin-left: 10px;
  margin-bottom: 10px;
  -webkit-filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.2));
}
.g-button-play polygon {
  stroke: #fff;
  stroke-miterlimit: 10;
  fill: #fff;
  stroke-width: 4px;
}
.g-datedivider {
  display: block;
  position: absolute;
  z-index: 99;
  background-color: #fff;
  left: calc(50% - 2px);
  width: 4px;
  height: 100%;
  pointer-events: none;
}
.g-credits {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.g-credits .g-credit {
  width: calc(50% - 2px);
}
.g-item.g-item .g-credit {
  position: static;
  font: 400 14px/1.1em 'nyt-cheltenham', Georgia, serif;
  color: #666;
  margin: 5px 0 0 0;
}
.g-item.g-item .g-credit.g-credit-before {
  margin-left: 10px;
}
.viewport-small-20 .g-item.g-item .g-credit.g-credit-before {
  margin-left: 0;
}
.g-item.g-item .g-credit.g-credit-after {
  text-align: right;
  margin-right: 10px;
}
.viewport-small-20 .g-item.g-item .g-credit.g-credit-after {
  margin-right: 0;
}
</style>



<div class="g-graphic g-graphic-freebird" data-preview-slug="harvey-beforeafter">

  

    

    
      <div class="g-item g-text ">
    

      <p class="g-body">Torrential rain has fallen on the Gulf Coast in the aftermath of Hurricane Harvey, leaving swaths of Houston and surrounding cities under water.</p>


    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Floodwaters on Thursday</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:41 -->
<!-- ai file: map14-rosenberg.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map14-rosenberg-box .g-artboard {
		margin:0 auto;
	}
	#g-map14-rosenberg-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map14-rosenberg-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map14-rosenberg-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map14-rosenberg-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map14-rosenberg-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:41 -->
<!-- ai file: map14-rosenberg.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map14-rosenberg-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map14-rosenberg-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map14-rosenberg-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:61.709%;margin-top:-6.7px;left:64.7423%;margin-left:-25%;width:52px;">
			<p class="g-pstyle1">Rosenberg</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:41 -->
<!-- ai file: map14-rosenberg.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">April 3, 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Rosenberg_TX_WV2_3APR2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Rosenberg_TX_WV2_3APR2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Rosenberg_TX_WV2_30AUG2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Rosenberg_TX_WV2_30AUG2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:37 -->
<!-- ai file: map13-simonton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map13-simonton-box .g-artboard {
		margin:0 auto;
	}
	#g-map13-simonton-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map13-simonton-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map13-simonton-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map13-simonton-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map13-simonton-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:37 -->
<!-- ai file: map13-simonton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map13-simonton-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map13-simonton-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map13-simonton-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:57.709%;margin-top:-6.7px;left:58.6051%;margin-left:-22.5%;width:47px;">
			<p class="g-pstyle1">Simonton</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:37 -->
<!-- ai file: map13-simonton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Nov. 20, 2016</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_GE1_20NOV2016-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_GE1_20NOV2016-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_WV2_30AUG2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_WV2_30AUG2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:37 -->
<!-- ai file: map13-simonton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map13-simonton-box .g-artboard {
		margin:0 auto;
	}
	#g-map13-simonton-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map13-simonton-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map13-simonton-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map13-simonton-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map13-simonton-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:37 -->
<!-- ai file: map13-simonton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map13-simonton-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map13-simonton-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map13-simonton-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:57.709%;margin-top:-6.7px;left:58.6051%;margin-left:-22.5%;width:47px;">
			<p class="g-pstyle1">Simonton</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:37 -->
<!-- ai file: map13-simonton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Nov. 20, 2016</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_GE1_20NOV2016_zoom-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_GE1_20NOV2016_zoom-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_WV2_30AUG2017_zoom-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Simonton_TX_WV2_30AUG2017_zoom-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.666744730679157">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:35 -->
<!-- ai file: map12-wharton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map12-wharton-box .g-artboard {
		margin:0 auto;
	}
	#g-map12-wharton-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map12-wharton-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map12-wharton-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map12-wharton-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map12-wharton-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:35 -->
<!-- ai file: map12-wharton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map12-wharton-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map12-wharton-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map12-wharton-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:61.709%;margin-top:-6.7px;left:58.8322%;margin-left:-20%;width:42px;">
			<p class="g-pstyle1">Wharton</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:35 -->
<!-- ai file: map12-wharton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Oct. 9, 2016</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Wharton_TX_WV2_9OCT2016-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Wharton_TX_WV2_9OCT2016-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.666744730679157">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Wharton_TX_WV2_30AUG2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Wharton_TX_WV2_30AUG2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.666744730679157">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:42 -->
<!-- ai file: map15-holidaylakes.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map15-holidaylakes-box .g-artboard {
		margin:0 auto;
	}
	#g-map15-holidaylakes-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map15-holidaylakes-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map15-holidaylakes-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map15-holidaylakes-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:42 -->
<!-- ai file: map15-holidaylakes.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map15-holidaylakes-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map15-holidaylakes-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map15-holidaylakes-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:71.3091%;margin-top:-13.3px;left:46.5881%;width:37px;">
			<p>Holiday</p>
			<p>Lakes</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:42 -->
<!-- ai file: map15-holidaylakes.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">April 3, 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Holiday_Lakes_TX_WV2_3APR2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Holiday_Lakes_TX_WV2_3APR2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.666744730679157">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Holiday_Lakes_TX_WV2_30AUG2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Holiday_Lakes_TX_WV2_30AUG2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.666744730679157">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:53 -->
<!-- ai file: map17-angleton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map17-angleton-box .g-artboard {
		margin:0 auto;
	}
	#g-map17-angleton-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map17-angleton-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map17-angleton-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map17-angleton-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:53 -->
<!-- ai file: map17-angleton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map17-angleton-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map17-angleton-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map17-angleton-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:64.709%;margin-top:-6.7px;left:48.6178%;width:43px;">
			<p>Angleton</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:53 -->
<!-- ai file: map17-angleton.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">April 6, 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Angleton_TX_WV2_6APR2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Angleton_TX_WV2_6APR2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Angleton_TX_WV2_30AUG2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Angleton_TX_WV2_30AUG2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:43 -->
<!-- ai file: map16-brookshire.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map16-brookshire-box .g-artboard {
		margin:0 auto;
	}
	#g-map16-brookshire-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map16-brookshire-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map16-brookshire-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map16-brookshire-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map16-brookshire-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:43 -->
<!-- ai file: map16-brookshire.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map16-brookshire-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map16-brookshire-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map16-brookshire-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:57.709%;margin-top:-6.7px;left:58.3112%;margin-left:-25%;width:52px;">
			<p class="g-pstyle1">Brookshire</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:43 -->
<!-- ai file: map16-brookshire.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Nov. 20, 2016</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Brookshire_TX_GE1_20NOV2016-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Brookshire_TX_GE1_20NOV2016-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6665105386416862">


        
          <p class="g-credit g-credit-before">Digital Globe</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Thursday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Brookshire_TX_WV2_30AUG2017-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/Brookshire_TX_WV2_30AUG2017-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.666744730679157">


        

        
          <p class="g-credit g-credit-after">Digital Globe</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Downtown Houston</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:04 -->
<!-- ai file: map-harvey06.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map-harvey06-box .g-artboard {
		margin:0 auto;
	}
	#g-map-harvey06-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map-harvey06-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map-harvey06-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map-harvey06-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:04 -->
<!-- ai file: map-harvey06.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map-harvey06-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map-harvey06-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map-harvey06-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:04 -->
<!-- ai file: map-harvey06.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-src="https://maps.googleapis.com/maps/api/streetview?size=600x400&pano=MHjiWUgMmqTqAd6HX_SLMg&&heading=96&pitch=1&fov=80&client=gme-nyt&signature=CSB6hIZcO78EA-BBQNWg5YdLeJg=">


        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Monday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey06-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey06-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6667248603351955">


        

        
          <p class="g-credit g-credit-after">Scott Dalton for The New York</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:03 -->
<!-- ai file: map2-university.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map2-university-box .g-artboard {
		margin:0 auto;
	}
	#g-map2-university-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map2-university-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map2-university-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map2-university-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:03 -->
<!-- ai file: map2-university.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map2-university-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map2-university-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map2-university-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:03 -->
<!-- ai file: map2-university.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/dowtown-aerial-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/dowtown-aerial-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.75">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Tuesday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/downtown-aerial-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/downtown-aerial-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.75">


        

        
          <p class="g-credit g-credit-after">David J. Phillip/Associated Press</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:03 -->
<!-- ai file: map2-university.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map2-university-box .g-artboard {
		margin:0 auto;
	}
	#g-map2-university-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map2-university-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map2-university-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map2-university-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:03 -->
<!-- ai file: map2-university.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map2-university-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map2-university-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map2-university-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:03 -->
<!-- ai file: map2-university.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-src="https://maps.googleapis.com/maps/api/streetview?size=600x355&pano=VWbfTiNAGKVeAn7PJoQiHg&heading=26&pitch=-3&fov=60&client=gme-nyt&signature=QUoduahsclQjEKHS81ZpfFtypZ4=">


        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Monday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey08-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey08-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.592219589257504">


        

        
          <p class="g-credit g-credit-after">LM Otero/Associated Press</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:06 -->
<!-- ai file: map2-tolerance.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map2-tolerance-box .g-artboard {
		margin:0 auto;
	}
	#g-map2-tolerance-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map2-tolerance-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map2-tolerance-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map2-tolerance-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:06 -->
<!-- ai file: map2-tolerance.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map2-tolerance-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map2-tolerance-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map2-tolerance-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:06 -->
<!-- ai file: map2-tolerance.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Dec. 2016</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-src="https://maps.googleapis.com/maps/api/streetview?size=600x400&pano=wrndh2PlTGm-miYpB-mifA&heading=359&pitch=0&fov=17&client=gme-nyt&signature=6WmleW43TJi9R6GNhCdvAMZu_AM=">


        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Monday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey04-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey04-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6666666666666666">


        

        
          <p class="g-credit g-credit-after">Scott Dalton for The New York Times</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Rockport</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map11-rockport-box .g-artboard {
		margin:0 auto;
	}
	#g-map11-rockport-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map11-rockport-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map11-rockport-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map11-rockport-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map11-rockport-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map11-rockport-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:66.709%;margin-top:-6.7px;left:55.3141%;margin-left:-21%;width:44px;">
			<p class="g-pstyle1">Rockport</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport1-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport1-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport1-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport1-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        

        
          <p class="g-credit g-credit-after">NOAA</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map11-rockport-box .g-artboard {
		margin:0 auto;
	}
	#g-map11-rockport-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map11-rockport-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map11-rockport-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map11-rockport-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map11-rockport-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map11-rockport-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:66.709%;margin-top:-6.7px;left:55.3141%;margin-left:-21%;width:44px;">
			<p class="g-pstyle1">Rockport</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport2-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport2-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport2-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport2-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        

        
          <p class="g-credit g-credit-after">NOAA</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map11-rockport-box .g-artboard {
		margin:0 auto;
	}
	#g-map11-rockport-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map11-rockport-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map11-rockport-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map11-rockport-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map11-rockport-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map11-rockport-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:66.709%;margin-top:-6.7px;left:55.3141%;margin-left:-21%;width:44px;">
			<p class="g-pstyle1">Rockport</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport3-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport3-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport3-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport3-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        

        
          <p class="g-credit g-credit-after">NOAA</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map11-rockport-box .g-artboard {
		margin:0 auto;
	}
	#g-map11-rockport-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map11-rockport-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map11-rockport-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle0 {
		letter-spacing:0.05em;
		text-align:center;
	}
	#g-map11-rockport-Artboard_2 .g-pstyle1 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map11-rockport-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map11-rockport-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map11-rockport-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:19.709%;margin-top:-6.7px;left:71.5177%;margin-left:-8.5%;width:19px;">
			<p class="g-pstyle0">LA.</p>
		</div>
		<div id="g-ai0-2" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:35.709%;margin-top:-6.7px;left:29.4167%;margin-left:-12%;width:26px;">
			<p class="g-pstyle0">TEX.</p>
		</div>
		<div id="g-ai0-3" class="g-Layer_13 g-aiAbs g-aiPointText" style="top:66.709%;margin-top:-6.7px;left:55.3141%;margin-left:-21%;width:44px;">
			<p class="g-pstyle1">Rockport</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-31 16:40 -->
<!-- ai file: map11-rockport.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport4-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport4-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport4-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/rockport4-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.613880742913001">


        

        
          <p class="g-credit g-credit-after">NOAA</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Meyerland</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map4-meyerland-box .g-artboard {
		margin:0 auto;
	}
	#g-map4-meyerland-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map4-meyerland-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map4-meyerland-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map4-meyerland-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map4-meyerland-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map4-meyerland-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map4-meyerland-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">June 2016</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-src="https://maps.googleapis.com/maps/api/streetview?size=600x400&pano=_5kPOUqzNrv2DUZ14y5I0Q&heading=190&pitch=1&client=gme-nyt&signature=tovYqVXLczkXC_eqoJssFdpvp8A=">


        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey01-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey01-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6666666666666666">


        

        
          <p class="g-credit g-credit-after">Alyssa Schukar for The New York Times</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-video ">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map4-meyerland-box .g-artboard {
		margin:0 auto;
	}
	#g-map4-meyerland-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map4-meyerland-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map4-meyerland-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map4-meyerland-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map4-meyerland-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map4-meyerland-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map4-meyerland-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>

<div class="g-item-video">

    
        <p class="g-datelabel g-datelabel-before">Dec. 2016</p>
    

     
        <p class="g-datelabel g-datelabel-after">Sunday</p>
    

    
        <div class="g-datedivider"></div>
    

    

    <div class="g-videotape-vhs" id="hurricanevid-flood_2" data-slug="flood_2"></div>

    <div class="g-button-play-wrapper">
        <svg class="g-button-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.25 89.2"><polygon id="80e23b7f-4369-4b6f-8ea1-eaeb6a11cf69" data-name="<Path>" class="d8132e9f-5a4b-42b3-9d0a-07264f7964b2" points="0.75 1.3 75.75 44.6 0.75 87.9 0.75 1.3"></polygon></svg>
    </div>

    

        <div class="g-credits">
        
            <p class="g-credit g-credit-before">Google Maps</p>
        

        
          <p class="g-credit g-credit-after">Alan Blinder</p>
        
        </div>
    


    


</div>

    </div>

    

    
      <div class="g-item g-video ">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map4-meyerland-box .g-artboard {
		margin:0 auto;
	}
	#g-map4-meyerland-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map4-meyerland-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map4-meyerland-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map4-meyerland-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map4-meyerland-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map4-meyerland-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map4-meyerland-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:09 -->
<!-- ai file: map4-meyerland.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>

<div class="g-item-video">

    
        <p class="g-datelabel g-datelabel-before">June 2016</p>
    

     
        <p class="g-datelabel g-datelabel-after">Sunday</p>
    

    
        <div class="g-datedivider"></div>
    

    

    <div class="g-videotape-vhs" id="hurricanevid-flood_3" data-slug="flood_3"></div>

    <div class="g-button-play-wrapper">
        <svg class="g-button-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.25 89.2"><polygon id="80e23b7f-4369-4b6f-8ea1-eaeb6a11cf69" data-name="<Path>" class="d8132e9f-5a4b-42b3-9d0a-07264f7964b2" points="0.75 1.3 75.75 44.6 0.75 87.9 0.75 1.3"></polygon></svg>
    </div>

    

        <div class="g-credits">
        
            <p class="g-credit g-credit-before">Google Maps</p>
        

        
          <p class="g-credit g-credit-after">Alan Blinder</p>
        
        </div>
    


    


</div>

    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Southbelt/Ellington</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:12 -->
<!-- ai file: map5-ellington.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map5-ellington-box .g-artboard {
		margin:0 auto;
	}
	#g-map5-ellington-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map5-ellington-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map5-ellington-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map5-ellington-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:12 -->
<!-- ai file: map5-ellington.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map5-ellington-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map5-ellington-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map5-ellington-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:55.7804%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:12 -->
<!-- ai file: map5-ellington.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Feb. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-src="https://maps.googleapis.com/maps/api/streetview?size=600x400&pano=fu39-fEPRosmGCLYyWOvyA&heading=130&pitch=3&client=gme-nyt&signature=TBrwyblQnHoWzc_IagXjsiXrZag=">


        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey03-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey03-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.6668571428571428">


        

        
          <p class="g-credit g-credit-after">Adrees Latif/Reuters</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Addicks Reservoir</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 13:59 -->
<!-- ai file: map3-addicks.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map3-addicks-box .g-artboard {
		margin:0 auto;
	}
	#g-map3-addicks-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map3-addicks-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map3-addicks-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map3-addicks-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 13:59 -->
<!-- ai file: map3-addicks.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map3-addicks-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map3-addicks-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map3-addicks-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:56.0632%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 13:59 -->
<!-- ai file: map3-addicks.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addics-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addics-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.7496757457846952">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Tuesday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addicks-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addicks-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.75">


        

        
          <p class="g-credit g-credit-after">David J. Phillip/Associated Press</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 13:59 -->
<!-- ai file: map3-addicks.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map3-addicks-box .g-artboard {
		margin:0 auto;
	}
	#g-map3-addicks-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map3-addicks-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map3-addicks-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map3-addicks-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 13:59 -->
<!-- ai file: map3-addicks.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map3-addicks-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map3-addicks-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map3-addicks-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:23.709%;margin-top:-6.7px;left:56.0632%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 13:59 -->
<!-- ai file: map3-addicks.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addicks2-before-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addicks2-before-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.750291715285881">


        
          <p class="g-credit g-credit-before">Google</p>
        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Tuesday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addicks2-after-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/addicks2-after-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.75">


        

        
          <p class="g-credit g-credit-after">David J. Phillip/Associated Press</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Mt. Royal Village</h2>


    </div>

    

    
      <div class="g-item g-grid row2">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:16 -->
<!-- ai file: map6-mt-royal.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map6-mt-royal-box .g-artboard {
		margin:0 auto;
	}
	#g-map6-mt-royal-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map6-mt-royal-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map6-mt-royal-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map6-mt-royal-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:16 -->
<!-- ai file: map6-mt-royal.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map6-mt-royal-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map6-mt-royal-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map6-mt-royal-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:48.709%;margin-top:-6.7px;left:51.862%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:16 -->
<!-- ai file: map6-mt-royal.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>


<div class="g-grid-items">
  
    <div class="g-grid-item">
      
        
          <p class="g-datelabel g-datelabel-before">Jan. 2017</p>
        

         


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-src="https://maps.googleapis.com/maps/api/streetview?size=600x336&pano=BF0z6HWA4XVravDt2zgdmQ&heading=90&pitch=-10&fov=70&client=gme-nyt&signature=YfnGi5fYtpP4qZpaqs2685xFRBI=">


        

        

      
      
      
    </div>
  
    <div class="g-grid-item">
      
        

         
          <p class="g-datelabel g-datelabel-after">Sunday</p>
        


        

<img  alt="" src="https://static01.nyt.com/packages/flash/multimedia/ICONS/transparent.png" class="g-freebird-lazy" data-pattern="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey07-{{size}}.jpg" data-pattern-retina="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/images/harvey07-{{size}}_x2.jpg" data-widths="[320,640,900,1254,2000]" data-ratio="0.5595716198125836">


        

        
          <p class="g-credit g-credit-after">Michael Wyke/European Pressphoto Agency</p>
        

      
      
      
    </div>
  
  
</div>



    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Interstate 610 and Market Street</h2>


    </div>

    

    
      <div class="g-item g-video ">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:18 -->
<!-- ai file: map7-market.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map7-market-box .g-artboard {
		margin:0 auto;
	}
	#g-map7-market-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map7-market-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map7-market-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map7-market-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:18 -->
<!-- ai file: map7-market.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map7-market-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map7-market-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map7-market-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:27.709%;margin-top:-6.7px;left:51.862%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:18 -->
<!-- ai file: map7-market.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>

<div class="g-item-video">

    
        <p class="g-datelabel g-datelabel-before">Dec. 2016</p>
    

     
        <p class="g-datelabel g-datelabel-after">Sunday</p>
    

    
        <div class="g-datedivider"></div>
    

    

    <div class="g-videotape-vhs" id="hurricanevid-flood_1" data-slug="flood_1"></div>

    <div class="g-button-play-wrapper">
        <svg class="g-button-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.25 89.2"><polygon id="80e23b7f-4369-4b6f-8ea1-eaeb6a11cf69" data-name="<Path>" class="d8132e9f-5a4b-42b3-9d0a-07264f7964b2" points="0.75 1.3 75.75 44.6 0.75 87.9 0.75 1.3"></polygon></svg>
    </div>

    

        <div class="g-credits">
        
            <p class="g-credit g-credit-before">Google Maps</p>
        

        
          <p class="g-credit g-credit-after">Levitate Apparel, via Instagram</p>
        
        </div>
    


    


</div>

    </div>

    

    
      <div class="g-item g-subhed ">
    

      <h2>Greater Heights</h2>


    </div>

    

    
      <div class="g-item g-video ">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:24 -->
<!-- ai file: map8-greatheights.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map8-greatheights-box .g-artboard {
		margin:0 auto;
	}
	#g-map8-greatheights-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map8-greatheights-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map8-greatheights-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map8-greatheights-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:24 -->
<!-- ai file: map8-greatheights.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map8-greatheights-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map8-greatheights-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map8-greatheights-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:27.709%;margin-top:-6.7px;left:51.862%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:24 -->
<!-- ai file: map8-greatheights.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>

<div class="g-item-video">

    
        <p class="g-datelabel g-datelabel-before">April 2017</p>
    

     
        <p class="g-datelabel g-datelabel-after">Sunday</p>
    

    
        <div class="g-datedivider"></div>
    

    

    <div class="g-videotape-vhs" id="hurricanevid-flood_5" data-slug="flood_5"></div>

    <div class="g-button-play-wrapper">
        <svg class="g-button-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.25 89.2"><polygon id="80e23b7f-4369-4b6f-8ea1-eaeb6a11cf69" data-name="<Path>" class="d8132e9f-5a4b-42b3-9d0a-07264f7964b2" points="0.75 1.3 75.75 44.6 0.75 87.9 0.75 1.3"></polygon></svg>
    </div>

    

        <div class="g-credits">
        
            <p class="g-credit g-credit-before">Google Maps</p>
        

        
          <p class="g-credit g-credit-after">Mitch Blitz</p>
        
        </div>
    


    


</div>

    </div>

    

    
      <div class="g-item g-video ">
    

      <div class="g-harveymap"><!-- SCOOP CSS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:25 -->
<!-- ai file: map9-greatheights.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<style type='text/css' media='screen,print'>
	#g-map9-greatheights-box .g-artboard {
		margin:0 auto;
	}
	#g-map9-greatheights-box .g-artboard p {
		margin:0;
	}
	.g-aiAbs {
		position:absolute;
	}
	.g-aiImg {
		display:block;
		width:100% !important;
	}
	.g-aiPointText p { white-space: nowrap; }
	#g-map9-greatheights-Artboard_2 {
		position:relative;
		overflow:hidden;
		width:100px;
	}
	#g-map9-greatheights-Artboard_2 p {
		font-family:nyt-franklin,arial,helvetica,sans-serif;
		font-weight:500;
		font-size:11px;
		line-height:13px;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.05em;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
	}
	#g-map9-greatheights-Artboard_2 .g-pstyle0 {
		text-align:center;
	}

</style>

<!-- SCOOP HTML -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:25 -->
<!-- ai file: map9-greatheights.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<div id="g-map9-greatheights-box" class="ai2html">

	<!-- Artboard: Artboard_2 -->
	<div id="g-map9-greatheights-Artboard_2" class="g-artboard g-artboard-v3" data-min-width='100'>
		<img id="g-ai0-0" class="g-aiImg" data-src="https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/map9-greatheights-Artboard_2.png" src="data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="/>
		<div id="g-ai0-1" class="g-map g-aiAbs g-aiPointText" style="top:27.709%;margin-top:-6.7px;left:51.862%;margin-left:-26%;width:54px;">
			<p class="g-pstyle0">HOUSTON</p>
		</div>
	</div>

</div>

<!-- SCOOP JS -->
<!-- Generated by ai2html v0.65.5 - 2017-08-29 14:25 -->
<!-- ai file: map9-greatheights.ai -->
<!-- preview: 2017-08-28-harvey-beforeafter -->
<!-- scoop: houston-before-and-after-hurricane-harvey -->
<script type="text/javascript">
	(function (scriptEnvironment, nameSpace) {
		// only want one resizer on the page
		if (document.documentElement.className.indexOf(nameSpace + "resizer-v3-init") > -1) return;
		document.documentElement.className += " " + nameSpace + "resizer-v3-init";
		// require IE9+
		if (!("querySelector" in document)) return;
		function updateSize() {
			var elements = Array.prototype.slice.call(document.querySelectorAll("." + nameSpace + "artboard-v3[data-min-width]")),
					widthById = {};
			elements.forEach(function(el) {
				var parent = el.parentNode,
						width = widthById[parent.id] || Math.round(parent.getBoundingClientRect().width),
						minwidth = el.getAttribute("data-min-width"),
						maxwidth = el.getAttribute("data-max-width");
				if (parent.id) widthById[parent.id] = width; // only if parent.id is set
				if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
					var img = el.querySelector("." + nameSpace + "aiImg");
					if (img.getAttribute("data-src") && img.getAttribute("src") != img.getAttribute("data-src")) {
						img.setAttribute("src", img.getAttribute("data-src"));
					}
					el.style.display = "block";
				} else {
					el.style.display = "none";
				}
			});

			if (scriptEnvironment=="nyt") {
				try {
					if (window.parent && window.parent.$) {
						window.parent.$("body").trigger("resizedcontent", [window]);
					}
					document.documentElement.dispatchEvent(new Event("resizedcontent"));
					if (window.require && document.querySelector("meta[name=sourceApp]") && document.querySelector("meta[name=sourceApp]").content == "nyt-v5") {
						require(["foundation/main"], function() {
							require(["shared/interactive/instances/app-communicator"], function(AppCommunicator) {
								AppCommunicator.triggerResize();
							});
						});
					}
				} catch(e) { console.log(e); }
			}
		}

		updateSize();

		window.addEventListener('nyt:embed:load', updateSize); // for nyt vi compatibility
		document.addEventListener("DOMContentLoaded", updateSize);

		window.addEventListener("resize", throttle(updateSize, 200));

		// based on underscore.js
		function throttle(func, wait) {
			var _now = Date.now || function() { return +new Date(); },
					timeout = null, previous = 0;
			var run = function() {
					previous = _now();
					timeout = null;
					func();
			};
			return function() {
				var remaining = wait - (_now() - previous);
				if (remaining <= 0 || remaining > wait) {
					if (timeout) {
						clearTimeout(timeout);
					}
					run();
				} else if (!timeout) {
					timeout = setTimeout(run, remaining);
				}
			};
		}
	})("nyt", "g-");
</script>
</div>

<div class="g-item-video">

    
        <p class="g-datelabel g-datelabel-before">Dec. 2016</p>
    

     
        <p class="g-datelabel g-datelabel-after">Sunday</p>
    

    
        <div class="g-datedivider"></div>
    

    

    <div class="g-videotape-vhs" id="hurricanevid-flood_4" data-slug="flood_4"></div>

    <div class="g-button-play-wrapper">
        <svg class="g-button-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.25 89.2"><polygon id="80e23b7f-4369-4b6f-8ea1-eaeb6a11cf69" data-name="<Path>" class="d8132e9f-5a4b-42b3-9d0a-07264f7964b2" points="0.75 1.3 75.75 44.6 0.75 87.9 0.75 1.3"></polygon></svg>
    </div>

    

        <div class="g-credits">
        
            <p class="g-credit g-credit-before">Google Maps</p>
        

        
          <p class="g-credit g-credit-after">Anna Nunez, via Twitter</p>
        
        </div>
    


    


</div>

    </div>

    

  

</div>

<script>
  var _gaq = _gaq || [];
  define('_nytg/harvey-beforeafter/assets', function() { return 'https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/'; });
  define('_nytg/harvey-beforeafter/big-assets', function() { return 'https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/assets/'; });
  define('_nytg/harvey-beforeafter/image-sizes',       function() { return [320,640,900,1254,2000]; });
  define('_nytg/harvey-beforeafter/video-sizes',       function() { return [320,640,900]; });
  require(['foundation/main'], function() {
    require(['https://static01.nyt.com/newsgraphics/2017/08/28/harvey-beforeafter/6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b/build.js']); // generated from src/script.js
  });
</script>
<!-- Pipeline: 2017-08-28-harvey-beforeafter | September 11, 2017, 02:50PM | 6dbef11e2b700d5b360c9d0bb7a2b762bd3f9c2b -->
</div>
        <footer class="story-footer">
          
          
          <div class="interactive-byline">
    <p class="byline-dateline">
      <span class="byline" itemprop="author creator" itemscope itemtype="http://schema.org/Person" itemid="https://www.nytimes.com/by/malachy-browne">
      By <a href="https://www.nytimes.com/by/malachy-browne" title="More Articles by Malachy Browne"><span class="byline-author" data-byline-name="MALACHY BROWNE" itemprop="name">MALACHY BROWNE</span></a>, 
    </span><span class="byline" itemprop="author creator" itemscope itemtype="http://schema.org/Person" itemid="https://www.nytimes.com/by/jugal-k-patel">
      <a href="https://www.nytimes.com/by/jugal-k-patel" title="More Articles by Jugal K. Patel"><span class="byline-author" data-byline-name="JUGAL K. PATEL" itemprop="name">JUGAL K. PATEL</span></a>, 
    </span><span class="byline" itemprop="author creator" itemscope itemtype="http://schema.org/Person" itemid="https://www.nytimes.com/by/sergio-pecanha">
      <a href="https://www.nytimes.com/by/sergio-pecanha" title="More Articles by Sergio Peçanha"><span class="byline-author" data-byline-name="SERGIO PEÇANHA" itemprop="name">SERGIO PEÇANHA</span></a>, 
    </span><span class="byline" itemprop="author creator" itemscope itemtype="http://schema.org/Person" itemid="https://www.nytimes.com/by/ainara-tiefenthaler">
      <a href="https://www.nytimes.com/by/ainara-tiefenthaler" title="More Articles by Ainara Tiefenthäler"><span class="byline-author" data-byline-name="AINARA TIEFENTHÄLER" itemprop="name">AINARA TIEFENTHÄLER</span></a>, 
    </span><span class="byline" itemprop="author creator" itemscope itemtype="http://schema.org/Person" itemid="https://www.nytimes.com/by/anjali-singhvi">
      <a href="https://www.nytimes.com/by/anjali-singhvi" title="More Articles by Anjali Singhvi"><span class="byline-author" data-byline-name="ANJALI SINGHVI" itemprop="name">ANJALI SINGHVI</span></a> and 
    </span><span class="byline last-byline" itemprop="author creator" itemscope itemtype="http://schema.org/Person" itemid="https://www.nytimes.com/by/josh-williams">
      <a href="https://www.nytimes.com/by/josh-williams" title="More Articles by Josh Williams"><span class="byline-author" data-byline-name="JOSH WILLIAMS" itemprop="name">JOSH WILLIAMS</span></a>
    </span>
      
    </p>
  </div>
          <div class="story-info interactive-credit"><p>Additional production by Evan Grothjan, Yuliya Parshina-Kottas and Scott Wolynski.</p></div>
          
          
        </footer>
        <section id="related-coverage" class="related-coverage nocontent robots-nocontent">
  <div class="nocontent robots-nocontent">
    <header>
      <h2 class="section-heading">More on NYTimes.com</h2>
    </header>
    <ul class="menu layout-horizontal theme-story">
      
    </ul>
  </div>
</section>
        <div class="accessibility-ad-header visually-hidden">
  <p>Advertisement</p>
</div>
<div id="BottomAd" class="ad bottom-ad nocontent robots-nocontent"></div>
      </article>
    </main>
    <footer id="page-footer" class="page-footer" role="contentinfo">
  <nav>
    <h2 class="visually-hidden">Site Information Navigation</h2>
    <ul>
      <li>
        <a href="http://www.nytimes.com/content/help/rights/copyright/copyright-notice.html" itemprop="copyrightNotice">
            &copy; <span itemprop="copyrightYear">2018</span><span itemprop="copyrightHolder provider sourceOrganization" itemscope itemtype="http://schema.org/Organization" itemid="http://www.nytimes.com"><span itemprop="name"> The New York Times Company</span><meta itemprop="tickerSymbol" content="NYSE NYT"/></span>
        </a>
      </li>
      <li class="visually-hidden">
        <a href="http://www.nytimes.com">Home</a>
      </li>
      <li class="visually-hidden">
        <a href="https://www.nytimes.com/search/">Search</a>
      </li>
      <li class="visually-hidden">Accessibility concerns? Email us at <a href="mailto:accessibility@nytimes.com">accessibility@nytimes.com</a>. We would love to hear from you.</li>
      <li class="wide-viewport-item">
        <a href="http://www.nytimes.com/ref/membercenter/help/infoservdirectory.html">Contact Us</a>
      </li>
      <li class="wide-viewport-item">
        <a href="http://www.nytco.com/careers">Work With Us</a>
      </li>
      <li class="wide-viewport-item">
        <a href="http://nytmediakit.com/">Advertise</a>
      </li>
      <li class="wide-viewport-item">
        <a href="http://www.nytimes.com/content/help/rights/privacy/policy/privacy-policy.html#pp">Your Ad Choices</a>
      </li>
      <li>
        <a href="http://www.nytimes.com/privacy">Privacy</a>
      </li>
      <li>
        <a href="http://www.nytimes.com/ref/membercenter/help/agree.html" itemprop="usageTerms">Terms of Service</a>
      </li>
      <li class="wide-viewport-item last-item">
        <a href="http://www.nytimes.com/content/help/rights/sale/terms-of-sale.html">Terms of Sale</a>
      </li>
    </ul>
  </nav>
  <nav class="last-nav">
    <h2 class="visually-hidden">Site Information Navigation</h2>
    <ul>
      <li>
        <a href="http://spiderbites.nytimes.com">Site Map</a>
      </li>
      <li>
        <a href="http://www.nytimes.com/membercenter/sitehelp.html">Help</a>
      </li>
      <li>
        <a href="https://myaccount.nytimes.com/membercenter/feedback.html">Site Feedback</a>
      </li>
      <li class="wide-viewport-item last-item">
        <a href="http://www.nytimes.com/subscriptions/Multiproduct/lp5558.html?campaignId=37WXW">Subscriptions</a>
      </li>
    </ul>
  </nav>
</footer>
  </div>
</div>
<script>
require(['foundation/main'], function () {
  require(['interactive/main']);
  require(['jquery/nyt', 'foundation/views/page-manager'], function ($, pageManager) {
    if (window.location.search.indexOf('disable_tagx') > 0) {
        return;
    }
    $(document).ready(function () {
        require(['https://a1.nyt.com/analytics/json-kidd.min.js'], function () {
            pageManager.trackingFireEventQueue();
        });
    });
  });
});
</script>
<script>
(function (w, d){
    // scoped state
    var MutationObserver = w.MutationObserver || w.WebKitMutationObserver || w.MozMutationObserver;
    var hasResized = false;
    var resizeFallbackDelay = 1500;
    var interactive = {
        id: '100000005398335',
        slug: 'houston-before-and-after-hurricane-harvey',
    };
    // vanilla JS $(document).ready()
    function ready(fn) {
        if (d.readyState != 'loading'){
            fn();
        } else {
            d.addEventListener('DOMContentLoaded', fn);
        }
    }
    // send resize message to parent
    function sendResizeMessage(opts){
        if (!(w.parent && w.parent.postMessage)) { return; }
        var rect, width, height, message;
        rect = d.documentElement.getBoundingClientRect();
        width = Math.ceil(rect.width);
        height = Math.ceil(rect.height);
        message = {
            type: 'resize',
            id: interactive.id,
            width: width,
            height: height
        };
        w.parent.postMessage(message, '*');
        // don't update hasResized if this message was forced
        if (opts && opts.forced) { return; }
        hasResized = true;
    }
    // send message to parent to indicate that this interactive is listening for messages
    function sendListeningMessage(){
        if (!(w.parent && w.parent.postMessage)) { return; }
        var message = {
            type: 'listening',
            id: interactive.id,
        };
        w.parent.postMessage(message, '*');
    }
    // observe mutations to the interactive graphics node and send resize message
    function initializeMutationObservers(){
        if (!MutationObserver) { return; }

        // select the target node
        var target = d.getElementById(interactive.slug);
        if (!target) { return; }
        // create an observer instance
        var observer = new MutationObserver(sendResizeMessage.bind(null, null));
        // configuration of the observer
        var config = {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true,
        };
        // pass in the target node, as well as the observer options
        observer.observe(target, config);
    }
    // update theme in response to message from parent
    function updateTheme(previous, current){
        var root = d.documentElement;
        if (!(previous && current && root)) { return; }
        root.classList.remove(previous);
        root.classList.add(current);
    }
    // handle messages from parent
    function onMessage(event) {
        var data = event.data;
        var type = data.type;
        if (type === 'themechange') {
            if (data.previous && data.current) {
                updateTheme(data.previous, data.current);
            }
        }
    }
    // hook into the resizedcontent event that some embedded interactives dispatch
    function attachEventListeners(){
        d.documentElement.addEventListener('resizedcontent', sendResizeMessage.bind(null, null));
    }
    // always resize at least once
    // @see https://a1.nyt.com/assets/interactive/20170123-034410/js/shared/interactive/views/app-communicator.js
    function initializeResizeFallback(){
        if (!hasResized) {
            setTimeout(sendResizeMessage.bind(null, null), resizeFallbackDelay);
        }
    }
    // initialize the interactive if it has been embedded
    function init() {
        if (w.parent) {
            sendResizeMessage({ forced: true });
            attachEventListeners();
            initializeMutationObservers();
            initializeResizeFallback();
        }
    }
    // initialization that should occur before DOMContentLoaded
    function preReady() {
        if (w.parent) {
            w.addEventListener('load', sendResizeMessage.bind(null, { forced: true }));
            w.addEventListener('message', onMessage, false);
            sendListeningMessage();
        }
    }
    preReady();
    ready(init);
})(window, document);
</script>
<script src="https://tags.bluekai.com/site/50550?ret=js&limit=1" type="text/javascript" async></script>
<script src="https://cdn.optimizely.com/public/3013110282/s/article_prod.js" type="text/javascript" async></script>
<div id="Inv1" class="ad inv1-ad hidden"></div>
<div id="Inv2" class="ad inv2-ad hidden"></div>
<div id="Inv3" class="ad inv3-ad hidden"></div>
<div id="ab1" class="ad ab1-ad hidden"></div>
<div id="ab2" class="ad ab2-ad hidden"></div>
<div id="ab3" class="ad ab3-ad hidden"></div>
<div id="prop1" class="ad prop1-ad hidden"></div>
<div id="prop2" class="ad prop2-ad hidden"></div>
<div id="Anchor" class="ad anchor-ad hidden"></div>
<div id="ADX_CLIENTSIDE" class="ad adx-clientside-ad hidden"></div
</body>
</html>