Skip to content
/ iiBi Public

A vanilla Javascript data visualization of a curated selection of stocks. This uses D3.js, Alpha Vantage API, and Clearbit.

Notifications You must be signed in to change notification settings

AlexDoes/iiBi

Repository files navigation

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

    noHover

    Preview with hover

    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.

    swap

    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.

    remove

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

    About

    A vanilla Javascript data visualization of a curated selection of stocks. This uses D3.js, Alpha Vantage API, and Clearbit.

    Topics

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published