Merge branch 'master' of https://github.com/raphaellaude/pluto-hist

pluto-hist/about.html

@@ -0,0 +1,56 @@
+<div id="modal" class="uk-modal" style="display: block">
+    <div class="uk-modal-dialog uk-modal-body">
+        <h3 class="uk-modal-title">More about the Parcel ATM</h3>
+        <p>
+            The NYC Parcel ATM is an art project conceived for data through
+            design 2024, an annual data art show in NYC. It surfaces all 22
+            years of NYC's Primary Land Use Tax Lot Output (<a
+                href="https://www.nyc.gov/site/planning/data-maps/open-data/dwn-pluto-mappluto.page"
+                target="_blank"
+                >PLUTO</a
+            >) dataset, going back to 2002.
+        </p>
+        <p>
+            PLUTO is a remarkable dataset. Used by urban planners, developers,
+            researchers, and civic hackers, PLUTO is a digital palimpsest of
+            evolving visions for the city. It offers a rich view into 20+ years
+            of sociopolitical, economic, and regulatory history, as well as
+            chronicling the Department of City Planning’s (DCP) evolving data
+            collection methods.
+        </p>
+
+        <p>
+            The interface you are looking at presents one interpretation of
+            PLUTO. In the future, I hope to collect feedback and make the tool
+            more useful to others. If you have any ideas, please reach out to me
+            by
+            <a
+                href="mailto:
+                [email protected]"
+                >&#9993; email</a
+            >. And if you'd like to analyze the data yourself, check out the
+            full
+            <a
+                href="https://www.nyc.gov/site/planning/data-maps/open-data/bytes-archive.page"
+                target="_blank"
+                >BYTES of the BIG APPLE™ Archive</a
+            >
+        </p>
+        <p>
+            Thank you to the organizers of data through design for putting on
+            such an awesome event and to everyone that gave me feedback along
+            the way.
+        </p>
+
+        <form _="on submit take .uk-open from #modal">
+            <button
+                id="cancelButton"
+                type="button"
+                class="uk-button uk-button-default"
+                _="on click take .uk-open from #modal wait 200ms then remove #modal"
+            >
+                &#x2715; Close
+            </button>
+        </form>
+    </div>
+</div>

pluto-hist/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
         <script src="/htmx.min.js"></script>
+        <script src="https://unpkg.com/[email protected]"></script>
         <link
             href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
             rel="stylesheet"
@@ -36,6 +37,16 @@
                 <h1 class="title">NYC Parcel ATM</h1>
             </div>
             <h2 class="subtitle">Exploring PLUTO's 22 year history</h2>
+            <button
+                id="about"
+                hx-get="/about.html"
+                hx-target="#about-modal"
+                class="uk-button uk-button-primary"
+                _="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal"
+            >
+                About this project
+            </button>
+            <div id="about-modal"></div>
             <div style="display: flex; align-items: center; gap: 8px">
                 <button id="prev-year">&larr;</button>
                 <h3 class="title mapquest no-print" id="year">2002</h3>

pluto-hist/main.js

@@ -53,6 +53,7 @@ if (import.meta.env.VITE_KIOSK === "true") {
   document.body.classList.add("kiosk");
   addAttributeToId("controls", "visibility", "visible");
   addAttributeToId("centerMarker", "visibility", "visible");
+  addAttributeToId("about", "display", "none");
 }
 
 class Spinner {

pluto-hist/style.css

@@ -82,6 +82,33 @@ h1 {
     margin-top: 0;
 }
 
+#modal {
+    position: absolute;
+    width: 250px;
+    top: 1rem;
+    left: calc(var(--sidebar-width) + 3rem);
+    background-color: var(--bg);
+    color: var(--text-color);
+    padding: var(--box-padding);
+    border: 1px solid #000;
+    border-radius: 0.5rem;
+    z-index: 1000;
+    max-height: calc(100% - 4rem);
+    overflow-y: scroll;
+
+    h3 {
+        font-size: 1em;
+        font-weight: 500;
+        margin: 0 0 0.5em 0;
+        padding: 0;
+    }
+
+    p {
+        font-size: 0.75em;
+        margin: 0 0 1rem 0;
+    }
+}
+
 #year {
     /* position: fixed; */
     /* top: 0.67em; */
@@ -229,6 +256,10 @@ h1 {
         border-bottom: #000 1px solid;
     }
 
+    #modal {
+        left: 1rem;
+    }
+
     #centerMarker {
         left: 50%;
         top: 25%;