Real Estate Information Service for Urban Development and Planning

Team Leader : Joel StellTeam Members : Joseph DeLeone, Amanda Eljaouhari, Dakotah Pettry Faculty Advisor : Dr. Sunnie Chung (Faculty Sponsored)

Fall 2018 – Spring 2019EEC 493/494

Department of Electrical Engineering and Computer Science

Presentation Agenda● Abstract● Background● Introduction● Project Objectives● Technical Approach

○ System Design○ Sample Runs○ Project Timeline○ Project Budget and Budget Justification

● Conclusion● References

Project Abstract● Design and Development of a Real Estate Information Service System

for Urban Development and Planning.

○ Collecting and Processing of Big Data of Various Types.

○ Design and Build Semi-structured Database with MongoDB.

○ Building a Web Application that Integrates AngularJS, NodeJS, and MongoDB in Order to Dynamically Visualize Information per User Request in 2D and 3D Visual Maps, Charts, and Tables.

Project Objectives

1. Design and Build Web Service System to Provide Real Estate Market Information for Public to Access.

2. Design a Web Application that :○ Dynamically Visualizes a User Interested Area in a 2D or 3D Map○ Retrieves Related Information ○ Discover Intelligent Information from Data Analytics on the

Related Data in the Selected Area.3. Transform a Variety of Big Data Formats such as Unstructured,

Semi Structured, and 3D Geo Spatial Data Types to Design and Build Semi-Structured MongoDB Database.

Background● The Big Data is Broken Down into Comprehensible Descriptions of

Neighborhood Real Estate and Labor Market Dynamics.

● Big Data Sources○ Cuyahoga County Open Data

○ https://data-cuyahoga.opendata.arcgis.com/datasets?t=Property%20and%20Use

○ U.S Census Bureau○ https://lehd.ces.census.gov/data/

● Collect the Digitized Records and Perform Large Scale Data

Analytics

● Currently Based on Cuyahoga, but can be Applied to Other Regions.

Introduction● AngularJS

○ Used to Make the Web Application Which Connects to MongoDB Using NodeJS○ Two-Way Data Binding Improves Execution Because it Allows for Automatic

Synchronization

● MongoDB is Our Solution to Handling Big Data : ○ Able to Handle a Variety of Big Data Types Efficiently○ Works well with JSON and GeoJSON data○ Easily Communicates with Node

● Communication via NodeJS○ Runtime Environment that Retrieves and Displays Information on the Web

Application○ Handles Client and Server Requests

Sources of Big Data

System Design

Project Methodology

Technical Components

● MongoDB Design○ ~250,000 Documents In 1 Collection in a Single Database○ Java Application that Parses JSON File and Inserts Into Database

■ Reads JSON File Input Byte by Byte, Inserting Each Lot as Its Own Document■ All lots are compiled into 1 collection■ Output: Automated insertion into database■ Can be reapplied in other instances

● NodeJS○ Receives user input via node.response○ Breaks response into an array of the JSON structure○ Queries Mongo with array○ Returns results to results webpage

Technical Components

● Introduction Webpage○ Uses HTML/Cascading Style Sheet to Simplify Content Position and Style○ Uses AngularJS to implement MVC by Splitting Application Into Components &

Serves as a Pipeline.

● Results Webpage○ Receives Results Data via Post○ Visualizations:

