Chad-Thackray
This video tutorial covers the step-by-step process of building a customizable and responsive order book dashboard visualization using Plotly Dash and Python, with live data being streamed from Binance. The presenter provides the necessary code and explains important aspects of Plotly Dash, such as callback functions, data retrieval, deep customization, and aggregating datasets. The video tutorial also discusses how to add drop-down menus to the dashboard to allow users to select different cryptocurrency pairs and change various parameters, such as precision and aggregation levels, and how to add styling to the dashboard to make it more visually pleasing. Additionally, the speaker demonstrates how to create reusable components in Plotly Dash using functions and how to add the mid-price to the visualization with precision adjustments. The overall tutorial is beginner-friendly and provides a solid foundation for building more advanced dashboards for trading needs.
In this section of the video, the presenter demonstrates how to build an order book visualization using Plotly Dash and Python, with live data being streamed from Binance. The front-end dashboard is compatible with a variety of data sources and can be customized with different aggregation levels, pairs, and precision. The presenter provides the necessary code and explains the fundamental aspects of Plotly Dash to allow viewers to create more advanced dashboards for their own trading needs. The video provides a step-by-step tutorial for beginners, with instructions on setting up Plotly Dash, creating and customizing the dashboard, and running the server with debug mode.
In this section, the instructor focuses on building the functionality needed for a data table and uses a callback function for inserting data into it. The data table uses Dash underscore table and is placed inside a div with an ID to activate the callback. An interval is used to regularly scrape book data from the data source and update the table. The update order book function is responsible for grabbing, processing, and aggregating the data before exporting it to the bid table. The Binance documentation is used to find the order book endpoint URL.
In this section of the video, the presenter explains how to retrieve order book data using the Binance exchange, but notes that the tutorial is not specific to Binance and can be applied to other exchanges. The data is retrieved by providing two parameters: the symbol and the limit. The retrieved data is in a format with IDs for the update, a list of bids with price levels and quantities available, and a similar setup for the asks. The tutorial covers how to convert this data into a pandas data frame for easy data analysis and how to change the column names and data types. Finally, the tutorial shows how to display the gathered data from the data frame.
In this section of the video tutorial, the presenter works on outputting the bid dataset in a format that is understandable by data tables. The bid dataset is converted to a list of dictionaries so that each dictionary represents one row in the table. The presenter then adds styling to the data table by constraining its width and limiting the number of rows shown to only the top few bids. The next step is to aggregate the bids dataset to different price levels. The current top 10 bids are still too granular to provide meaningful information about the market.
In this section, the video creator discusses how to aggregate an order book into different price levels, as setting the levels to the lowest granularity is not hugely useful. They introduce a new function that takes the full list of bids and condenses it down to a given level of granularity that is customizable. The function is written in a way that it can be applied to both the bid and the ask, and the aggregation level can be set through a dropdown menu. The function calculates the smallest value in the bid book by dividing it by the aggregation level and rounds it down to the nearest multiple of that level, and this works for any aggregation level and any price.
In this section, the speaker explains the process of getting the bounds for the aggregation levels and generating different bins based on volumes. They start by calculating the max and min values using the ceil and floor functions and adding and subtracting one, respectively. Using a list comprehension, they generate the level bounds, which represent the different numbers. They then use the pd.cut function in python to get the different bins by setting different bins equal to the level bounds. Finally, the speaker explains the use of the right variable in deciding whether a value on the right edge of the bin should be included or not, depending on whether it is bid or ask.
In this section, the developer is modifying the existing function to allow for programmatically determining the side of the order book. They also address an issue with decimals not being understood by pd.com and convert necessary values to floats. The binning function is printed out to visualize progress, and they move on to aggregate the values in each bin using Group by and summing the quantities together. They also fix a mistake where the bins were closed on the right instead of the left for the bids. Finally, they add a new column for the price level.
In this section, the speaker explains how to label and aggregate the data for the order book visualization. They implement a Lambda function to easily reuse it for both bids and asks. They create a new column for prices, removed unnecessary rows, and aggregate to arbitrary values. They also implement a drop-down menu for users to change the aggregation level without having to dive back into the code. Overall, all the basic functionality for visualizing an order book is implemented.
In this section, the video explains how to create a reusable component in Plotly Dash using a function that generates a dropdown menu with options for aggregation levels. The function creates a div container with a title and a dropdown menu, and can be called with parameters to customize the options. The video also shows how to add this component to the layout and how to use it as an input for a callback, which updates the visualization based on the selected aggregation level.
In this section, the speaker discusses adding a drop-down menu to the dashboard to allow users to select different cryptocurrency pairs to visualize. They explain how to copy and paste code to add the new drop-down and show how to extract the value from the selected cryptocurrency pair. They also go over some issues with displaying accurate prices and sorting data correctly before implementing a descending sort order. Finally, they add some styling to the dashboard to make it more visually pleasing.
In this section, the speaker adds styling to the dashboard using flexbox to align the columns properly and sets the height to ensure that the items are centered on the screen both horizontally and vertically. He then adds padding to the drop-down options and creates the Ask table using the same process as the Bid table. The only difference is that instead of finding the largest Bid, they find the smallest Ask to ensure they sort correctly. Finally, the speaker verifies that the aggregation works correctly and that the items are displayed in descending order for both the Bid and Ask tables.
In this section, the speaker discusses how to add the mid price to the visualization using an H2 tag and setting the output to the children attribute. They then add two new dropdowns to adjust the amount of decimal points shown for the quantity and price precision, with the goal of preserving consistency to make the visualization easier to read. After adding the dropdowns to the function inputs, they use a lambda function to format the columns in the data frames to the desired precision level.
In this section, the video tutorial dives into setting values for the bid and ask data frames using the quantity and price columns. A Lambda function is used with a formatting string to ensure precision in the data frame. The video goes on to add styling to the dashboard, including a gradient color scheme to show volume and changes to the text color, as well as removing headers to improve readability. A new function called table styling is created for this purpose, adapted from the Plotly Dash documentation.
are also outputting the style data based on the conditional styling dictionary. The dictionary contains instructions for changing the table's colors based on the bid or ask side, which is determined by the user input. The dictionary includes instructions for changing the background and font colors as well as the transparency level of the bars. To find the background color value, the video author recommends downloading the variables.css file from the Bootstrap website and looking for the relevant variable in a text editor. The updated function now returns the table data as well as the conditional styling data, which will be used to style the table in the next section.
going to refresh the page and now the tables look more symmetrical and consistent with fixed widths for the cells. The video tutorial explains how to add table styling to display bid and ask data frames side by side, including changing font and background colors, removing headers, and setting minimum, maximum, and actual column widths to avoid inconsistent cell sizes. The final result is a dashboard that provides a neat and easy-to-read visualization of the order book data.
In this section of the video, the presenter makes some quick fixes to the styling of the order book visualization dashboard, centering all text and ensuring that the columns have uniform width. Following this, he moves on to creating a gradient in the bar, which involves adapting the table styling function to create a set of equal-sized bins. Each bin would represent a range of values in the data. The gradient in the bar would correspond to the specific value's percentile in the data, with each bin being assigned a gradient. The presenter creates two variables, bounds and ranges, to help split up the range of data into different percentiles. The calculations involved may be a bit messy, but can easily be implemented with the code provided in the documentation.
In this section, the speaker explains how to add a conditional styling dictionary for every percentile in Plotly Dash. This is done by checking how high the quantity is relative to the maximum and minimal values and therefore assigning how wide this bar should be. The speaker also mentions that this technique may not be the most performant since 25 different possible conditional styling options are being added. They provide an example using the filter query and show how to define the minimum and maximum bounds, check the column ID, and apply the formatting to change the background.
In this section of the video, the speaker explains how to use CSS to create a linear gradient background for visualization purposes. The process for creating a gradient involves selecting an angle, colors, and percentages to create a smooth transition of colors across the background. The speaker then goes on to show an example using Binance's order book, specifying where the color starts and ends for the bar and background color in each cell of the order book. After solving a debugging issue where the wrong variable was used, the final visualization is achieved.
In this section, the speaker demonstrates the use of the order book visualization to collect and present data on different levels of aggregation. By adjusting the number of data points collected, users can increase or decrease the number of price levels displayed and the accuracy of the mid-price. The speaker notes the importance of having an accurate mid-price and demonstrates how to change the precision level to maximize accuracy. Finally, the speaker suggests a quick fix to the problem of dot alignment in tables with different magnitudes, which involves aligning everything to solve the issue.
In this section, the speaker explains how to align the text in the visualization by adding padding to the right side. They first demonstrate how right alignment can fix the problem but would not center the text anymore. Then they suggest adding padding to keep things in the middle while aligning them to the right. The speaker admits that a fancier solution could account for the number of characters and adjust the padding accordingly, but it would be a lengthy topic for another video. Finally, the speaker congratulates the viewers for following the tutorial and suggests checking the video playlist in the description for more advanced dashboards.
No videos found.
No related videos found.
No music found.