Feeling Lucky

A simple visualization app that uses React + D3 to help students find a place close to school and cheap to rent! You can read more about it here

How to get started

First, you need to update the config.json file and provide your Google Maps API key, a target URL and the CSS selectors you care about.

• You should familiarize yourself with attr, selector, and listItem parameters of scrape-it
• You have to be careful when adding the CSS selectors. There may be multiple dom elements matching the same selector when you only need one element. This can cause unexpected behaviour

You can then run the bot,

npm run bot

which scrapes all the data you specified in the config.json file into a list and writes it into data.json

Next, run the app

npm start

Now when the client sends a get request to /api/items specifying the destination as a parameter, we return a list of items with duration like the following

[
  {
    "price": 800,
    "images": ["an Image URL"],
    "latitude": "49.2797",
    "longitude": "122.9188",
    "link": "link to the original posting",
    "duration": 3600
  }
]

Resources

• "Building, home, house" icon by Alex Timashenka used under "free for commercial use" license.
• D3v4 forceSimulation with React by Jack Herrington
• Static Force Layout by Mike Bostock
• Step 4 - Voronoi Scatterplot - Extra interactions by Nadieh Bremer
• How to get create-react-app to work with a Node.js back-end API by Esau Silva