Loading Google Doc with Tabletop

HTML

<script src="https://raw.github.com/jsoma/tabletop/master/src/tabletop.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/desandro/isotope/master/css/style.css">
    <div id="table_info" class="isotope"></div>
    
    <h2>Container</h2>
    <div id="container">
  <div class="item w1 h1"></div>
</div>
    
    <h2>Items</h2>
    <ul id="items"></ul>

CSS

#container {
  padding: 5px;
  margin: 0 auto;
  border: 2px solid black;
}

.item {
  float: left;
  background: #CCC;
  margin: 5px;
  width: 50px;
  height: 50px;
}
.item.w1 { width: 110px; }
.item.h1 { height: 110px; }

.item.w2 { width: 220px; }
.item.h2 { height: 220px; }

JavaScript

// window.onload = function() { init() };
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1iM02swG3SF63RG5sLhrSVITDYduqCT0FzSf68GyJSLg&output=html';

$(document).ready(function() {
    Tabletop.init({
        key: public_spreadsheet_url,
        callback: showInfo,
        wanted: ["Sheet 1"],
        debug: true
    })
})



var $container = $('#container').isotope({
    // options
    itemSelector: '.item',
    layoutMode: 'fitRows'
});

function showInfo(data, tabletop) {
    $("#table_info").text("We found the tables " + tabletop.model_names.join(", "));

    $.each(tabletop.sheets(), function(i, sheet) {
        $("#table_info").append("<p><small>" + sheet.name + " has " + sheet.column_names.join(", ") + "</small></p>");
    });

    $.each(tabletop.sheets("Sheet 1").all(), function(i, item) {
        var items = '';
        var item = $('<div class="item w2 h2"><a href='+item.link + ' target=_blank>' + item.title + '</a></div>')
        $container.prepend(item).isotope('addItems', item)
        // item_li.append(item.via);
        .isotope('updateSortData', $container.children())
        // sort and apply new layout
        .isotope();
    })
    // item_li.appendTo("#container");.isotope('addItems', $newItems)
}