Sean's Dashboard

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "extends": ["eslint:recommended", "google"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "ignorePatterns": ["examples/**/*.js"],
+  "globals": {
+    "L": "readonly",
+    "d3": "readonly"
+  },
+  "rules": {
+    "indent": ["error", 2, { "VariableDeclarator": 1 }],
+    "max-len": "off",
+    "object-curly-spacing": "off",
+    "operator-linebreak": [
+      "error",
+      "after",
+      { "overrides": { "?": "ignore", ":": "ignore" } }
+    ],
+    "require-jsdoc": "off"
+  }
+}

README.md

@@ -1,74 +1,5 @@
-Dashboards are the bread and butter of spatial data displays. They are highly interactive websites, usually with real-time updates that show data in an accessible way.
+## Sean's Dashboard
 
+Find link here! [https://theta1112.github.io/dashboard-project/]
 
-## Examples
-
-- School Explorer (in-class example), [examples/school-explorer-for-parents](examples/school-explorer-for-parents/site/)
-- Philly Park Lead Levels, [examples/philly-park-lead-levels](examples/philly-park-lead-levels/)
-
-
-## Instructions
-
-### Step 1: Choose a topic
-
-Choose a topic that is fruitfully explained with some combination of narrative and geographic elements. Think about what data you want to tell a story about, and what kind of decisions you want to support through the use of your dashboard. Evaluate any dataset or interactive element you add to your dashboard on whether it makes it actually supports making those decisions.
-
-Whatever data you use, **be sure to include citations somewhere in your app interface**. You can choose a dataset from any of a number of sources, for example:
-
-* Use data you've been working with for another class
-* Create your own dataset (check out [geojson.io](https://geojson.io))
-* Find data from an open data repository...
-
-### Step 2: Create a map on your browser
-
-The main component of the dashboard is the map displayign spatial information. This is the building block of all your other features!
-
-* Create basic html with head and body elements, linking to your css stylesheet and javascript file
-* Create map element in html document
-* Style map element in CSS to give it height
-* Create map object in Javascript referencing leaflet quickstart https://leafletjs.com/examples/quick-start/ (will need to link to leaflet documents in your html)
-* Add a basemap tile layer - use OpenStreetMap, Stamen, Mapbox, or another source - you can customize this!
-* NOTE: you may want to separate the code for creating the map into a different javascript file for organization. If you do this, wrap the creation of the map into a function and export that function, and then import it in your main.js file.
-
-### Step 3: Add data to your map
-
-* Add data file to your repository folder (usually in a data subfolder) - remember geojson files work best, csv files work too but must be parsed using csv parse https://csv.js.org/parse/ or papa parse https://www.papaparse.com/ . See [the course resources](https://github.com/musa-6110-fall-2023/course-info/blob/main/resources/data-format-csv.md) for a guide to getting started with those libraries.
-* Use fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API to load your data into your environment (remember, fetch returns a promise, not a file, and a file needs to be extracted from the promise)
-* Create map layer to display data (ie LayerGroup, Marker, etc.. see documentation https://leafletjs.com/reference.html) - style the layer here, not in CSS because CSS cannot access styles within the map 
-* Display data through your map layer (either create an empty layer and pass the data through in a separate function, or input the data directly when you create the layer)
-* optional: attach popup https://leafletjs.com/reference.html#popup and tooltip https://leafletjs.com/reference.html#tooltip to your data layer for more interactivity
-
-### Step 4: Create an interactive element (ie search, highlight, print data, etc)
-
-This is the most broad step because you could do so many different things like: 
-* button to filter data shown on map
-* checkbox to filter data shown on map
-* search bar to type in to filter data shown on map (more difficult - try only if you've already accomplished the button)
-* paste/display text of data attributes when you click on the data layer on the map
-* graph data shown on map
-
-The general steps to accomplish these are:
-* create an html element for the interactive piece (ie button, checkbox, searchbar, graph) ps. if you're interactive event will be clicking on the map, no extra element is needed
-* create a DOM (document object model) element in javascript to set up an event listener - reference DOM exercise we did in class https://github.com/musa-6110-fall-2023/dom-exercises
-* create an event listener (event examples: click a button, check a checkbox, click a map data layer)
-* create a function which responds when the event has happened
-* create a function to parse through data (will require for loop) and accomplish one of the following:
-    * clear data layer and display only the filtered data
-    * print in space outside map (new html element) information about the data
-    * pass data shown on map through a graph and display
-
-### Step 5: Finishing touches (styling, linting, accessibility)
-
-* style the map and data to your liking, which can include doing things like:
-   * customizing your basemap tiles
-   * customizing your marker/data layer style (using your own image in replace for the marker image)
-   * changing fonts and colors in the csv
-
-Make sure to lint use eslint or stylelint to ensure your code is using the widely acceptable syntax
-
-Check for accessibility using:
-* Axe DevTools in browser
-* accessible colors for someone looking at your map, reference colorbrewer or other sites for help with this 
-
-
-
+This project is a Computer Assisted Model Assessment tool that would ideally be used for evaluating some property model. It's main audience is non-technical and wants to evaluate the property model fitted with respective tto neighborhood demographics. 

css/main-stat-style.css

@@ -0,0 +1,32 @@
+#main-stat-section {
+  padding-left: 5%;
+  padding-top: 5%;
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  justify-content: space-between;
+  font-size: 1em;
+}
+
+#main-stat-section #neigh-select{
+  width: 80%;
+  height: 1.7em;
+  font-size: 1.2em;
+}
+
+#main-stat-section #main-stat-display-section{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+#main-stat-section #main-stat-display-section p{
+  font-size: 1.8em;
+}
+
+
+#main-stat-section #error-hist{
+  height: 20vh;
+  margin-bottom: 20%;
+}
+

css/sec-stat-style.css

@@ -0,0 +1,21 @@
+#sec-stat-section {
+  padding-left: 5%;
+  padding-top: 5%;
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+#main-stat-section #neigh-select{
+  width: 80%;
+  height: 1.5em;
+}
+
+#main-stat-section #main-stat-display-section{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+

