Revolutionizing Stock Analysis
Graviton is an app that provides realtime stock information and charting of historical data, with a technical predictive algorithm.
Click for an app demo: https://graviton-eabd7.firebaseapp.com
-
To provide users with a simple interface displaying real time, historical stock trends based on desired time intervals
-
Enable users to know the confidence level of the current market based on a regression analysis performed on the stock's Relative Strength Index (RSI) and Average Directional Index (ADX)
This project is built with ReactJS for its front end user interfacing and Firebase.
Fork and clone this repository into your own directory. Install the dependencies used in this project by entering the following code in your terminal (with a prerequisite of Homebrew):
brew install yarn
yarn install
This project was deployed with Firebase follow the documentation for your deployment.
- JavaScript
- ReactJS
- Firebase
- react-router-firebase-auth
- Alpha Vantage (https://www.alphavantage.co/#page-top)
- Recharts (http://recharts.org/)
Primarily built on ReactJS, the Live Stocks page of this app is based off the following React components:
The main components were RSI (in blue, also the landing page), stock price (green) and ADX (in red), with RSI being the parent of both stock price and ADX.
Linear regression aims to fit a linear equation of the form Y = a + bX to the observed data (think a line of best fit). In which for this project, X will be the historical RSI, also known as the explanatory variable while Y is the predicted RSI, the dependent variable.
a, the intersect and b, the slope can then be determined as shown in the formula below, based on historical records of the RSI and stock price.
Running regression analysis on the historical Relative Stock Index and Average Directional Index of the stock, we were able to estimate an expected price of the stock, thereby predicting the trajectory of the price (will the price increase or decrease in the forseeable future)
We decided to increase the analytical tools by providing a price adjusted RSI that adjusts the overbought and oversold levels. The is a technical momentum indicator used to indicated overbought or oversold conditions in the market, that compares the magnitude of recent gains and losses over a specified time period. (http://www.investopedia.com/terms/r/rsi.asp).
However we find this lacking in accuracy during periods of uptrend and downtrend.
We calculated the new overbought and oversold levels by using geometric average to determine the deviation, which provided us with a more price sensitive benchmark.
To utilize the Recharts API, we had to import it into each component that has to render a graph as follows.
import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Legend, ReferenceLine } from 'recharts'
Followed by the JSX below that is called in the rendered return of the component, that can be easily customized.
<LineChart width={700} height={200} data={rsiData}
margin={{ top: 5, right: 0, left: 20, bottom: 5 }}>
<XAxis hide='true' dataKey='date' padding={{ right: 20 }} />
<YAxis type='number' domain={[25, 75]} padding={{ top: 0, bottom: 0 }} />
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<ReferenceLine y={70} label='Max' stroke='red' />
<ReferenceLine y={30} label='Min' stroke='red' />
<Legend />
<Line type='monotone' dataKey='RSI' stroke='#82ca9d' strokeWidth={2} dot={false} />
</LineChart>
In the calculation of the Geometric Average, the formula used was as such,
Geometric Average = (RSI1 x RSI2 x RSI3 .... RSI(n))^(1/n)
However, in code, an error would occur because the multiplication of a large amount of RSI data led to the value to become infinity.
A fix was to manipulate the mathematical formula into
Geometric Average = (RSI1^(1/n) x RSI2^(1/n) x RSI3^(1/n) .... RSI(n)^(1/n))
Code used:
parseFloat(Math.pow(x, (1/xRSI.length))).toFixed(2)
On the first deployment to Firebase, an NPM regression package used encountered an error with create-react-app, being that
npm run build fails to minify
More information regarding the error can be found in the link below. Due to constraints of time, the NPM package had to be abandoned and the regression analysis hand coded on our own.
A 404/Not Found html file was in the root directory to handle cases when a user tries to access a page that does not exist or to prevent broken links in other cases. However, it was found on deployment, that whenever the user refreshed the current page, there will always be a redirect to this 404 html file.
A fix was to include a URL rewrite in the firebase.json file as follows:
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
- Incorporate more stocks
- Have multiple regression lines inside the graph
- Include more technical indicators
Tyler McGinnis' react-router-firebase-auth
Our GA instructor Prima Aulia Gusta and teaching assistant Shimei Wong