Trader Radar is a visual and interactive representation of how various stocks or financial instruments are performing in the market. It combines a stock heatmap, a stock search function, a candlestick chart, live market clock, and stock ticker tape to provide valuable insights and aid in decision-making.

Live Website

The heatmap is designed using a treemap algorithm which was first introduced by Ben Shneiderman, in the 1990s. The treemap is then generated using the D3 Treemap charting library.

It allows users to filter and sort the data based market index, volume, average volumne, shares outstanding, and market cap, has a click to zoom which allows a drill down into the tiniest of cells, and a tooltip upon hovering for additional stock detail.

Each cell in the heatmap is color-coded based on the stock's performance, with different shades of color representing different levels of performance, and the stocks grouped by industry.

The data for the heatmap is built by combining two API calls from Financial Modeling Prep and then custom structured with a root node, then child nodes of the stock industry, then those have child nodes with each stock, and then those have child nodes with the stock information.

Root (Stock Index Data)
└── Stock Industry 1
    └── Stock 1.1
        └── Stock Information 1.1.1
        └── Stock Information 1.1.2
    └── Stock 1.2
        └── Stock Information 1.2.1
        └── Stock Information 1.2.2
└── Stock Industry 2
    └── Stock 2.1
        └── Stock Information 2.1.1
        └── Stock Information 2.1.2
    └── Stock 2.2
        └── Stock Information 2.2.1
        └── Stock Information 2.2.2
└── Stock Industry 3
    └── Stock 3.1
        └── Stock Information 3.1.1
        └── Stock Information 3.1.2
    └── Stock 3.2
        └── Stock Information 3.2.1
        └── Stock Information 3.2.2

The chart shows the daily low, high, open, and close of a stock. Each “candle” represents a single trading day. A specialized x-axis is used to avoid gaps on the weekend when the markets are closed. The candlestick chart is generated using the D3 Candle Stick Chart charting library.

The search function in Trader Radar allows users to enter any stock ticker and instantly access live prices and news updates about the company, while also providing a comprehensive candlestick chart displaying 180 days of historical prices. With robust error handling features, the system ensures a seamless user experience by effectively handling and communicating any issues that may arise during the search process.

The dynamic ticker tape feature in Trader Radar showcases real-time stock information with color-coded indicators, where red signifies a decrease in stock value from the previous day, while green indicates an increase. Additionally, when users switch between market indexes, the ticker tape dynamically updates to display the relevant stocks for the selected index, continuously scrolling to the left and seamlessly looping around once it reaches the end, ensuring a seamless and comprehensive market overview.

The market clock feature in Trader Radar provides real-time information on market status, displaying a green color and counting down the time until market closure during trading hours, and switches to red when the market is closed. A few hours before the market opens, it shows the remaining number of hours until the market opens. The feature also accounts for all official market holidays and automatically defaults to New York City (NYC) time, ensuring accurate and synchronized market timings regardless of the user's location.

Please check out the repository's wiki for more information and documentation.

© Trader Radar