Build Interactive Charts using Flask and D3.js

Are you tired of presenting sophisticated data models that fail to impress your management or clients?

Why is the board more impressed by a simple PowerBI than my super XGboost forecasting fine-tuned model?

It’s time to take a step back and embrace the power of visualization.

How do you create interactive visuals with Python?

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 to communicate complex insights easily.

The Power of Visualization for Business Decision-Making

Overcoming Frustration: The Importance of Simple Visualizations

You are a proud data scientist presenting your new solution, designed using optimized code, fancy libraries, 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?

You need to develop your visualization skills.

Simple, fancy visualization can impact more than a complex model, especially for a non-technical audience.

This article will give you a recipe for designing fancy visualization using D3.js without prior knowledge of JavaScript (or very light).

What do I need to start?

Pre-requisite

Basic knowledge of HTML
Intermediate knowledge of Python, including the Flask framework
Find an example of visualization you want to design

We will take a simple example to discover a workflow you can replicate for any other visualization.

Co-Occurrence Matrix Visualization using D3.js

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.

How can I replicate it with my own data?

Les Misérables Co-occurrence, Mike Bostock & Jean-Daniel Fekete, Link

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

Crazy idea: Let’s use it for E-commerce Sales Analysis!

Co-Occurrence Matrix for Luxury Cosmetics Sales Analytics

Let us assume you work for an e-commerce company specialising in cosmetics products.

How can I support my colleagues from the sales department?

They shared a Luxury Cosmetics products’ Online Sales dataset at the order line level.

Which brands are sold together?

This is an interesting insight that matches the visual studied in the previous section.

Therefore, 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.

Building Interactive D3.js Visualizations with Flask Framework

Rendering D3.js Visualizations with Flask

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

How do I start? Have a look at my GitHub repository.

The full code is uploaded in my GitHub repository

Copy the GitHub repository to your local folder
Download libraries listed in requirements.txt
Launch app.py

Your example deployed locally using Flask (Link) - (Image by Author) — Your example deployed locally using Flask (Link) – (Image by Author)

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

Let’s go!

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 _orderbrand will prepare data frames and lists needed for the _createnodes 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}

What is a link?

Two brands are linked when they are sold together.

Build Links

Export everything in JSON.

How does it look like when it’s returned?

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).

You can find the source code shared in my GitHub repository👇

GitHub – samirsaci/matrix-miserables: Repository linked to my Medium article related to Interactive…

Customizing D3.js Visualization

Let’s add some additional insights to impress your colleagues.

Add a tooltip to show the brand pair selected on the hover

Brand pairs are displayed on the top left with the number of orders – (Image by Author)

I added these lines in the mouseover function to display the selected pair of brands.

Download JSON file

This function will send a GET request to your flask page ‘/get-json’ that will return _jsonto with the _createjson function.

Enhancing D3.js Visualization with HTML and CSS

Adapt the HTML code to add a caption

Final Rendering

/CSS: bootstrap and styles.css to improve the rendering of your page

Note of August 30th 2024

This is a very old-fashioned way of doing it, but it’s working 🙂

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 four steps

Find a good visualization you want to use for your business case
Download HTML code, javascript, CSS, JSON file
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

Have you heard about business intelligence?

What is Business Intelligence?

As you need data to feed this visual, it is essential to implement an automated pipeline to extract and process raw data.

Business Intelligence process in five steps - (Image by Author) — Business Intelligence process in five steps – (Image by Author)

It’s a great way to impact businesses with a HIGHER PERCEIVED VALUE.

What’s the process?

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

And it can even include you’re newly build D3.js visual!

If you want to learn more about it, 👇

What is Business Intelligence?

About Me

Let’s connect on Linkedin and Twitter. I am a Supply Chain Engineer who uses data analytics to improve logistics operations and reduce costs.

For consulting or advice on analytics and sustainable supply chain transformation, feel free to contact me via Logigreen Consulting.

If you are interested in Data Analytics and Supply Chain, look at my website.

Samir Saci | Data Science & Productivity

📘 Your complete guide for Supply Chain Analytics: Analytics Cheat Sheet 💌 New articles straight in your inbox for free: Newsletter

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