Group Project
Creative Computing / Year 3

alt_text
Jamie Hyland

Jamie Hyland

Creative Computing

Year 3

Eleanor Noonan

Eleanor Noonan

Creative Computing

Year 3

  • Project Title Stock Watch - a real time data visualisation app using D3.js, Node.js, Websockets, Perlin Noise and MongoDB
  • Course BSc [Hons] Creative Computing
  • Year 3
  • Contact Info JamieHyland01@gmail.com
    ele.noonan@gmail.com

Stock Watch - a real time data visualisation app

Given the abundance of data available globally and the expectation that it will be delivered instantly across the web in an easily digestible form, the team set about understanding how real time data is created and how in turn this data can be visualized effectively in real time using pattern recognition. The aim was to generate an application which would reflect this research and enable the team to utilise evolving technologies and enhance their technical knowledge and skills in the field of data visualisation.

Project Description

The team set out to explore how real time data is generated at the back end and how it can be presented to the end user with real time data visualisation and pattern recognition techniques. It was inherently understood that this project must reflect cutting edge technologies that would handle the dynamic data and deliver a instantly recognisable data visualisation. Financial stock price data, with a focus on open, high, low, close values, was selected as a suitable data set.  The development lifecycle for the Stock Watch app was guided by the use of Agile Software Development Methodologies. At the back end, the decision was taken to randomly generate live data using Perlin Noise which uses a mathematical algorithm to produce a naturally ordered sequence of pseudo numbers. Node.js was employed as an open source, cross platform, JavaScript runtime environment using websockets. It is event-driven, single threaded and capable of asynchronous I/O allowing for real time web apps to be optimised for scalability.  For data storage, MongoDB was selected for storing data in JSON format in a hierarchical architecture. Historic 1-minute bar objects are called from the Mongo DB database and returned to the client for rendering as candlesticks. Meanwhile, the newly created random data values are being generated and streamed every second to the front end to be rendered in the current dynamic candlestick. At the end of 1 minute, the Node server retrieves the highest value for High, lowest value for Low, First value in the array for Open and Last value in the array for Close to form a 1-minute object. This 1-minute object is sent to the client for rendering as a new Candlestick in D3.js and the MongoDB database for storage. For 5-minute bar Candlesticks, 500 historic objects are called from the MongoDB database; parsed into 100 arrays of 5 objects; from each mini array, Node retrieves the Highest of high values for High, Lowest of low values for Low, First value in the array for Open and Last value in the array for Close to form a 5-minute object containing these 4 values . Each object is added to a new array containing up to 100 5-minute objects which are sent to the client for rendering.  At the front end, the data comprising live 60-second stock price values and historic 1-minute/5-minute bar objects are streamed into the bespoke D3.js candlestick charting module.

Project Findings

Launched in a minimalist, user friendly and interactive UI the app delivers a dynamic real time Candlestick Chart visualisation. The user is presented with instantly recognisable industry standard candlesticks depicting open, high, close and low values for a stock on a 1-minute bar or 5-minute bar. The user’s attention is drawn to the current minute of changing values which is visualised by rendering a hollow candle which fluctuates according to the stream of data. The user has the ability to pan from left to right to reveal historic candlesticks which are formed at the close of each bar.

Group Project
Creative Computing / Year 3