Giter Club home page Giter Club logo

a_full_stack_weather_dashboard's Introduction

Quality-Match Assignment

Task Description

Create a web-frontend application e.g. with react (or simple HTML) which connects to the German weather service system and shows a graph of e.g. temperature of the last years (feel free to interpret this as you like, maybe some statistics or the last year or christmases of the last 10 years, …).

Dataset

  • DWD Climate Data Center: Historical hourly station observations of 2m air temperature and humidity for Germany, version v006, 2018
  • https://opendata.dwd.de/climate_environment/CDC/observations_germany/climate/hourly/air_temperature/historical/
  • Considering the demo usage of this application and the large data size, I selected 30 stations from the station overview list (‘TU_Studenwerte_Beschreibung_Station.txt’) which are scatted across the whole Baden-Würtenberg. Moreover, not every station in the overview list has corresponding weather dataset, so at the end, 28 station observations are used in this app

Architecture Design

architecutre

Folder Structure

+-- QualityMatchAssignment
    +-- data_load       # (one-time execution) load data from ftp to db
        +-- data_load.py
        +-- ftp_to_db.py
    +-- dataset         # a folder used to store all dowloaded data
            +-- clean_station_list.csv
            +-- [all dowloaded data]
    +-- static
        +-- chart.js
        +-- style.css
    +-- templates
        +-- dashboard.html
        +-- layout.html
    +-- app.py          # flask app
    +-- config.py       # configuration for db and ftp server connection
    +-- data.py         # query and process data

Set Up

Prerequisite:

PostgreSQL (database)
psycopg2e
flask
geopy
ftplib
pandas
zipfile

Configure: maintain your db connection parameters in config.py

Run

1) load data into postgresDB: python data_load.py
2) run web-app: python app.py [postgres password]

Demo:

  • Landing Page: Weather of Heidelberg
  • Input: a city name (better in Baden-Württenberg)
  • Output: a temperature/humidity chart with interactive legend

demo

a_full_stack_weather_dashboard's People

Contributors

gooongna 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.