JavaScript Project: iiBi

Overview

iiBi is a simple visualization of stock growth. iiBi allows the user to select from a series of stocks to display the respective stock's performance.

The user will be able to smoothly transition between stocks to display and the user will be able to follow along the path of the data. The data will display the appropriate data relative to the position of the cursor over the graph.

Functionality & MVPs

In iiBi, users will be able to :

Select a stock to generate a graph of it's performance

Track the change in stock price with a marker

View data as an overlay on the graph

Toggle to display different stock graphs

Technologies, Libraries, APIs

This project will be implemented with the following technologies:

D3.js to render the data

Webpack to bundle the source JavaScript code

Babel to transpile JavaScript for older browsers

Alpha Vantage API to retrieve stock history

Clearbit API to retrieve company logos

Preview & Snippets

Preview without hover

Preview with hover

Snippet for switching display data from left to right(gains/losses as well) according to data point

One of the issues I faced while displaying the charts is having the text overlap the line, one way to resolve this was by determining if the associated data has a history of downward trends. This also adjusts the daily change to show corresponding colors in relation to gains/losses since the previous data point.

Snippet for removing the center image for the graphs

This was just a simple jquery to remove the image in the center before rendering the chart.

Disclaimer: I am not a financial advisor, everything here is used for entertainment purposes only!