View
6
Download
0
Category
Preview:
Citation preview
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].
Recommended