dailybruin · unglikteng · May 30, 2019 · May 30, 2019 · May 31, 2019
diff --git a/_data/authors.yml b/_data/authors.yml
@@ -217,3 +217,10 @@ mattie_sanseverino:
     mug: Yes
     email: msanseverino@media.ucla.edu
     github: mattiesansev
+lik_teng_ung:
+    name: Lik Teng Ung
+    title: Stack Developer
+    bio: Ung is a stack contributor at the Daily Bruin and a third-year Statistics and Political Science student. He's an avid political poll watcher, Pythonistas and boba connoisseur.
+    email: lung@media.ucla.edu
+    mug: Yes
+    github: unglikteng
diff --git a/_posts/2019-05-30-gnr-map.md b/_posts/2019-05-30-gnr-map.md
@@ -0,0 +1,11 @@
+---
+title: Where to Find Gender Neutral Bathrooms
+teaser: In 2019, UCLA announced a new policy that would require every building on campus to install gender neutral bathrooms. But how accessible is gender neutral bathrooms outside of campus? The Daily Bruin wants to map all gender neutral bathrooms in Westwood.
+authors:
+- lik_teng_ung
+scripts:
+- //cdn.plot.ly/plotly-latest.min.js
+- /js/posts/westwood-gnr/gnr-map.js
+---
+
+<div id="gnr-map" align="center"></div>
diff --git a/datasets/westwood-gnr/gnr_westwood.csv b/datasets/westwood-gnr/gnr_westwood.csv
diff --git a/img/mugs/lik_teng_ung.jpg b/img/mugs/lik_teng_ung.jpg
diff --git a/js/posts/westwood-gnr/gnr-map.js b/js/posts/westwood-gnr/gnr-map.js
@@ -0,0 +1,60 @@
+Plotly.d3.csv('/datasets/westwood-gnr/gnr_westwood.csv', function(err, rows){
+    function unpack(rows, key) {
+          return rows.map(function(row) { return row[key]; });
+    }
+    console.log("Hello")
+
+    let place_name = unpack(rows, 'name'),
+        lat = unpack(rows, 'lat'),
+        lon = unpack(rows, 'lon');
+
+    var trace = {
+        type: 'scattermapbox',
+        visible: true,
+        mode: 'markers+text',
+        text: place_name,
+        hovertext: place_name,
+        hoverinfo: "text",
+        lon: lon,
+        lat: lat,
+        marker: {
+            "symbol": "toilet",
+            'size': 10,
+        },
+        name: 'Westwood Gender Neutral Bathroom'
+    };
+
+    let data = [trace];
+
+    let layout = {
+      title: "Westwood Gender Neutral Bathroom", 
+      height: 650,
+      dragmode: 'zoom',
+      mapbox: {
+        center: {
+          lat: 34.06487918832413,
+          lon: -118.44017028808594,
+        },
+        domain: {
+          x: [0, 1],
+          y: [0, 1]
+        },
+        style: 'streets',
+        zoom: 15,
+      },
+      margin: {
+        l: 150,
+        r: 150,
+        t: 50,
+        b: 100
+      },
+      showlegend: false,
+   };
+
+  Plotly.setPlotConfig({
+    mapboxAccessToken: "pk.eyJ1IjoidW5nbGlrdGVuZyIsImEiOiJjanQwdnM2bjAxMjY5M3lwaWp5ODF1cDAyIn0.rbraNbQac3dU6Ke0naKtyQ"
+  })
+
+    Plotly.newPlot('gnr-map', data, layout, {responsive: true});
+  });
+
diff --git a/static/gnr-map/gnr-map.js b/static/gnr-map/gnr-map.js
@@ -0,0 +1,60 @@
+Plotly.d3.csv('gnr_westwood.csv', function(err, rows){
+    function unpack(rows, key) {
+          return rows.map(function(row) { return row[key]; });
+    }
+    console.log("Hello")
+
+    let place_name = unpack(rows, 'name'),
+        lat = unpack(rows, 'lat'),
+        lon = unpack(rows, 'lon');
+
+    var trace = {
+        type: 'scattermapbox',
+        visible: true,
+        mode: 'markers+text',
+        text: place_name,
+        hovertext: place_name,
+        hoverinfo: "text",
+        lon: lon,
+        lat: lat,
+        marker: {
+            "symbol": "toilet",
+            'size': 10,
+        },
+        name: 'Westwood Gender Neutral Bathroom'
+    };
+
+    let data = [trace];
+
+    let layout = {
+      title: "Westwood Gender Neutral Bathroom", 
+      height: 650,
+      dragmode: 'zoom',
+      mapbox: {
+        center: {
+          lat: 34.06487918832413,
+          lon: -118.44017028808594,
+        },
+        domain: {
+          x: [0, 1],
+          y: [0, 1]
+        },
+        style: 'streets',
+        zoom: 15,
+      },
+      margin: {
+        l: 150,
+        r: 150,
+        t: 50,
+        b: 100
+      },
+      showlegend: false,
+   };
+
+  Plotly.setPlotConfig({
+    mapboxAccessToken: "pk.eyJ1IjoidW5nbGlrdGVuZyIsImEiOiJjanQwdnM2bjAxMjY5M3lwaWp5ODF1cDAyIn0.rbraNbQac3dU6Ke0naKtyQ"
+  })
+
+    Plotly.newPlot('gnr-map', data, layout, {responsive: true});
+  });
+
diff --git a/static/gnr-map/gnr_westwood.csv b/static/gnr-map/gnr_westwood.csv
diff --git a/static/gnr-map/index.html b/static/gnr-map/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+
+</head>
+
+<body>
+    <p>Hello</p>
+    <div id="gnr-map" align="center"></div>
+
+</body>
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<script src="https://d3js.org/d3.v5.min.js"></script>
+<script src="gnr-map.js"></script>