zoom level county/tract/block viewer

<!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">
      <s><b>County:</b> zoom 0-4 </s><br>
      <b>Tract:</b> zoom 0-12 <br>
      <b>Block:</b> zoom 12+
    </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<=11]{
        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="styleBlock">
      #layer [zoom>11]{
        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>

// get styles & query
          var styleTurboCounty = $("#styleTurboCounty").text(),
              styleCounty = $("#styleCounty").text(),
              
              styleTurboTract = $("#styleTurboTract").text(),
              styleTract = $("#styleTract").text(),
              
              styleBlock = $("#styleBlock").text(),
              
              queryCounty = $("#queryCounty").text(),
              queryTract = $("#queryTract").text(),
              queryBlock = $("#queryBlock").text(),

// declare map variable
              map = L.map('map', { 
                  zoomControl: true,
                  center: [41.9, -87.7],
                  zoom: 5
                  });

// add basemap
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

// add cartodb layer
        cartodb.createLayer(map, {
          user_name: 'fcc-fbd-admin',
          type: 'cartodb',
          sublayers: [/*{
            sql: queryCounty,
            cartocss: styleCounty
          },*/
          {
            sql: queryTract,
            cartocss: styleTract,
            interactivity: ['acfosw_200', 'geoid10']
          },
          {
            sql: queryBlock,
            cartocss: styleBlock
          }]
        }).addTo(map)
        .done(function(layer){

/* declare sublayer variable */
          var firstLayer = layer.getSubLayer(0),
              secondLayer = layer.getSubLayer(1);

// set layer interactivity
          firstLayer.setInteractivity("geoid10, acfosw_200");
          firstLayer.setInteraction(true);
          secondLayer.setInteractivity("geoid10, acfosw_200");
          secondLayer.setInteraction(true);
        
          // add popup
          cdb.vis.Vis.addInfowindow(
            map, layer, ["acfosw_200", "geoid10"],
            {
               infowindowTemplate: $('#infowindow_template').html()
            });
          
          /* add button action
          $('button').on('click', function() {
            var new_style = style.replace('marker-width: 10;','marker-width: ramp([pop_max], range(3,25), quantiles(7));');
            cityLayer.setCartoCSS(new_style);
          });//*/
          
        });
      }
    window.onload = main;
    </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