jorge-solano-avila / jorge52an.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

README Instructions

RentApp

Keywords

  • Rent
  • Maps
  • Statistics
  • Markers
  • Crimes
  • Closeness
  • Cheaper rental
  • Safety
  • Parks
  • Recreation
  • Grocery stores
  • Address
  • Distances

Description of the datasets and function design

  1. Zillow API
  1. Crimes - 2001 to present
  1. Police stations
  1. Parks
  1. Grocery stores
  1. Historical temperatures
  1. Historical precipitations

Y Do you use the mandatory dataset Climate Data Online?

Brief Description

This project shows a map with a marker indicating the current position and others markers for the affordable rental housing. Also, it filters this markers and trace routes in different ways of travel mode. Additionally, it shows a radar chart with 5 different aspects giving detailed information of the rental house.

Map view

  • Y Basic Map with specific location
  • Y Markers for location of rental housing
  • Y Labels for rental housing's names
  • Y Dialog to show detail information of a rental housing
  • Y Filters and Trace routes
  • Y Trace route in diferent travel modes of a marker to university position

Data Visualization

  • Y Use Graph? What is the type?

To show the detailed information of a house for rent a radar chart is used.

  • Y Any interaction available on the graph?

Displays a percentage by placing the pointer over one of the aspects of the chart.

Interaction Form

  • Y Any information output?

The information of a marker in dialog.

  • Y Any operation option (filters)?

In the filters the user can drag the slides or edit the input text field.

  • Y Any information input?

The parameters in the filter, the distance and the price in the rental house.

  • Y Interaction with Map?

    • Filter markers in sidenav panel
    • Trace routes
    • Show dialog in the select a marker
  • Y Interaction with data visualization?

Displays a percentage by placing the pointer over one of the aspects of the chart.

Access the application

To access the application it is only necessary to run a server in src folder since all dependencies are in the index.html and are called by CDN.

The server could be lite-server and installed with npm (npm install -g lite-server).

Web browsers tested

  • Chrome
  • Firefox
  • Edge

About


Languages

Language:JavaScript 78.5%Language:HTML 20.5%Language:CSS 1.0%