Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
.ebextensions
READMEs
bin
db
public
routes
views
.gitignore
README.md
app.js
package-lock.json
package.json

README.md

Data Structures Final Projects

Fall 2018, Parsons School of Design

Professor: Aaron Hill

The working app housing the endpoints and front-end interfaces for all three of my final projects can be accessed here. The endpoints link routes to three individual endpoints that were not explicitly used in final interfaces but served as the starting-point for interface development, which I built for weekly assignment 10. This app was built in express with support from handlebars and was stood up using AWS Elastic Beanstalk. These final interface designs are only directly supported in Google Chrome.

Final Projects

Each final project has its own documentation page (within the READMEs folder) covering decisions and assumptions made during interface design and development, the back-end data queries that serve data based on those decisions and assumptions, mapping of the data served from these queries to the visualization, and any next steps I'd like to pursue for each project (that would be outside the scope of this course):

Bringing Data Into Front-End Interfaces

My approach in bringing data from the database into the front-end interfaces for each project was:

  1. Write all front-end JS code inside script tags within each views/project.hbs handlebars html template – this made it easy to pass handlebars variables directly into my front-end JS code

  2. Initialize an empty list in my front-end JS code, adding a handlebars variable after that empty list:

let mapMarkers = [];
{{{markers}}}
// {{{markers}}} is a handlebars variable that will be populated with JS code to populate the mapMarkers list
  1. Query data in client-end JS code (routes/project.js), returning the minimal amount of data needed based on what will display on the front-end page (either through the default view or after user inputs), with every row of data returned being rendered somehow on the front-end interface.

  2. Write a string of text that will be passed into my handlebars variable (within script tags) as front-end JS code to execute when the app is loaded. Populate this text by looping through each row of data returned from my database queries, adding a list.push command for that row of data:

let markers = '';
// this variable will be the JS code that will populate an existing list with all my individual marker data
let aaMeetings = qres.rows;
// this should be a list that returns one row per geoLocation
client.end();
for (let a=0;a<aaMeetings.length;a++) {
      let meeting = aaMeetings[a];
      markers += 'mapMarkers.push('+JSON.stringify(aaMeetings[a])+');'
      // this will add JS code ot the markers variable that pushes each individual data point into the empty mapMarkers list
}
  1. Pass that string of text into the handlebars variable I established in the front-end hbs file, so that when the page is loaded each individual row gets pushed into the list I established on the front-end:
res.render('aa', {title: 'AA Interface', hours: hours, miles: miles, markers: markers})
//In this case the markers variable is the string I populated with a mapMarkers.push() for each row of data
  1. Use the now populated list in my front-end code to generate each visualization