Build Interactive Charts using Flask and D3.js

Design interactive D3.js visualizations for E-Commerce Sales Analytics and Support Business Decisions

Build Interactive Charts using Flask and D3.js
Photo by freestocks / Unsplash

Design interactive D3.js visualizations for E-Commerce Sales Analytics and Support Business Decisions

Article originally published on Medium.

The Power of Visualization


The frustrated genius

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?

You need to develop your skills in visualization


Simple fancy visualization can have more impact than a very 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 Flask framework
  • Find an example of visualization you want to design

Get inspiration from the D3.js example


Example: Matrix Diagram of Les Misérables Characters

You are surfing in http://bl.ocks.org/, a great website to get tutorials for D3.js, and you find inspiration looking at this Matrix Diagram by Mike Bostock.

Matrix Chart of Les Miserables using D3.js
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 is showing 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

Apply this visualization to your business case


You have a dataset of Luxury Cosmetics products Online Sales at the order line level.

You want to build a matrix showing 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
🔗
You can find the source code shared in my Github repository: Samir Saci

Build your solution using Flask


Duplicate this example on a template rendered with Flask

Let us start by rendering an example found b.locks (Link) following the 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
🔗
Full code is uploaded in my Github repository (Link) used
  1. Copy the Github repository to your local folder
  2. Download libraries listed in requirements.txt
  3. Launch app.py
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 to

Processing your raw data set to final JSON


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 the 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 that will 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}

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

Adapt Matrix.js to fit with your brands.json


Add tooltip to show brand pair selected on 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 pair of brands selected.

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.

Final Touch


Adapt the HTML code to add a caption

Final Rendering

  • /CSS: bootstrap and styles.css to improve the rendering of your page
Build Interactive Charts using Flask and D3.js
Final Rendering of your Luxury Brands’ Online Sales Matrix — (Image by Author)

Conclusion

You can find a static version of this matrix chart in my portfolio: Matrix Chart

This was an easy process in 4 steps

  1. Find a good visualization you want to use for your business case
  2. Download HTML code, javascript, CSS, JSON file and all files needed to build the page
  3. Render this page locally with Flask
  4. Analyse JSON format and build functions to adapt your input data
  5. Adapt javascript to fit with your data frame format
  6. Customize the HTML page to add information regarding your dataset

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