zoom level Block viewer v2 (zoom 10, with style buttons!)

<!DOCTYPE html>
<html>
  <head>
    <title>CARTO Locations | Training</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
    
    <link rel="stylesheet" href="https://cdn.rawgit.com/azavea/Leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.css" />

</head>
  <body>

<div id="map"></div>
    
    
    <div id="readout">
      <b>Tract:</b> zoom 0-9 <br>
      <b>Block:</b> zoom 10+ <br>
      
			<button id='bluebutton'>Blue</button> <button id='redbutton'>Red</button>
    </div>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/azavea/leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.js"></script>
    
    
    <script type="infowindow/html" id="infowindow_template">
      <div class="cartodb-popup v2">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
        <div class="cartodb-popup-content-wrapper">
          <div class="cartodb-popup-content">
            <h2>GEOID:</h2>
            <p>{{geoid10}}</p>
            <h2>ACFOSW_200:</h2>
            <p>{{acfosw_200}}</p>
          </div>
          <div class="cartodb-popup-tip-container"></div>
        </div>
      </div>
    </script>

<script type="text/cartocss" id="styleTurboCounty">
      #layer [zoom<=6]{
        polygon-fill: ramp([acfosw_200], (#ffc6c4, #ee919b, #cc607d, #9e3963, #672044), quantiles);
        line-width: 1;
        line-color: #FFF;
        line-opacity: 0.5;
      }
    </script>
    <script type="text/cartocss" id="styleCounty">
      /** choropleth visualization */
      #county_data_all [zoom<=4]{
        polygon-fill: #FFFFB2;
        polygon-opacity: 0.8;
        line-color: #FFF;
        line-width: 0.5;
        line-opacity: 1;
        [ acfosw_200 <= 8.81153732953988] {
           polygon-fill: #BD0026;
        }
        [ acfosw_200 <= 5.82956175364112] {
           polygon-fill: #F03B20;
        }
        [ acfosw_200 <= 5.12560788844407] {
           polygon-fill: #FD8D3C;
        }
        [ acfosw_200 <= 4.77967607105538] {
           polygon-fill: #FECC5C;
        }
        [ acfosw_200 <= 4.30296208007769] {
           polygon-fill: #FFFFB2;
        }
      }
    </script>
    
    <script type="text/cartocss" id="styleTurboTract">
      #layer {/*[zoom>=7]{*/
        polygon-fill: ramp([acfosw_200], (#ffc6c4, #ee919b, #cc607d, #9e3963, #672044), quantiles);
        line-width: 0.1;
        line-color: #FFF;
        line-opacity: 0.5;
      }
    </script>
    <script type="text/cartocss" id="styleTract">
      /* 4.889950354275755,4.999128021043575,5.37428983105258,6.02742750350594,9 */
      #layer [zoom<=9]{
        polygon-fill: #FFFFB2;
        polygon-opacity: 0.8;
        line-color: #FFF;
        line-width: 0.5;
        [zoom<=5]{line-width: 0.05;line-opacity:0.2}
        line-opacity: 0.5;
          
        [acfosw_200 < 9]{
          polygon-fill: #BD0026;
        }  
        [acfosw_200 < 6.02742750350594]{
          polygon-fill: #F03B20;
        }
        [acfosw_200 < 5.37428983105258]{
          polygon-fill: #FD8D3C;
        }
        [acfosw_200 < 4.999128021043575]{
          polygon-fill: #FECC5C;
        }
        [acfosw_200 < 4.889950354275755]{
          polygon-fill: #FFFFB2;
        }
      }
    </script>
    <script type="text/cartocss" id="styleTractBlue">
      /* 4.889950354275755,4.999128021043575,5.37428983105258,6.02742750350594,9 */
      #layer [zoom<=9]{
        polygon-fill: #FFFFB2;
        polygon-opacity: 0.8;
        line-color: #FFF;
        line-width: 0.5;
        [zoom<=5]{line-width: 0.05;line-opacity:0.2}
        line-opacity: 0.5;
          
        [acfosw_200 < 9]{
          polygon-fill: #0c2c84;
        }  
        [acfosw_200 < 6.02742750350594]{
          polygon-fill: #2377b4;
        }
        [acfosw_200 < 5.37428983105258]{
          polygon-fill: #41b6c4;
        }
        [acfosw_200 < 4.999128021043575]{
          polygon-fill: #a5dbb8;
        }
        [acfosw_200 < 4.889950354275755]{
          polygon-fill: #ffffcc;
        }
      }
    </script>
    
    
    <script type="text/cartocss" id="styleBlock">
      #layer [zoom>9]{
        polygon-fill: #FFFFB2;
        polygon-opacity: 0.8;
        line-color: #FFF;
        line-width: 0.5;
        line-opacity: 0.5;
          
        [acfosw_200 < 9]{
          polygon-fill: #BD0026;
        }  
        [acfosw_200 < 6]{
          polygon-fill: #F03B20;
        }
        [acfosw_200 < 5]{
          polygon-fill: #FD8D3C;
        }
        [acfosw_200 < 4]{
          polygon-fill: #FECC5C;
        }
        [acfosw_200 < 3]{
          polygon-fill: #FFFFB2;
        }
      }
    </script>
    <script type="text/cartocss" id="styleBlockBlue">
      #layer [zoom>9]{
        polygon-fill: #FFFFB2;
        polygon-opacity: 0.8;
        line-color: #FFF;
        line-width: 0.5;
        line-opacity: 0.5;
          
        [acfosw_200 < 9]{
          polygon-fill: #0c2c84;
        }  
        [acfosw_200 < 6]{
          polygon-fill: #2377b4;
        }
        [acfosw_200 < 5]{
          polygon-fill: #41b6c4;
        }
        [acfosw_200 < 4]{
          polygon-fill: #a5dbb8;
        }
        [acfosw_200 < 3]{
          polygon-fill: #ffffcc;
        }
      }
    </script>

</body>
</html>

Updated missing url https://cdn.rawgit.com/azavea/Leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.js to https://cdn.jsdelivr.net/gh/azavea/leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.js

https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js

https://cdn.rawgit.com/azavea/Leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.js