An introduction to Charts

An introduction to the charts package at IG and a deeper look into some of the challenges tackled

Transcript

1. Charts: A Technical Introduction Sergio Santos 28 September
2. Overview §  What is IG? §  What are Charts? §  Tech stack §  Challenges §  Q&A
3. What is IG? A world leader in financial trading
4. Products Cash instruments §  Shares §  Foreign Exchange §  Bonds Derivatives §  Contracts for difference §  Futures §  Options
5. How customers make money The goal is always to benefit from movements in price. Clients may employ different strategies… §  Focus in specific markets §  Trade with leverage in volatile markets §  News and other research tools §  Statistical analysis
6. What are charts? Visual representation of the price of a market over time How are they useful? §  Easier to spot trends and identify patterns §  They help people make more informed trades
7. Tech Stack §  LightStreamer §  D3.js §  RequireJS §  HandJS §  Grunt §  Testing Tools (Mocha / Karma / ChaiJS / CucumberJS) §  Git §  ESLint No external framework!
8. Challenges Just a few examples… §  Delivering real-time data §  Building a usable context menu §  How to quickly add drawings
9. Delivering real-time data Our 150K active traders need accurate, real-time data. §  Low Latency is key §  Affects trading decisions §  Difference between making a profit or loss
10. Delivering real-time data Pulled Data §  Historical data Pushed Data §  Streaming data Back-end Systems LightStreamer Server Web Server Client
11. Streaming data Lightstreamer is a real-time messaging server. §  Implements both Websockets and Comet §  Supports any client-side platform §  Integrates with any back-end infrastructure §  Bandwidth control §  Frequency control (how many updates per second) §  Supports custom authentication
12. Using Lightstreamer The Lightstreamer client allows the application to subscribe to real-time data pushed by the server and to send any message to the server. Example of an item §  “Apple Share”. Some fields would be: bid price, ask price, volume and timestamp https://github.com/Lightstreamer/Lightstreamer-example-HelloWorld-client- javascript
13. Using Lightstreamer
14. Rendering the data Data visualization translates data into a graphic representation Bid 90 Ask 100 Timestamp 1 Bid 75 Ask 85 Timestamp 1 Bid 70 Ask 80 Timestamp 2
15. d3 §  A data visualization library §  Makes DOM selections easy to manipulate §  Based on HTML, SVG and CSS §  Provides data binding between DOM elements §  Works well with scales (linear and non-linear) §  Has several utility functions that help you to draw paths https://d3js.org/
16. The enter-exit-update pattern var cities = ["Krakow", "Warsaw", "Gdansk"]; var selection = d3.select("body") .selectAll("p") .data(cities) Data Elements Enter Update Exit
17. Building a usable context menu The context menu allows users to setup a chart their way. http://bootsnipp.com/snippets/featured/multi-level- dropdown-menu-bs3 §  What about positioning? §  When to activate menu items? §  How to distinguish between hovering over a menu item vs navigating into a submenu's contents.
18. The algorithm basics §  Keeping track of mouse locations §  Checking if we’re actually moving the mouse §  Calculate slope between current point and upper-right corner of the menu If the slope increases over time, we’re moving towards the sub-menu
19. Improving context menu function onMenuRowEnter() { … possiblyActivate(this); } function possiblyActivate(row) { const delay = activationDelay(); if (delay) { setTimeout(possiblyActivate(row), delay); } else { activate(row); } } …
20. Re-thinking Drawings Drawing tools assists users in trading. Currently, a minimum of 4 clicks is needed to create a single drawing. Does it feel natural? How can we make it more intuitive?
21. Questions sergio.santos@ig.com @theportugeezer https://uk.linkedin.com/in/sergioruisantos