Build Interactive Charts using Flask and D3.js
Design interactive D3.js visualizations for E-Commerce Sales Analytics and Support Business Decisions
Are you tired of presenting sophisticated data models that fail to impress your management or clients?
It’s time to take a step back and embrace the power of visualization.
This article will guide you through building interactive D3.js visualizations using Flask.
We’ll use a co-occurrence matrix visualization of luxury cosmetics sales to illustrate how simple yet compelling visualizations can help you easily communicate complex insights.
📘 Your complete guide for Supply Chain Analytics: Analytics Cheat Sheet
💌 New articles straight in your inbox for free: Newsletter
I. The Power of Visualization for Business Decision Making
1. Overcoming Frustration: The Importance of Simple Visualizations
You are a proud Data Scientist presenting your new solution designed using optimized code, fancy libraries, advanced linear algebra and complex statistical concepts.
And […]
Your solution got less interest, recognition or enthusiasm from your management than a simple PowerBI dashboard presented by a new intern the day before.
Have you faced this frustration?
2. You need to develop your skills in visualization
Simple, fancy visualization can impact more than a complex model, especially for a non-technical audience.
This article will give you a recipe to design fancy visualization using D3.js without prior knowledge of JavaScript (or very light).
Pre-requisite
- Basic knowledge of HTML
- Intermediate knowledge of Python, including the Flask framework
- Find an example of visualization you want to design
II. Example of the Co-Occurrence Matrix Visualization using D3.js
1. Example: Matrix Diagram of Les Misérables Characters
You are surfing http://bl.ocks.org/, a great website to get tutorials for D3.js, and you find inspiration by looking at this Matrix Diagram by Mike Bostock.
Les Misérables is a famous French historical novel by Victor Hugo, published in 1862.
This matrix shows the co-occurrence of characters
- 1 coloured cell = two characters appearing in the same chapter
- dark cells: characters with a high frequency of occurrence
- light cells: characters with a low frequency of occurrence
2. Co-Occurrence Matrix for Luxury Cosmetics Products’ Sales Analytics
You have a Luxury Cosmetics products' Online Sales dataset at the order line level.
You want to build a matrix showing the co-occurrence of brands
- 1 coloured cell = two brands appearing in the same customer order
- dark cells: brands that appear with many other brands
- light cells: brands that appear with few other brands
💡 Follow me on Medium for more articles related to 🏭 Supply Chain Analytics, 🌳 Sustainability and 🕜 Productivity.
You can find the source code shared in my Github repository: Samir Saci
My portfolio with other projects: Samir Saci
III. Building Interactive D3.js Visualizations with Flask Framework
1. Rendering D3.js Visualizations with Flask: Step-by-Step Guide
Let us start by rendering an example found b.locks (Link) following structure below
app.py
/templates
index.html
/static
/data
miserables.json
/js
/Libs
matrix.js
/css- /templates: index.html HTML source code of the dashboard page (Link)
- /js/libs: javascript libraries used to render D3.js
- /js/matrix.js: script used to render your dashboard using miserables.json
- /static/miserables.json: JSON file used by matrix.js to render (Link)
- /CSS: CSS files used to render the page
The full code is uploaded in my GitHub repository (Link) used
- Copy the GitHub repository to your local folder
- Download libraries listed in requirements.txt
- Launch app.py
You have now built your first visualization solution using Flask and D3.js.
Next steps are
- Replace miserables.json with your dataset
- Adapt matrix.js to show brands' co-occurrence
- Adapt HTML page code to
IV. Data Preparation for D3.js Visualization: Brand Co-Occurrence Analysis
Start with miserables.json
The first step is to analyse miserables.json
1. Nodes: Characters distributed in different groups"nodes": {"name" : Character Name,
"group" : Group Number}2. Links: Listing pairs of characters"nodes": {"source" : Character Name 1,
"target" : Character Name 2,
"value" : Number of Co-occurence}
Get your brands.json
What do we want?
1. Nodes: Brands are distributed in groups depending on the number of different brands that are ordered with it"nodes": {"name" : Brand Name,
"group" : Group Number}2. Links: Listing pairs of brands that with number of orders they appear together"nodes": {"source" : Brand Name 1,
"target" : Character_name2,
"value" : Number of Orders they appear together}
Build nodes
The first function order_brand will prepare data frames and lists needed for the create_nodes function to build your nodes dictionary.
Comments
- n_groups: number of groups brands will be split
- line 35: descending order
{group 1: brands ordered with many other brands,
group n: brands that appear with few other brands}
Build Links
Export everything in JSON.
Final Result
Comments
- json_to: this function will return JSON that will be retrieved by sending a get request to the page ‘/get-json’
Your JSON is ready to be used by matrix.js (after a few adjustments).
V. Customizing D3.js Visualization with Your Data Set
1. Add a tooltip to show the brand pair selected on the hover
I added these lines in the mouseover function to display the pair of brands selected.
2. Download JSON file
This function will send a GET request to your flask page ‘/get-json’ that will return json_to with the create_json function.
VI. Enhancing D3.js Visualization with HTML and CSS
1. Adapt the HTML code to add a caption
Final Rendering
- /CSS: bootstrap and styles.css to improve the rendering of your page
VII. Building Interactive D3.js Visualizations with Flask
Key Takeaways and References
You can find a static version of this matrix chart in my portfolio: Matrix Chart
This was an easy process with 4 steps
- Find a good visualization you want to use for your business case
- Download HTML code, javascript, CSS, JSON file and all files needed to build the page
- Render this page locally with Flask
- Analyse JSON format and build functions to adapt your input data
- Adapt javascript to fit with your data frame format
- Customize the HTML page to add information regarding your dataset
Generative AI: GPT for Advanced Visualization
Thanks to the trend of Generative AI with large language models (LLMs), we can disrupt the user experience of visualization tools.
In another article, I shared an experiment of LLM usage with this prototype of LangChain Agent, powered by GPT and connected to a TMS.
This agent’s performance is impressive; it can answer operational questions autonomously by querying a database and extracting the results.
What if we connect this agent to a D3.js visualization?
It would be an opportunity to customize the visual based on user requests formulated in natural language.
💡 For more details,
What is Business Intelligence?
As you need data to feed this visual, it is important to implement an automated pipeline to extract and process raw data.
Business Intelligence is a process that leverages software and services to transform data into actionable intelligence supporting decision-making.
The idea is to implement an automated solution to
- Extract raw data from multiple sources (Databases, Excel files, …)
- Process and harmonize this data in a single source
💡 For more details,
About Me
Let’s connect on Linkedin and Twitter, I am a Supply Chain Engineer using data analytics to improve logistics operations and reduce costs.
If you are interested in Data Analytics and Supply Chain, have a look at my website
References
[1] — Mike Bostock & Jean-Daniel Fekete, Les Misérables Co-occurrence, Link
[2] — Samir Saci, Initial Example for Flask Rendering, Github
[3] — Samir Saci, Final Solution, Github
[4] — Samir Saci, Example of a final rendering in my portfolio, Final Rendering