css/style.css

@@ -0,0 +1,75 @@
+/* at the start of CSS, make sure design go to the edge of the browser */
+html,
+body {
+    padding: 0;
+    /* border-box doesn't include margin, only padding */
+    margin: 0;
+    height: 100%;
+}
+
+/* layout style */
+html {
+    font-family: sans-serif;
+    box-sizing: border-box;
+    height: 100%;
+    /* overflow: hidden; */
+}
+
+header {
+    height: 9vh;
+    font-size: 12px;
+    box-sizing: border-box;
+    background-size: 100% 100%;
+}
+
+h1 {
+    color: #000000;
+    height: 100%;
+    padding: 2vh;
+    margin: 0;
+    box-sizing: border-box;
+    font-size: 3em;
+    /* adjust background image transparency */
+    background-color: #D3D3D3;
+}
+
+#dashboard {
+    display: grid;
+    grid-template: 3fr 1fr 45px / 2fr 1fr;
+    height: 88vh;
+}
+
+#map-section {
+    box-sizing: border-box;
+    grid-column: 1 / 2;
+    grid-row: 1 / 3
+}
+
+#main-stat-section {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    box-sizing: border-box;
+    background-color:  #D3D3D3;
+    border: 2px solid #808080;
+}
+
+#sec-stat-section {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    box-sizing: border-box;
+    background-color:  #D3D3D3;
+    border: 2px solid #D3D3D3;
+}
+
+#footer-section {
+    grid-column: 1 / 3;
+    grid-row: 3 / 4;
+    box-sizing: border-box;
+    background-color: #D3D3D3;
+    border: 2px solid #808080;
+}
+
+#map {
+    width: 100%;
+    height: 100%;
+}

data/neighborhoods.json

@@ -0,0 +1 @@
+{"district":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,25,26,27,28],"name":["All","CBD - Raffles Place","CBD - Tanjong Pagar","Central South - Tiong Bahru","South - Keppel","South West - West Coast","CBD - City Hall","City - Bugis","Central - Farrer Park","Central - Orchard","Central - Bukit Timah","Central - Newton","Central - Toa Payoh","Central East - Macpherson","Central East - Eunos","East Coast - Katong","Upper East Coast - Bedok","Far East - Pasir Ris","Far East - Tampines","North East - Punggol","Central North - Ang Mo Kio","Central West - Clementi","Far West - Jurong","North West Bukit Batok","Far North - Woodlands","North - Yio Chu Kang","Far North - Yishun","North East - Yio Chu Kang"],"bach_rate":[0.118776950215602,"NA","NA",0.154362416107383,0.101694915254237,"NA","NA",0.0986842105263158,0.181102362204724,"NA",0.142857142857143,"NA",0.129370629370629,"NA",0.148351648351648,0.152777777777778,0.137867647058824,"NA",0.147260273972603,0.0946902654867257,0.13184584178499,0.142857142857143,0.0974967061923584,0.121807465618861,0.068904593639576,"NA",0.106422018348624,"NA"],"unemployment_rate":[0.0378699812214969,"NA","NA",0.0447470817120623,0.0385964912280702,"NA","NA",0.0431778929188256,0.0326481257557437,"NA",0,"NA",0.0383817427385892,"NA",0.0361067503924647,0.0401785714285714,0.0383877159309021,"NA",0.0431177446102819,0.0335336918696615,0.0413486005089059,0.0304806565064478,0.0393996247654784,0.0434782608695652,0.0378571428571429,"NA",0.0285714285714286,"NA"]}

eslint.config.js

@@ -0,0 +1,8 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+];