Giter VIP home page Giter VIP logo

census-data-on-interactive-maps's Introduction

census-data-on-interactive-maps provides the architecture skeleton using ReactJS at the front end, backed up by Google Maps API, Firebase Auth, Realtime Database, and Functions.

The data embeded provides a visualized interface with Australian Bureau of Statistics (ABS) census data and NASA SEDAC geographical data for identifying locations based on census parameters, such as average income and age in North Sydney.

App Architecture Diagram

architecture-census-data-on-interactive-maps

Final Output (aka Website UI)

homepage-census-data-on-interactive-maps

Functionalities

  • Display a map from Google Maps API onto ReactJS frontend
  • Get population density images from Cloud Storage and add them to the map
  • Allow users to select different census parameters, and filter areas with the selected parameters
  • Allow users to sign up using their Google account information, then automatically create a new user document in the system’s NoSQL database
  • Create a RESTful API at the Node back end for different applications to consume the data

Installation

  1. Get Google Maps Javascript API

  2. Google Earth Engine API

    Get Google Earth Engine API key.

    Select and customize preferred earth engine data. Then in Earth Engine Code Editor, export data layer to cloud storage bucket.

  3. ABS Census Data

    Download census data and unzip it. Select desired table and export it in CSV format. Then convert it into JSON format.

  4. Setup Firebase Database and Authentication

    Set up Firebase project in Firebase console.

    In Firebase Realtime Database, upload cleaned census JSON data. In Firebase Authentication, enable Provider: Google

  5. Create Firebase local environment to interact with Firebase Cloud

    Install Firebase CLI: npm install firebase-tools -g

    Initialize Firebase environment: firebase login

    Initialize Firebase Functions: firebase init functions

Run Project

  1. In server/functions: npm install

  2. In root, run the React frontend: npm install npm start

  3. In server folder, run Node backend locally for serverless functions: firebase serve

Deployment

Deploy both React app and Node API at the same time

  1. In root, use webpack to generate index_bundle.js: npm run build
  2. Ensure all static assets and index.html are inside server/bundle
  3. In server folder, firebase deploy

If modify React and run build again, need to run firebase serve again before firebase deploy

census-data-on-interactive-maps's People

Contributors

awengine avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.