/UFO

UFO Data Set

Primary LanguageJavaScript

UFO Catcher

Web application entices users to view official UFO sighting reports and determine them to be, in fact, "alien," or bogus, "not alien" claims. Do you believe?...

Contents

Deployed Application

[Heroku] https://fast-eyrie-14169.herokuapp.com/

Video Introduction

[Vimeo] https://vimeo.com/245741367

Inspiration

National UFO Reporting Center "UFO Sightings" Database

[Kaggle] https://www.kaggle.com/NUFORC/ufo-sightings

Meet Larry

Old Man Larry

Roles

  • Jessica Lin - Co-COO, UI Director, Back-end
  • Laura Boetcher - Co-COO, Back-end, SVG Apprentice

Technologies Used

Node, Express, MySQL, Sequelize, Threejs, Chart.js, Maya (JsonLoader), SVG, jQuery, Javascript, CSS, HTML

Concept & Motivation

  • Feel (music/visuals)
  • Text (ASCII/terminal look)
  • Voting

Challenges

Threejs

Sequelize

Cursor

Hand cursor on mouse hover

light-cursor

Animated Effects

Glitch effect on application title

title-glitch

Glitch effect on message

subtitle-glitch

Snackbar popup "vote logged"

entry-logged

Abandoned elements

  • Upvote (jQuery plugin)
  • NProgress (javascript progress bar)
  • Transitions with Barba.js
  • User-submitted data
  • Animated screen loader
  • SVG button effects
Transitions with Barba.js

barbajs

User-submitted data

user-entries

Animated SVG "cow loader"

dizzy-cow

SVG with gitch effect

svg-glitch svg-glitch

SVG in <object> tag, uses CSS fill property on hover

button-hover-test

Future Features

  • User authentication
    • User can mark favorite entries
    • User can add own sighting data
    • User can fork comments, edit for spelling, etc.
  • Expanded chart options
    • More data choices
    • User-selected data content
  • Newspaper image generator
    • Render headlines of favorite/ most popular entries
    • Shareable/printable
  • Interactive graphics
    • Spacecraft changes color, lighting, etc.
    • Little green men to make appearances
    • Additional clickable elements
  • eCommerce integration
    • "I Voted" stickers
    • Fashionable aluminum hats
    • "UFO Catcher" branded binoculars, t-shirts, etc.

Testing

test1

test1

Credits