Build Interactive Charts using Flask and D3.js | by Samir Saci | Towards Data Science

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?
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
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.
Les Misé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
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 SaciMy portfolio with other projects: Samir Saci
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
Full code is uploaded in my Github repository (Link) used
Copy Github repository in your local folderDownload libraries listed in requirements.txtLaunch app.py
Copy Github repository in 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
samirsaci.com
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 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).
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 Rendering
/CSS: bootstrap and styles.css to improve the rendering of your page
You can find a static version of this matrix chart in my portfolio: Matrix Chart
This was an easy process in 4 steps
Find a good visualization you want to use for your business caseDownload HTML code, javascript, CSS, JSON file and all files needed to build the pageRender this page locally with FlaskAnalyse JSON format and build functions to adapt your input dataAdapt javascript to fit with your data frame formatCustomize HTML page to add information regarding your dataset
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 HTML page to add information regarding your dataset
Please feel free to contact me, I am willing to share and exchange on topics related to Data Science and Supply Chain.My Portfolio: https://samirsaci.com
[1] — Mike Bostock & Jean-Daniel Fekete, Les Misé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