■ HTML Tables: Compressed Table & Large Pop Out Table■ ZingChart Treemap: Highlights Searched Cities, and Sorts via Size■ ChartJS Radar Chart: Visualizes 5 Different Analytics Per City■ ChartJS Dynamic Charts: 5 different analytics per city between bar, pie, and line■ 2D/3D Map by Leaflet: Visual Representation of Returned Lots Outlined on Map■ City Summary: Compares the First City Searched to Ohio averages`

Sample Run

User Input

Parcel city: “BEDFORD”

Sample Run

All Lots Returned Matching User Input

Parcel city: “BEDFORD”

New Sample Run

User Input

City: “BEREA”

New Sample Run City: “BEREA”

New Sample RunZoomed in 3D map Zoomed out 2D map

DEMO

Project Updates

● Web Page Redesign○ Introduction Page

■ Auto-Fill Search Dropdown■ Revamped Layout

○ Results Page■ Condensed Default Searched Information ■ Implemented Expanded View Option for More In-depth Information■ Decreased Amount of Returned Results in Default View■ Implemented a Variety of Data Visualizations

● Node Server Communication Structure Redesign○ Formatted Array Query○ Request/Response for Serving Information to Webpage

Results and Discussions

● Problems Encountered○ Website Latency Due to Large Amount ( Over 1,000) of lots on 3D map○ Limiting Amount of Lots Within the Current View

■ Panning around removes and adds lots in view○ Overwhelming Data Has to be Condensed Into Meaningful Descriptions

■ Different, Dynamic Visualizers to Display Data○ Incorrect Data Led to Fragmentation

■ Lots have Incorrect Spellings or the Wrong Location

● Results○ Performance of System Design Proved to be Successful for Analyzing Big Data○ Can Be Utilized in the Future for More Complex Real-Time Data Analytics

Project Timeline1st Semester4 Project phases:

Introduction-Team Introduction

Design-Research Software-Project Structures and Algorithms

Implementation-Build Database, Website-Build Node/Angular Files-Integrate Everything

Finalizing-Test Integration-Clean up Code

Project Timeline

2nd Semester3 Project phases:

Implementation-Build 3D Map-Build Additional Visualizers-Incorporate Data Analytics

Testing-Test Final Websites

Finalizing-Refinement of System-Implement on Big Data Lab

Project BudgetItems Cost($) Date of Approval Total Cost($)

Server System (below)

Ram 500

Motherboard 160

CPU 515

CPU Cooler 30

GPU 560

Power Supply 130

Hard Drive 65

SSD 100 Nov 21, 2017 2,060 (Budget approved)

S & H 39 2,099

Updated GPU 730

S & H + Tax 13.75+59.50 Nov 21, 2017 803.24

2,342.24

When Dealing with Big Data, the Importance of a Powerful System that can Handle Serving Big Data to Multiple Systems can’t be Stressed Enough.

ConclusionIn Summary,

The Final Project Fulfills all Project Objectives with...

1. The Creation of a Web Service that Receives User Input2. Transformation of Big Data into a Semi-structured MongoDB3. Dynamically Visualizes User Input in a Multitude of Ways

Ultimately, This Leaves an Easy-to-Use Web Service That Can Display Large Scale Census Data of the Cuyahoga County Area

Future Upgrades & Recommendations

○ Increase Complexity of Data■ Adding Demographic on Residents and Working People

○ More Complex Descriptive and Predictive Data Analysis○ Additional Search Functionality Features○ Extend Data Visualizations

■ Provide More Dimensions for Advanced Analytics○ Angular is Too Complex for an Application of Small Size

■ Simpler Framework is Recommended

References[1] Code Handbook. (2018). How To Use Leaflet In Angular Web Apps - Code Handbook. [online] Available at: https://codehandbook.org/use-leaflet-in-angular/ [Accessed 17 Nov. 2018].

[2] Depts.washington.edu. (2018). [online] Available at: http://depts.washington.edu/celtweb/wordpress/wp-content/uploads/2014/12/Assessing-Lifelong-Learning.pdf [Accessed 19 Nov. 2018].

[3] Evince, “MEAN Stack Architecture: AngularJS, NodeJS, ExpressJS & MongoDB,” Evince Blog: From Tech Gurus to Techies, 15-Oct-2018. [Online]. Available: https://evincedev.com/blog/mean-stack-architecture/. [Accessed: 25-Nov-2018].

[4] Jtblin.github.io. (2018). angular-chart.js - beautiful, reactive, responsive charts for Angular.JS using Chart.js. [online] Available at: http://jtblin.github.io/angular-chart.js/ [Accessed 17 Nov. 2018].

[5] Nspe.org. (2018). Code of Ethics | National Society of Professional Engineers. [online] Available at: https://www.nspe.org/resources/ethics/code-ethics [Accessed 19 Nov. 2018].

[6] www.tutorialspoint.com. (2018). MongoDB Quick Guide. [online] Available at: https://www.tutorialspoint.com/mongodb/mongodb_quick_guide.htm [Accessed 19 Nov. 2018].

[7] MVC: Model, View, Controller,” Codecademy. [Online]. Available: https://www.codecademy.com/articles/mvc. [Accessed: 29-Nov-2018].

[8] Validator.w3.org. (2018). Help for The W3C Markup Validation Service. [online] Available at: https://validator.w3.org/docs/help.html [Accessed 29 Nov. 2018].