CINXE.COM

<!DOCTYPE html><html lang="en"><head><title>Unstacked SLSA</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta property='og:url' content='https://unstacked.slsa.sa.gov.au/' /> <meta property='og:type' content='website' /> <meta property='og:title' content='SLSA Unstacked' /> <meta property='og:description' content='A real-time visualisation of the items our customers are looking at in the State Library of South Australia's collection.' /> <meta name='description' content='A real-time visualisation of the items our customers are looking at in the State Library of South Australia's collection.' /> <meta property='og:image' content='https://unstacked.slsa.sa.gov.au/site/img/State-Library-South-Australia-Unstacked-Real-Time-Visualisation.jpg' /> <meta property='og:image:width' content='1800' /> <meta property='og:image:height' content='945' /> <meta name='twitter:card' content='summary_large_image' /> <link href='site/css/style.min.css?b=7' rel='stylesheet' type='text/css' /> <link href='site/css/quicksettings_tiny.min.css?b=7' rel='stylesheet' type='text/css' /> <script async src="https://www.googletagmanager.com/gtag/js?id=G-D6WVT3C8HK"></script><script>if( window.location.hostname.indexOf("unstacked.slsa.sa.gov.au") != -1 ) { console.log("UNSTKD Initialising GA"); window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-D6WVT3C8HK', {}); //'debug_mode':false }</script></head><body><div id="unstacked" class="prd"><svg viewBox="0 0 0 0" version="1.1" width="0px" height="0px" style="display:block; visibility:hidden"><defs><filter id="svg_ds_filter" x="0" y="0"><feOffset result="offOut" in="SourceAlpha" dx="0" dy="1"/><feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"/><feBlend in="SourceGraphic" in2="blurOut" mode="normal"/></filter><g id="toggle_button_widget"><linearGradient id="SVGID_1_GRAD" gradientUnits="userSpaceOnUse" x1="2.9039" y1="2.9038" x2="12.0963" y2="12.0962"><stop offset="0" style="stop-color:#231F20"/><stop offset="1" style="stop-color:#595A5C"/></linearGradient><circle fill="url(#SVGID_1_GRAD)" cx="7.5" cy="7.5" r="6.5"/><g><circle opacity="0" fill="#abs" cx="8.682" cy="8.682" r="4.491"/><circle opacity="0.0417" fill="#1A1A1A" cx="8.485" cy="8.485" r="4.511"/><circle opacity="0.0833" fill="#1A1A1A" cx="8.288" cy="8.288" r="4.53"/><circle opacity="0.125" fill="#1A1A1A" cx="8.091" cy="8.091" r="4.55"/><circle opacity="0.1667" fill="#1A1A1A" cx="7.894" cy="7.894" r="4.57"/><circle opacity="0.2083" fill="#1A1A1A" cx="7.697" cy="7.697" r="4.589"/><circle opacity="0.25" fill="#1A1A1A" cx="7.5" cy="7.5" r="4.609"/></g><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="4.4081" y1="4.4081" x2="10.5919" y2="10.5919"><stop offset="0" style="stop-color:#6E7072"/><stop offset="1" style="stop-color:#424143"/></linearGradient><circle fill="url(#SVGID_4_)" cx="7.5" cy="7.5" r="4.373"/></g><g id="toggle_button_widget_selected"><linearGradient id="toggle_but_selected_grad" gradientUnits="userSpaceOnUse" x1="4.4081" y1="4.4081" x2="10.5919" y2="10.5919"><stop offset="0" style="stop-color:#ec8b4e"/><stop offset="1" style="stop-color:#ec6915"/></linearGradient><circle id="toggle_fill" fill="url(#toggle_but_selected_grad)" cx="7.5" cy="7.5" r="4.373"/></g><g id="close-icon-svg"><g><path stroke="none" d="M20.384,17.556l-7.071-7.071l7.071-7.071c0.781-0.781,0.781-2.048,0-2.828c-0.781-0.781-2.048-0.781-2.828,0 l-7.071,7.071L3.414,0.586c-0.781-0.781-2.048-0.781-2.828,0s-0.781,2.048,0,2.828l7.071,7.071l-7.071,7.071 c-0.781,0.781-0.781,2.048,0,2.828c0.781,0.781,2.048,0.781,2.828,0l7.071-7.071l7.071,7.071c0.781,0.781,2.048,0.781,2.828,0 C21.165,19.604,21.165,18.337,20.384,17.556z"/></g></g><g id="anchor-svg"><path d="M470,640.2c24.6,23.4,24.6,61.8,0,85.2c-23.4,23.4-61.8,23.4-85.2,0c-117-117-117-307.2,0-424.2l0,0 L597.1,88.8c117-117,307.2-117,424.2,0s117,307.2,0,424.2L932,602.3c0.6-49.2-7.2-98.4-24-145.2l28.2-28.8 c70.8-70.2,70.8-184.2,0-254.4c-70.2-70.8-184.2-70.8-254.4,0L470,385.8C399.1,456,399.1,570,470,640.2 M639.1,385.8 c23.4-23.4,61.8-23.4,85.2,0c117,117,117,307.2,0,424.2l0,0L512,1022.3c-117,117-307.2,117-424.2,0s-117-307.2,0-424.2l89.4-89.4 c-0.6,49.2,7.2,98.4,24,145.8L173,682.8c-70.8,70.2-70.8,184.2,0,254.4c70.2,70.8,184.2,70.8,254.4,0l211.8-211.8 c70.8-70.2,70.8-184.2,0-254.4C614.5,447.6,614.5,409.2,639.1,385.8z"/></g></defs></svg><div id="header"><div class="main"><div class="unstkd_logo"><img class="undragable" src="site/img/slsa_unstkd_logo_dark.svg"></div><div class="tagline"><h2>The stories that make us - told by you</h2><p class="blurb">A real-time visualisation of the items you, our customers, are looking at in the library's collection</p></div><div class="padd"></div> <div class="btn settings unselectable" title="Use filters to change what you see">USE FILTERS</div><div class="btn about unselectable" title="Information about the project">ABOUT</div> <div class="logos"><div class="logo"><a href="https://www.sa.gov.au" target="_blank"><img class="undragable" src="site/img/sa_gov_logo_mini.svg"></a></div><div class="logo"><a href="https://www.slsa.sa.gov.au" target="_blank"><img class="undragable" src="site/img/slsa_logo_mini.svg"></a></div></div><div class="padd second"></div><div class="hamburger"><svg id="hamburger_button" width="24px" height="24px" viewBox="0 0 22 22"><g transform="translate(0,4)"><path stroke="none" d="M18.765,4H2C0.896,4,0,3.104,0,2s0.896-2,2-2h16.765c1.104,0,2,0.896,2,2S19.869,4,18.765,4z"/><path stroke="none" d="M18.765,10.293H2c-1.104,0-2-0.896-2-2s0.896-2,2-2h16.765c1.104,0,2,0.896,2,2S19.869,10.293,18.765,10.293z"/><path stroke="none" d="M18.765,16.586H2c-1.104,0-2-0.896-2-2s0.896-2,2-2h16.765c1.104,0,2,0.896,2,2S19.869,16.586,18.765,16.586z"/></g></svg></div></div><div class="mobile_menu" style="display:none"><div class="btn settings unselectable" title="Use filters to change what you see">USE FILTERS</div><div class="btn about unselectable" title="Information about the project">ABOUT</div></div></div><div id="freewall" class="free-wall"></div><div id="menu_overlay_bg"></div><div class="loading_spinner a"><img src="site/img/spinner.gif" alt="Loading indicator"></div><div id="overlay"><div id="overlay_bg"></div><div id="overlay_outer"><div id="overlay_inner"><div id="details-card"><img id="hero-img" class="unselectable undragable" src="" alt="Main content image"><div id="details-no-image"><div id="details-big-text"></div></div><div id="home-box"><div class="byline"><h1>The stories<br>that make us.</h1><h2>Told by you</h2><p>A real-time visualisation of the items you, our customers,<br>are looking at in the library's collection.</p></div><div class="footer"><div class="logo"><img src="site/img/slsa_unstkd_logo_light.svg"></div><div class="padd"></div><div class="logo"><img src="site/img/slsa_logo_light.svg"></div></div></div><div id="details-labels"><a id="details-link-anchor" class="link-anchor unselectable" title="View original page" href="#" target="_blank"><svg width="100%" height="100%" viewBox="0 0 1110 1110"><use x="0" y="0" xlink:href="#anchor-svg"/></svg></a><div class="labels"><p></p><p></p><p></p><p></p><p></p><p></p></div></div></div><div id="instruction-box"><div class="copy"><p>As users select items from the collection, the image appears.</p><p>So when an item appears, it means someone just looked at it.</p></div><div class="footer"></div></div></div></div><div class="loading_spinner b"><img src="site/img/spinner.gif" alt="Loading indicator"></div></div><div id="menu" class="menu_sel card menu_min menu_outer_shadow" style="transform: scale(1);"><div class="menu_inner"><div id="menu_header_minimised" class="menu_header unselectable"><div class="menu_header_inner"><div class="institute-icon"><svg width="54px" height="50px" viewBox="0 0 172 172"><use x="0" y="0" xlink:href="#slq-logo-svg"/></svg></div><div class="header_text_group"><div class="main_title">Unstacked</div><div class="heading_text"><div class="clock"><span class="time_stamp">12<span style="vertical-align:top;">:</span>10pm </span><span class="tzone">AEST</span></div></div></div><div class="menu_primary_button"><svg id="hamburger_button" width="24px" height="24px" viewBox="0 0 22 22"><g transform="translate(0,4)"><path stroke="none" d="M18.765,4H2C0.896,4,0,3.104,0,2s0.896-2,2-2h16.765c1.104,0,2,0.896,2,2S19.869,4,18.765,4z"/><path stroke="none" d="M18.765,10.293H2c-1.104,0-2-0.896-2-2s0.896-2,2-2h16.765c1.104,0,2,0.896,2,2S19.869,10.293,18.765,10.293z"/><path stroke="none" d="M18.765,16.586H2c-1.104,0-2-0.896-2-2s0.896-2,2-2h16.765c1.104,0,2,0.896,2,2S19.869,16.586,18.765,16.586z"/></g></svg></div></div></div><div id="menu_header_maximised" class="menu_header unselectable"><div class="menu_header_inner"><div class="institute-icon"><svg width="54px" height="50px" viewBox="0 0 172 172"><use x="0" y="0" xlink:href="#slq-logo-svg"/></svg></div><div class="header_text_group"><div class="main_title">Unstacked</div></div><div class="menu_primary_button"><svg class="close_icon" width="23px" height="23px" viewBox="0 0 23 23"><use x="1" y="2" xlink:href="#close-icon-svg"/></svg></div></div></div><div id="menu_options" class="unselectable"><div class="section_title row" style="display:none;">SETTINGS</div><div class="details"><div class="blurb antialias"><p class="title">Use the settings below to change what you see through <span class="emph">SLSA Unstacked.</span></p><p>The visualisation will update automatically.</p></div></div> <div class="ui_control options_content"> <div class='menu_pub_src_items' ><div class='ui_group_title row antialias' >View what people are accessing from</div><div class='clickable_row row menu_item_divider' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >The entire collection</div></div><div class='clickable_row row menu_item_divider' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >Published</div></div><div class='clickable_row row ' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >Unpublished</div></div></div><div class='menu_recently_ingested_items' ><div class='ui_group_title row antialias' >Items recently added to the collection</div><div class='clickable_row row menu_item_divider' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >Show</div></div><div class='clickable_row row menu_item_divider' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >Hide</div></div><div class='clickable_row row ' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >Show these items only</div></div></div><div class='menu_img_items' ><div class='ui_group_title row antialias' >Show only items with images</div><div class='clickable_row row ' ><div class="widget" ><svg class="toggle_widget_svg" viewBox="0 0 15 15" version="1.1" width="15px" height="15px"><use x="0" y ="0" xlink:href="#toggle_button_widget"/><use x="0" y ="0" xlink:href="#toggle_button_widget_selected"/></svg></div> <div class='label' >Off</div></div></div> <div id="menu_overlay" class="menu_border_shadows"></div></div></div><div id="menu_about" class=""><div class="section_title row" style="display:none;">ABOUT THE PROJECT</div><div class="about_content antialias" style="display:none"><h1>The stories that make us.</h1><h1 class="second">Told by you</h1><p><span class="emph">SLSA Unstacked</span> is a real-time visualisation of the items you, our customers, are looking at in the State Library of South Australia's online collection right now.</p><p>If you are joining us from outside South Australia, the time at the State Library is currently <span class="time_display emph"><span class="time_stamp">12:10pm</span> <span class="date"></span> <span class="tzone">AEST</span>.</span></p><p>The project reveals the richness and diversity of the Library's collection as well as the richness and diversity of you, our customers, who through your own research, highlight the stories that make us.</p><h2>Our catalogue</h2><p>When an item appears in <span class="emph">SLSA Unstacked</span> you can click the item to view its details in the Library's catalogue.</p><h2>Images and colours</h2><p>Where there are images available, a preview of the item is shown.<br>Otherwise, items appear as coloured tiles.</p> <h2>Recently added items</h2><p>Items which have been recently added to our collection are also included to highlight new acquisitions. These items are indicated by a 'cut corner' in the bottom right of the item e.g.</p><img loading="lazy" style="max-width:420px;" title="Image showing recently added items visual indicator" src="site/img/ri_indicator_example.png"><h2>Filters</h2><p>Use the filters to change how you view <span class="emph">SLSA Unstacked</span>.</p><h2>Technology</h2><p>The front-end visualisation of <span class="emph">SLSA Unstacked</span> is an HTML5 application using several open source javascript libraries <a href="https://github.com/kombai/freewall/blob/master/license.md" target="_blank">Freewall</a>, <a href="https://greensock.com/standard-license" target="_blank">GSAP</a>, <a href="https://github.com/moment/moment/blob/develop/LICENSE" target="_blank">Moment.js</a>, <a href="https://github.com/jquery/jquery/blob/master/LICENSE.txt" target="_blank">jQuery</a>.</p><p class="attrib" style="margin-top:0px">© <a href="https://unstacked.com.au" target="_blank">Elisa Lee</a> and <a href="https://adamhinshaw.com" target="_blank">Adam Hinshaw</a> 2022</p><p class="attrib" style="margin-top:0px;"><a href="https://unstacked.com.au" target="_blank">unstacked.com.au</a></p><p class="attrib" style="margin-bottom:16px">Developed with a <a href="https://dxlab.sl.nsw.gov.au/blog/unstackedlaunch/" target="_blank">DX Lab Fellowship</a> at the State Library of New South Wales; Creative Commons Attribution 4.0 International Public License located at this <a href="https://github.com/slnsw/unstacked/blob/master/LICENSE" target="_blank">URL.</a></p></div></div><div class="menu_primary_button close"><svg class="close_icon" width="23px" height="23px" viewBox="0 0 23 23"><use x="1" y="2" xlink:href="#close-icon-svg"/></svg></div></div></div><div id="drawing"><svg id="screen_grid" viewBox="0 0 3320 5840" version="1.1" width="3320" height="5840" preserveAspectRatio="none"><text x="10" y="20">target screen: 3320 x 5840</text><rect x="0" y="0" width="3320" height="5840" style="fill:none;stroke-width:4;stroke:rgb(255,0,0)"/><rect stroke-width="1" stroke="white" style="fill:rgba(0,0,0,.5)" x="1080" y="0" width="40" height="5840"/><rect stroke-width="1" stroke="white" style="fill:rgba(0,0,0,.5)" x="2200" y="0" width="40" height="5840"/></svg></div><div id="status"><p></p></div></div> <script> window.unstkd_defs= {"init":true}</script><script src='site/js/libs.min.js?b=7' ></script> <script src='site/js/main.min.js?b=7' ></script> </body></html>