Django Serve 3D Plot and more

A step-by-step guide to integrate plotly dash into django

Django is a very poewerfull framework for python backend.

The datascientist needed grow day by day and sometimes to serve plot maded by datascientist can be helpfull. Plotly is a beatufull library used from datascientist into jupyter notebook and that can be easily introduced into django thanks to django-plotly-dash.

An example of plotly results with django that you can replicate using this codebase.

This is a step by step guide to introduce django-plotly-dash into your django app and serve plots. The results can be seen in this codebase.

[Skip if you have your environment] Create venv

Into the project folder create and activate venv

python3.10 -m venv venv
source venv/bin/activate.fish
pip install django

[Skip if you just have one] Create Django Project

In your python environment create django app:

django-admin startproject app

And stay into the folder with a terminal

cd app

[Advised] Create Django App

It is a good idea to create a django app.

./manage.py startapp plotly_example

Configure app/settongs.py

...
INSTALLED_APPS = [
  ...  
  'plotly_example',
  ...
]
...

Configure django-plotly-dash

Install the dependecies

pip install django-plotly-dash pandas

Configure app/settings.py

...
INSTALLED_APPS = [
  ...  
  'django_plotly_dash.apps.DjangoPlotlyDashConfig',
  ...
]

X_FRAME_OPTIONS = 'SAMEORIGIN'
...

Make migrations

./manage.py migrate

Set route into app/urls.py

...
from django.urls import path, include
...
urlpatterns = [
  ...
  path('django_plotly_dash/', include('django_plotly_dash.urls')),
  ...
]

Create your firs dash

into plotly_example/view1.py

from django.shortcuts import render

from django.http import HttpResponse
from django.template import loader


import dash
from dash import dcc, html

from django_plotly_dash import DjangoDash

app = DjangoDash('SimpleExample')   # replaces dash.Dash

app.layout = html.Div([
    dcc.RadioItems(
        id='dropdown-color',
        options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']],
        value='red'
    ),
    html.Div(id='output-color'),
    dcc.RadioItems(
        id='dropdown-size',
        options=[{'label': i,
                  'value': j} for i, j in [('L','large'), ('M','medium'), ('S','small')]],
        value='medium'
    ),
    html.Div(id='output-size')

])

@app.callback(
    dash.dependencies.Output('output-color', 'children'),
    [dash.dependencies.Input('dropdown-color', 'value')])
def callback_color(dropdown_value):
    return "The selected color is %s." % dropdown_value

@app.callback(
    dash.dependencies.Output('output-size', 'children'),
    [dash.dependencies.Input('dropdown-color', 'value'),
     dash.dependencies.Input('dropdown-size', 'value')])
def callback_size(dropdown_color, dropdown_size):
    return "The chosen T-shirt is a %s %s one." %(dropdown_size,
                                                  dropdown_color)

def index(request):
  return render(request, 'plotly_example/index.html')

Into plotly_example/templates/plotly_example/index.html

{%load plotly_dash%}

{%plotly_app name="SimpleExample"%}

Fix route into app/urls.py

...
from plotly_example.view1 import index
...
urlpatterns = [
  ...
  path("plotly_example/1", index, name="p1"),
  ...
]

You can reach your dash with that two urls

• localhost:8000/plotly_example/1
• localhost:8000/django_plotly_dash/app/SimpleExample/

Next step and conclusions

You can made more plots also 3D like in that example that include also a way to get the parameters from url to get different plots using query params.

For example the images below:

http://localhost:8000/django_plotly_dash/app/Simple3DExample/

http://localhost:8000/django_plotly_dash/app/Simple3DExample/?x=3&y=3&z=0.1

Thanks alot to all peaople that develop djanto and maintain the community libraries that allow us to implement easily more things.
Use and contribute to open source!