Giter Club home page Giter Club logo

severeweathervisualization's Introduction

Anytime code is pushed to this repository, the code will be deployed automatically to: https://stupefied-meninsky-03385d.netlify.app/ (the url is automatically generated ๐Ÿ˜…).

Game Plan:

  • Add Redux: โœ…
  • Add Kepler.gl (mapbox): โœ…
  • Model ArcGIS query using typescript: โœ…
  • Visualize data using Kepler.gl: โœ…
  • Make custom kepler.gl component to make/submit query -> Write a separate component to make/submit query that uses redux action: โœ…
  • Refactor: โœ…
  • Write retrospective

Notes on the project:

Redux

  • Redux is a library that allows us to manage global state in our React application. It uses the concepts of stores, reducers, actions, and dispatching to manage state. By keeping the state immutable (read-only), it is easier to debug the code later on by sending detailed error messages to the server -- the developer debugging the code can step through the state the user had that lead to the error.
  • Project Usage:
  • We will use React-Redux with a model of the data we get from the ArcGIS API. In order to easily debug the code, we will define the model using typescript.

Kepler.gl

  • Kepler.gl is a library that allows us to visualize geo-data in a map. It uses the concepts of layers, sources, and mapbox-gl to visualize data. It is a react component that works with Redux!
  • Project Usage:
  • The library requires key to use mapbox api. Since this is a demo, we will just bake the api key in ๐Ÿ˜ข. In production, we would implement authentication/authorization and access a backend api to get access token.
  • The kepler.gl version used doesn't have types unfortunately. It looks like this will change in the future, as of dec 31, 2022 typescript types are being added on the official kepler.gl repo.

Modeling ArcGIS query

  • The ArcGIS API is a RESTful API that allows us to query data from a geospatial database.
  • Project Usage:
  • We will have a custom header component that will make a query to the ArcGIS API. The query will be based on the user's input.

Todo:

bugs:

  • Get the app to resize if the window is resized. fixed!

features :

  • Add component to change the info fetched from the API. : โœ…
  • Figure out how to change the default displaying datapoints: โœ…
  • Added loading indicator: โœ…
  • styled: โœ…
  • hide the query options after submitting: in progress

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.