week 4 lab

zhamic7 · Jul 24, 2024 · 72d933e · 72d933e
1 parent cb4343c
commit 72d933e
Show file tree

Hide file tree

Showing 8 changed files with 380 additions and 17 deletions.
diff --git a/notes.txt b/notes.txt
@@ -0,0 +1,4 @@
+Link to Google files for week4
+https://docs.google.com/forms/d/1Jekv_fa7iMG0KW8Tnuv7i2fvTajEOyQxUq7sE1oZlWI/edit
+https://docs.google.com/spreadsheets/d/1aCnH6e7nnemuTc8f44KoI1xrEByErGcvbkcVAo7T-EM/edit?resourcekey=&gid=1567917521#gid=1567917521
+https://script.google.com/u/1/home/projects/1Un8lY-eHIQ0VoXpiyzrQhQYEiCTIZErqg_HOboAwqf31ReQJ8fi_4HXo/edit
diff --git a/week3/images/how-much-speed-is-too-much-speed-v0-p3ydwnj8i8ob1.webp b/week3/images/how-much-speed-is-too-much-speed-v0-p3ydwnj8i8ob1.webp
diff --git a/week3/styles/index.css b/week3/styles/index.css
@@ -41,23 +41,6 @@ img {
     width:400px;
 }
 
