members.html

﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Members | Toon Libraries</title>

  <!--[htmlclean-protect]-->
  <!-- inject:css -->
  <!-- endinject -->
  <!--[/htmlclean-protect]-->

</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link" href="/">Usage</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/catalogue">Catalogue</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="/members">Members</a>
      </li>
    </ul>
  </div>

  <div id="main" class="container">
    <p class="lead">Newcastle libraries published a snapshot of anonymised membership data from 2016, with registered
      library, date and time of joining, and postcode district of the member.</p>
    <p class="lead" id="loader">
      <span class="fa fa-spinner fa-spin"></span> Loading...
    </p>

    <div class="container">
      <div class="row">
        <div class="dc-data-count">
          <p>
            <span class="filter-count"></span> selected out of <span class="total-count"></span> records.
          </p>
        </div>
      </div>
      <div class="row stat-bar">
        <div class="col-3">
          <div id="div-number-members">
            <div id="cht-number-members"></div>
          </div>
        </div>
        <div class="col-3">
          <div id="div-number-branches">
            <div id="cht-number-branches"></div>
          </div>
        </div>
        <div class="col-3">
          <div id="div-number-postcodedistricts">
            <div id="cht-number-postcodedistricts"></div>
          </div>
        </div>
        <div class="col-3">
          <div id="div-number-popularjoining">
            <div id="cht-number-popularjoining"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div id="div-members-map">
          <div id="map">
            <p>Filter by member postcode district. <span class="reset" style="display: none"><span
                  class="filter"></span> | <a id="reset-members-postcodedistrict" href="#">Reset</a></span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div id="div-members-branch">
          <div id="cht-members-branch">
            <p>Filter by member branch. <span class="reset" style="display: none"><span class="filter"></span> |
                <a id="reset-members-branch" href="#">Reset</a></span></p>
          </div>
        </div>
      </div>
    </div>
    <hr />

    <div class="row">
      <div class="col-sm-6">
        <div id="div-members-hourjoined">
          <div id="cht-members-hourjoined">
            <p>Filter by hour of day members joined. <span class="reset" style="display: none"><span
                  class="filter"></span>
                | <a id="reset-members-hourjoined" href="#">Reset</a></span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div id="div-members-dayjoined">
          <div id="cht-members-dayjoined">
            <p>Filter by the day of the week members joined. <span class="reset" style="display: none"><span
                  class="filter"></span>
                | <a id="reset-members-dayjoined" href="#">Reset</a></span></p>
          </div>
        </div>
      </div>
    </div>

    <hr />
    <p>An open source project available on <a href="https://github.com/LibrariesHacked/wuthering-hacks"
        target="_blank">GitHub</a>. <a href="https://twitter.com/ToonLibraries" target="_blank"
        title="Newcastle Libraries on Twitter">@ToonLibraries</a> release open data under a <a
        href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank"
        title="Creative Commons Licence Details">Public Domain licence</a>.</p>
  </div>

  <!--[htmlclean-protect]-->
  <!-- inject:js -->
  <!-- endinject -->
  <!--[/htmlclean-protect]-->

</body>

</html>