Posts


Data Visualization using JavaScript



One of my projects during the last year of my master's degree was Data Visualisation for Treasury Management.
The objective was to use Data Visualisation as a tool to understand, drive insights from and optimize the company's data, all while improving treasury management and employing a variety of plot types for representation.
The project was divided into, Data Collection & Preparation, and Data Visualisation.
Data collection was done using REST APIs, the company uses a CRM software, thus, data collection and preparation were about working with the CRM API.
I am going to present some of the plots that I have used in the project alongside the JavaScript libraries that I worked with.
Side note : the data presented here is different from the company's real data but the overall idea and conclusions remain the same.

Bar Chart

A bar chart, also known as a bar graph, is a graph used to represent the values and magnitudes of categorical data. The values and their magnitudes are depicted using rectangular or vertical bars with lengths or heights proportional to the values they represent.

This bar chart was created using Chart.js, a JavaScript library. A bar chart is used for visualizing amounts.
We can deduce that the months of April and May represent the months with the highest number of new sales opportunities.

Heatmap

A heatmap is used for the same purposes as a bar chart. It can also be used for visualizing distributions. The colors on the heatmap represent a range of values, going from light to dark colors. The darker the colors, the higher the values.


Distribution of customer orders

This heatmap was created using D3.js, a JavaScript library.
We can observe that there is a good overall distribution of orders with values ranging from 5K to 50K.
June, July, and August are the months with a reduced quantity of orders and relatively lower amounts; usually, there is a decrease in activity during the vacation periods.

Pie Chart

A pie chart is a type of representation that allows you to visualize data proportions. It is often used to visualize categorical data or percentages and is presented in the form of a circle divided into multiple categories.


Revenue based on existing and new customers

This pie chart was created using Chart.js, a JavaScript library.
We can deduce that the revenue in 2022 is primarily generated by the new customers of 2022. The revenue generated by the existing customers accounts for more than a quarter of the total revenue, which is encouraging as it indicates that these customers continue to place orders.

Sunburst

A sunburst is a type of representation that allows you to visualize hierarchical proportions of data by subdividing each category into multiple layers and levels, while showing the relative proportions at each level. This diagram is particularly useful for representing proportions with multiple levels of hierarchy.


This sunburst was created using Plotly.js, a JavaScript library.
You can quickly perceive the proportions of all the company's expenses with their subcategories.
It is an interactive graph like the others, and by clicking on, for instance, "Purchase of Raw Materials," you obtain a pie chart with only the proportions of its subcategories, "Production" and "Information Technology Equipments" and that's where the advantage of a sunburst truly lies.

Line graph

Line graphs are a type of representation that allows and facilitates the visualization of relationships between variables. They are frequently employed for visualizing time series data and continuous data in general.

This line graph was created using Chart.js, a JavaScript library.
Line graphs are great for visualizing trends. I used a three-month moving average to smooth the cash flow trend curve.
The moving average is a simple method that helps reduce isolated fluctuations and highlights trends more clearly.
We observe a slight improvement in the readability of the cash flow trend curve, and we can better discern its variations during the study period of 2022.

Sankey

The Sankey diagram is a type of visualization used to represent data flows and processes. It was invented in 1898 by the Irish naval captain, Matthew Henry Phineas Riall Sankey.
The data below represents six products from the company labeled as Product T, Product S, Product A, Product M, Product B and Product D.

This Sankey diagram was created using Google Charts, a JavaScript library.
After analyzing the costs and sales of each product, it is evident that the Product S is more advantageous to sell than the Product T, even though the latter is the best-selling product. This is because the manufacturing cost of the Product T is higher, and its sales are similar to those of the Product S.
The Product A has the highest cost compared to its sales.
Other products that are less popular, such as Product M, Product B, and Product D, are excellent products with a reasonable cost-to-sales ratio. Therefore, it would be interesting to promote them more.


Previous : LSTM Models for Time Series (Stock Market Dataset)
Newsletter version


Join my newsletter for similar articles and early access