-a:link {
-    color:#0088ff;
-    text-decoration-line: none;
-}
-a:visited {
-    color:#0088ff;
-    text-decoration-line: none;
-}
-a:hover {
-    color: white;
-    text-decoration-line: none;
-}
-a:active {
-    color:white;
-    text-decoration-line: none;
-}
-
 .col2 {
     grid-area: col2;
     padding-right:10px;

diff --git a/week4/images/my-icon.png b/week4/images/my-icon.png
diff --git a/week4/index.html b/week4/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>AA191A APIs and conditionals Lab</title>
+
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="#">
+    <link rel="stylesheet" href="styles/index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+
+    <!-- MapLibreGL's css-->
+    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
+
+    <!-- MapLibreGL's JavaScript-->
+    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+
+    <!-- PapaParse Library-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
+</head>
+
+<body>
+
+    <header>
+        <h1>BAY AREA RAPID TRANSIT</h1>
+    </header>
+
+    <main>
+        <!-- hint: majority of your lab assignment can go here -->
+        <div class="col1">
+            <div id="survey">
+                <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf3iP3m7qQe_8wxwSXV5Vs9R6Ap_hOoX7fD4wKwTpn7JROduQ/viewform?embedded=true" 
+                width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>         
+            </div>
+        </div>
+
+        <div class="col2">
+            <div class="title"><h2>Survey Responses</h2></div>
+            <div id="map">
+                <!-- Map will be inserted here -->
+                <div id="legend"></div>
+            </div>
+        </div>
+    </main>
+
+    <div id="footer">
+        <p>COPYRIGHT 2024</p>
+    </div>
+
+    <script src="js/init.js"></script>
+
+</body>
+
+</html>
diff --git a/week4/js/init.js b/week4/js/init.js
@@ -0,0 +1,126 @@
+function createCustomIcon (caption, latlng, color) {
+    // Create a DOM element for the marker
+    const el = document.createElement('div');
+    el.style.backgroundImage = 'url(images/my-icon.png)';
+    el.style.backgroundSize = '50px';
+    el.style.width = '50px'; // iconSize width
+    el.style.height = '50px'; // iconSize height
+    el.style.display = 'block';
+    el.style.borderRadius = '50%'; // Optional: makes the icon circular
+    el.style.border = "2px solid";
+    el.style.borderColor = color;
+    el.style.backgroundColor = color;
+    //el.style.boxShadow = '0px 0px 20px rgba(0, 0, 0, 0.5)'; // Optional: adds shadow effect
+
+    return new maplibregl.Marker({element: el})
+        .setLngLat(latlng)
+        .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
+        .setHTML(caption));
+}
+
+function checkZipcode(zipcode) {
+    if(zipcodes.has(zipcode)) {
+        clusters[zipcode] = clusters[zipcode] + 1;
+    }
+    else {
+        zipcodes.add(zipcode);
+        clusters[zipcode] = 0;
+    }
+}
+
+function Place(zipcode, freq, show_stories, exp, dest, lat, lon) {
+    checkZipcode(zipcode);
+    let offset = clusters[zipcode];
+    lat = Number(lat) + 0.01 * offset * Math.sin(offset * Math.PI/4);
+    lon = Number(lon) + 0.01 * offset * Math.cos(offset * Math.PI/4);
+
+    let stories = "";
+    if (show_stories === "Yes") {
+        stories = `<p style="font-weight:bold;">Where do you usually ride BART to? (e.g. school, work, errands, etc.) <\p>
+                    <p>${dest}</p>
+                    <br>
+                    <p style="font-weight:bold;">What has your experience with BART been like? </p>
+                    <p>${exp}</p>`;
+    }
+    else {
+        stories = "<p>No other info.</p>";
+    }
+    this.caption = `<div class="mapPopup">
+                        <div class="popupTitle">
+                            <h2 style="font-size:16px;">Response from ZIP ${zipcode}</h2>
+                        </div>
+                        <p style="margin-top: 7px;">${stories}</p>
+                    </div>`;
+    this.coords = [lon, lat];
+    this.category_color = legend_colors[freq];
+}
+
+function processData(data) {
+    let places = [];
+    for (let i = 0; i < data.length; i++) {
+        let tmp = data[i];
+        let show = tmp["Do you live in one of the following counties in the San Francisco Bay Area: San Francisco, San Mateo, Alameda, Contra Costa, and Santa Clara ?"];        
+        if (show === "Yes") {    
+            places.push(new Place(tmp["What is your home ZIP code?"],
+                                        tmp["In an average week, how often do you ride BART?"],
+                                        tmp["Would you be comfortable with sharing your story publicly?"],
+                                        tmp["What has your experience with BART been like?"],
+                                        tmp["Where do you usually ride BART to? (e.g. school, work, errands, etc.)"],
+                                        tmp.lat,
+                                        tmp.lng
+                ));
+        }
+    }
+    places.forEach(place => createCustomIcon(place.caption, place.coords, place.category_color).addTo(map));
+}
+
+// Declare data structures
+const legend_colors = {
+    "I rarely/never use BART" : "#bfd7ed",
+    "1-2 times a week": "#60a3d9",
+    "3-4 times a week" : "#0074b7",
+    "5 or more times a week": "#003b73",
+}
+
+const zipcodes = new Set();
+let clusters = new Object();
+
+// Declare variables
+let mapZoom = {
+    "lat": 37.589186744460186, 
+    "lon": -122.11754792252312,
+    "zoom": 9
+}
+
+// Create map and add markers
+const map = new maplibregl.Map({
+    container: 'map', // container ID
+    style: 'https://api.maptiler.com/maps/dataviz/style.json?key=aRyJfnj25CKYN2noi9Wt', // Your style URL
+    center: [mapZoom.lon, mapZoom.lat], // Starting position [lng, lat]
+    zoom: mapZoom.zoom // Starting zoom level
+});
+
+const dataUrl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQplJGy7A8Z3Gu3MC6jLFxWHJvyId4_eYwHB2C0WRjDIVMSpj8b_X0R7sAOT0DaACs_PCk5EdbE4VUi/pub?output=csv"
+
+// When the map is fully loaded, start adding GeoJSON data
+map.on('load', function() {
+    // Use PapaParse to fetch and parse the CSV data from a Google Forms spreadsheet URL
+    Papa.parse(dataUrl, {
+        download: true, // Tells PapaParse to fetch the CSV data from the URL
+        header: true, // Assumes the first row of your CSV are column headers
+        complete: function(results) {
+            // Process the parsed data
+            processData(results.data); // Use a new function to handle CSV data
+        }
+    });
+});
+
+let legend = `<div><p style="font-weight: bold; margin-bottom:10px;">Measure of Usage</p></div>`;
+for (const [key, value] of Object.entries(legend_colors)) {
+    legend = legend.concat(`<div class="legend-item">
+                                <span class="dot" style="background-color:${value}"></span>
+                                <p>${key}</p>
+                            </div>`);
+}
+console.log(legend);
+document.getElementById("legend").innerHTML = legend;
diff --git a/week4/styles/index.css b/week4/styles/index.css
@@ -0,0 +1,99 @@
+@import "style.css";
+
+/* Defines the page layout using a grid */
+main {
+    grid-area: main;
+    display: grid;
+    grid-template-areas: "col1 col2";
+    grid-template-columns: 1.5fr 3fr;
+}
+
+/* Assigns each major section to a part of the grid */
+.col1 {
+    grid-area: col1;
+    padding-right: 10px;
+    display: flex;
+    flex-flow: column;
+}
+
+#survey {
+    border: solid;
+    border-top: none;
+    border-width: 2ch;
+    border-color: #ffb4c4;
+
+    margin-right: 10px;
+    padding-top: 10px;
+    background-color: #ffb4c4;
+    flex: 1 1 auto;
+}
+
+.col2 {
+    grid-area: col2;
+    padding-right: 10px;
+    display: flex;
+    flex-flow: column;
+}
+
+.title {
+    margin-bottom: 10px;
+}
+
+#map {
+    flex: 1 1 auto;
+    border-style: solid;
+    border-width: 0.25ch;
+}
+
+.mapPopup {
+    background-color: #f8f9fa;
+    color: #212529;
+    font-size: 16px;
+    padding: 10px;
+}
+
+.popupTitle {
+    border: solid;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-width: 1px;
+    border-color: black;
+
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+}
+
+#legend {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 20px;
+    margin-left: 20px;
+    z-index: 1;
+
+    width: 250px;
+    background: #fff;
+    border: solid;
+    border-color: black;
+    border-width: 2px;
+    border-radius: 5px;
+    color: black;
+    padding: 10px;
+    height: 180px;
+}
+
+.legend-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.dot {
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+}