Using Python to Create Custom Graphs – Gartner Magic Quadrant Style Graph
Updated: Jan 2
There are various type of graphs that can be plotted in python from scatter plots to line charts. However, today we are going to look at developing a unique graph type that has gained popularity and can represent a large amount of information on a 2D graph. How many dimensions can you represent on a 2D graph?
Well the answer is not that simple, at first thought you might think you can only display two dimensions x axis and y axis. However, after a little thought you’d realise that you can possibly show three? The size of the pointer can be the third dimension. How about the colour of the pointer? Yes, we can display 4 dimensions by having different features on x-axis, y-axis, pointer size, and pointer color.
Can you expand it even further? Well you can have different shapes, images, etc. You get the point right? We can display a lot of information in a small 2D graph. Isn’t it amazing!
Now let us dive deep into how we can create a simple yet stunning magic quadrant. I am going to walk you through the process of researching how to make a new graph and the process would be applicable for any graph type. I am keeping the discussion in the generalist domain to make it useful to a larger audience. Let’s dive in.
Steps to Generate Stunning Visualisations
Here is the four step process to generate stunning visualisations. The steps are as simple as they get, you start from basic due diligence and then go deeper into the details. Next you finalise your requirements by analysing the competitors and voila you are ready for the release process.
Image 1: Introduction
Step A: Google Search - It is as simple as it sounds. You go on Google and search for “Using python to create custom graphs - Gartner magic quadrant style graph”. You go through the top 3 links and get a sense of methodologies used by different people and different use cases and perspectives. If you wanted to do it in Java, you can just change the google search query to include “Java” instead of “Python”. You get the point right?
Step B: Documentation - Once you have done your due diligence you go through the documentation of the libraries you found helpful to determine which one are going to be useful for your case. In this case, we will explore the matplotlib library in python. It is a great and versatile graphing library in python. It is easy to use and has an active community of developers.
Step C: Competitors - After finding the features available we come back to the drawing board to finalise our design, we look at the competitors such as Gartner or G2 and see various features in the quadrants or matrices or grids. Some have square structure, others are small dots, some are clickable, others are static. You have to make your design choices according to your use case. Keep in mind the end customer, would they prefer more functionality or simplicity? Would it confuse them to look at so many details or would they prefer the freedom to analyse the data as per their requirements?
Step D: Release!!!! - Yes, that’s the end goal for any project. To be able to go live and show the feature to the end user. It is easy to develop mock ups and iterate quickly with python which is very essential for innovation.
We share with you the final Magic Quadrant at BestViewsReviews.
Step A: The first step would be to a preliminary google search and go through the top 3 results. We would read the meta data for each google search on the first page and select the most relevant three results.
1. As per towardsdatascience you can see Gross National Income vs Life Expectancy graph. If you follow the link you can find the python code for the implementation. I am going to spare you the details and walk you through the high level idea here.
Image 2: Magic Quadrant Approach 1
In the above graph, you can see we have 4 different quadrants of different sizes, with each dot representing a country and we have Gross National Income per Capita on the x-axis and Life Expectancy at Birth on the y axis. It is interesting to see the among all the countries represented in the data India has the least Gross National Income per Capita and South Africa has the least Life Expectancy at Birth. On the other extreme, we have United States and Saudi Arabia, who have the highest Gross National Income per Capita and Japan has the highest Life Expectancy at Birth. This graph also shows that the higher Gross National Income per Capita countries tend to have a higher Life Expectancy at Birth. You can follow along the examples as give in the link above and develop you own graph for the G 20 countries.
As per Medium, we have a Solution vs Impact Cost Graph. Here we have equal sized quadrants and somewhat equally distributed data. It analyse the impact and cost of solution and presents solutions in each quadrant. You can again look at the code at Medium, it is really well written and provides a good summary.
Image 3: Magic Quadrant Approach 2
As per stack overflow, you have a version with matplotlib. This gives a basic idea about how to make quadrants, i.e. have two axis divide your y-axis and x-axis. It is also possible to divide it even further. Once you have this basic concept you can develop you own scatter plot.
Image 4: Magic Quadrant Approach 3
After going through the 3 codes, you’d have a good idea about the basic implementation of a basic four quadrant graph using python libraries such as pandas, matplotlib, and seabird. If you are still not confident, you can search for your doubts on google or go through more articles in the same query.
Step B: Go through the matplotlib and explore unique features. Matplotlib is great library. You can install the library using:
pip install matplotlib
Once you have the library installed go through the tutorials and plot some numbers. We are plotting an array of 1,2,3,4 on a plot. Isn’t it beautiful?
import matplotlib.pyplot as plt
plt.plot([1, 2, 3, 4])
plt.ylabel('some numbers')
plt.show()
You can try plotting different shapes as below, you can replace the dot in the scatter plot with different shapes and assign them different colors and sizes.
import numpy as np
# evenly sampled time at 200ms intervals
t = np.arange(0., 5., 0.2)
# red dashes, blue squares and green triangles
plt.plot(t, t, 'r--', t, t**2, 'bs', t, t**3, 'g^')
plt.show()
Now explore more advanced features such as placing a image instead of a dot or a dash.
Image 5: Inserting Images
By combing the three examples that we shared above, we created a simple quadrant graph with price as the x-axis and number of reviews as the y-axis. To standardise the data, we normalised it using a ranking function. As you can see Geek Chef is the most popular in the premium range and Algostar 7 is the most popular in the budget range. However, for tech geeks you can explore the Ninja OS301 in the premium range and Ultrean 6 in budget range. Do not take these values at face value as the values are dynamic and the prices or popularity might have changed over time. To see the latest data visit our website BestViewsReviews [dot] com. We created a magic quadrant for air fryers with images but we realised it was too difficult for people to understand in a short time span. Did you images add any value? Don’t all air fryers look the same? Do you even care how your air fryer looks like? Probably not! You are more interested in the recipes that you can try out with the new air fryer.
Image 6: BVR Quadrant with Images
The above graph is for sample purposes, please do not quote BestViewsReviews or Shorthills for any misinformation. Use the above information at your own risk.
Step C: After developing a basic graph, you can check out the competitors to get to know the best practices in the industry and develop innovative solutions instead of reinventing the wheel. Make it functional, by adding click functionality - go through the documentation for mouse click and movements here. Examples: G2 and Gartner. The G2 graph is very densely populated. We are seeing the G2 Grid for Marketing Automation. It would make sense for people viewing this graph to use filters to adjust to their buying criteria and see the graph. As you can see G2 has represented company logo’s in the graph instead of writing the names as image recognition is easier and most of these are well know brands? Can we do the same for products? Probably not, because it would be hard to tell the model and make of a smartphone by looking at a small thumbnail image, let along a pencil or a fridge.
Image 7: G2 Grid
Next, we explore the Gartner Magic Quadrant for Business Intelligence Platforms. We see that it's much easier on the eye with less data points and clear axis and legends. We can see from the chart that Microsoft is clearly the leader and Google is Challenger in this space. We can also see ThoughSpot as Visionaries or MicroStrategy Niche Players. It is a very well defined structure, though if you notice they don’t use filters or brand logos. This is a design choice. We interacted through a lot of options and finalised our design by keeping our end user in mind.
Image 8: Gartner Magic Quadrant
Step D: Practice makes a man perfect is true for magic quadrants as well. The more you try and experiment that better the feature becomes as you can crease out the wrinkles. Iterate, go through the design process and improve and find the best possible visualisation. Here you have the BVR Magic Quadrant.
Image 9: BVR Quadrant Final
Now you can develop stunning visualisations using Python in four easy steps. It would take a couple of hours to generate a visually appealing, function, data grip that would provide extensive value to the users. Stay tuned for our next post on visualising waterfall diagrams.
Image 10: Sprint
However, always keep in mind that in the beginning it might appear easy but you would soon encounter a bug which would turn into meetings, conflicts and therefore the feature might never see the day of light. Therefore it is essential to iterate but at the same time it is also important to execute. As it is said “Execution eats strategy for breakfast”.
You should have a clear plan but make room for challenges that might come along the way. If you are looking for other cool ideas, visit our blog at ShorthillsTech. We develop mind blowing features and products. We are the leaders in data engineer, so if you have any issues do give us a shoutout at info@shorthillstech.com. Do you know what a waterfall chart is? Stay tuned for our next article in the custom graphs series.
By Apurv Sibal