+
+ 
+ Stack View requires jQuery and two additional plugins to enable further functionality. These plugins are bundled with jquery.stackview.min.js and do not need to be included separately.
+A small set of images is also necessary for drawing the stack. They can be found in the lib/images directory.
+ +You can start by looking at the most basic demo.
+After including the required files, place a div in your html code where you would like Stack View to appear.
++ <div id="stackview"></div> ++
In your javascript, create some data for Stack View to use.
+
+var data = {
+ "start": "-1", // -1 start value signifies the end of a stack
+ "limit": "0",
+ "num_found": "2",
+ "docs": [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+};
+
+ Then call the Stack View plugin using a jQuery selector.
+
+ $('#stackview').stackView({data: data});
+
+ Alternately, you can give Stack View a url. The url should point to a JSON file with data formatted as above or a script that accepts a callback and a start parameter and returns a JSON object. A script is useful for continually feeding Stack View new data as the user scrolls. Basically Stack View's version of paging.
+
+ $('#stackview').stackView({url: 'data.php'});
+
+ This is the most basic example using PHP. +
+ $start = $_GET['start'];
+
+ $docs = '[
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ }
+ ]';
+
+ if($start > 0) {
+ echo "{'start': '-1', 'num_found': '0', 'limit': '0', 'docs': ''}";
+ }
+ else {
+ echo "{'start': '0', 'limit': '0', 'num_found': '1', 'docs': $docs}";
+ }
+
+ A JSON object used to construct a static stack. Stack View requires either a data object or a url, but not both.
+The URL should point to a JSON file or a script that accepts a callback and start parameter and then provides Stack View with JSON formatted data. Stack View requires either a data object or a url, but not both.
+This option, when set to true, tells Stack View to send a JSONP request to the url specified. If using JSONP, make sure that the specified url accepts a callback and includes that callback as part of the JSONP response.
+
Default is false.
How many books will be requested.
+
Default is 10.
How much screen space to fill with books.
+
Default is 1000.
Pixels per page.
+
Default is 0.11.
Pixels per centimeter.
+
Default is 12.
The type of search that the script from your url parameter should perform if a search is necessary.
+
Default is keyword.
The query that the script from your url should use if performing a search.
+
Default is nothing.
+
The text that will appear in the ribbon at the top of the stack.
+
Default is Stack View.
+
+ A stack made up of book search results from the Amazon API. The amazon.php file performs the search, formats and feeds the results to Stack View.
+Each book's Amazon Sales Rank is roughly sorted into one of ten groups that make up the heatmapping.
+Include an empty div in the page.
++ <div id="amazon-stack"></div> ++
Then call the Stack View plugin using a jQuery selector.
+
+ $('#amazon-stack').stackView({
+ url: 'php/amazon.php',
+ query: 'memory',
+ ribbon: 'Amazon search for "memory"'
+ });
+
+ To use Stack View with the Amazon API, save a copy of the file keys.php.example as keys.php and fill in the required API keys.
+Note that Amazon's API now limits to 100 results.
+A keyword search using the WorldCat API. The worldcat.php file performs the search, formats and feeds the results to Stack View.
+The number of libraries that hold each book is roughly sorted into one of ten groups that make up the heatmapping. This operation is very slow.
+Include an empty div in the page.
++ <div id="worldcat-stack"></div> ++
Then call the Stack View plugin using a jQuery selector.
+
+ $('#worldcat-stack').stackView({
+ url: 'php/worldcat.php',
+ jsonp: true,
+ query: 'modern pirates',
+ ribbon: 'WorldCat search for "modern pirates"'
+ });
+
+ This example utilizes JSONP. See the associated worldcat.php script for code that will return a JSONP response.
+To use Stack View with the WorldCat API, save a copy of the file keys.php.example as keys.php and fill in the required API key.
+A keyword search using the Google API. The google.php file performs the search, formats and feeds the results to Stack View.
+The user ratings are roughly sorted into one of ten groups that make up the heatmapping. Since Google rarely provides the height of the book, these are mostly randomized.
+Include an empty div in the page.
++ <div id="google-stack"></div> ++
Then call the Stack View plugin using a jQuery selector.
+
+ $('#google-stack').stackView({
+ url: 'php/google.php',
+ query: 'time travel',
+ ribbon: 'Google search for "time travel"'
+ });
+
+ Note that, according to Google Books API documentation, the totalItems count is an estimate. This causes the Stack View items count to change as the user scrolls.
+To use Stack View with the Google API, save a copy of the file keys.php.example as keys.php and fill in the required API key.
+A keyword search using the DPLA API. The dpla.php file performs the search, formats and feeds the results to Stack View.
+Checkouts are roughly sorted into one of ten groups that make up the heatmapping.
+Include an empty div in the page.
++ <div id="dpla-stack"></div> ++
Then call the Stack View plugin using a jQuery selector.
+
+ $('#dpla-stack').stackView({
+ url: 'php/dpla.php',
+ query: 'history',
+ ribbon: 'DPLA search for "history"'
+ });
+
+ Note that much of the data from DPLA is currently dummy data.
+A manually created static stack. The static.json file feeds a JSON object to Stack View. The heatmapping is manually entered here (a digit from 1 to 100).
+Note that you can also start with the most basic demo.
+Include an empty div in the page.
++ <div id="static-stack"></div> ++
Then call the Stack View plugin using a jQuery selector.
+
+ $('#static-stack').stackView({
+ url: 'json/static.json',
+ ribbon: 'Static stack'
+ });
+
+ Example JSON
+
+{
+ "start": "-1",
+ "limit": "0",
+ "num_found": "2",
+ "docs": [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+}
+
+
+
+ Stack View is a book visualization and browsing tool. This jQuery plugin turns metadata into a browsable stack of books.
+Stack View is drawn with CSS. When possible, the height of the book is based on the actual height of the object and the width is calculated using the page count. The color can be based on any data from ratings and rankings to library checkouts or holdings. The darker the color the higher the rating.
+
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ }
+
+