# Developing Julia interface for Plotly Dash

**URL:** <https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533>\
**Category:** Visualization\
**Created:** [October 31, 2019, 11:45am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533 "2019-10-31T11:45:18Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [October 31, 2019, 11:45am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/1 "2019-10-31T11:45:18Z")

</div>

Hi.  
I’m new to Julia and I need a single-page interactive dashboard. So I wrote the prototype of Julia interface for Plotly Dash - package [Dashboards.jl](https://github.com/waralex/Dashboards)

Now it has all the basic functionality of Dash - you can create dashboards using dash components from [dash\_core\_components](https://github.com/plotly/dash-html-components) and [dash\_html\_components](https://github.com/plotly/dash-core-components), and register callbacks for components events.

Simple example:

```nohighlight
julia> import HTTP
julia> using Dashboards
julia> app = Dash("Test app", external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]) do
    html_div() do
        dcc_input(id = "my-id", value="initial value", type = "text"),
        html_div(id = "my-div")        
    end
end
julia> callback!(app, callid"my-id.value => my-div.children") do input_value
    "You've entered $(input_value)"
end
julia> handler = make_handler(app, debug = true)
julia> HTTP.serve(handler, HTTP.Sockets.localhost, 8080)

```

You can find more examples in the readme.

Is anyone interested in this functional?

P.S. Sorry, I don’t speak English very well, so if anyone who is interested in this package can correct my mistakes in readme and docs, I will be grateful.

Best regards, Alexandr

---

<div class="post-metadata">

**Author:** ![pontus](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pontus/32/10438_2.png) [@pontus](https://discourse.julialang.org/u/pontus)\
**Post date:** [October 31, 2019, 8:38pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/2 "2019-10-31T20:38:49Z")

</div>

Welcome!

```julia
Pkg.add(PackageSpec(url="https://github.com/waralex/Dashboards.git"))

```

![dashboards_julians](https://global.discourse-cdn.com/julialang/original/3X/3/e/3e1bd5553b95939b393d42e6a95ec268362bf89a.png)

…now if I knew how to develop Dash Dashboards…  
Thanks!

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [October 31, 2019, 8:59pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/3 "2019-10-31T20:59:26Z")

</div>

You can use the [Plotly Dashboard documentation](https://dash.plot.ly/) as a starting point. Key concepts are the same.  
I am writing tests now and solving some problems, but I will try to write some examples of dashboards on the weekend if this is interesting for the community

---

<div class="post-metadata">

**Author:** ![anon92994695](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@anon92994695](https://discourse.julialang.org/u/anon92994695)\
**Post date:** [October 31, 2019, 10:09pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/4 "2019-10-31T22:09:31Z")

</div>

Awesome! Thanks for doing this.

---

<div class="post-metadata">

**Author:** ![avik](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/avik/32/17_2.png) [@avik](https://discourse.julialang.org/u/avik)\
**Post date:** [October 31, 2019, 11:31pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/5 "2019-10-31T23:31:33Z")

</div>

HI Alexandr,

This sounds great, I hope to try this out soon. It’ll help to see some example apps.

Also, have you completelty re-written the python parts of Dash in Julia, or is it calling into python at some point? Looking at the code it seems it is pure Julia, but I wanted to confirm.

Finally, it’ll help if you give us some example of how the python syntax corresponds to the julia syntax when writing Dash applications.

I’m excited to see this.

Regards

Avik

---

<div class="post-metadata">

**Author:** ![StevenSiew](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevensiew/32/218393_2.png) [@StevenSiew](https://discourse.julialang.org/u/StevenSiew)\
**Post date:** [November 1, 2019, 12:27am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/6 "2019-11-01T00:27:23Z")

</div>

> [@waralex](#):
>
> Alexandr

waralex Alexandr,

You have convinced me. I am in.

Let me tell you my motivation. It is to be able to do this

value\_a = Slider(0.0,4.0)  
Plot(value\_a \* x^2 + 3.0\*x + 7.0,[x,-10.0,10.0])

graphically so I can see the plot change when I move the slider.

Regards  
Steven Siew

PS. I can do this in Mathematica

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 1, 2019, 8:53am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/7 "2019-11-01T08:53:19Z")

</div>

Hi Avik

> [@avik](#):
>
> Also, have you completelty re-written the python parts of Dash in Julia, or is it calling into python at some point?

Yes, Dashboards is an implementation of Dash backend server in pure Julia. In details, I clone Dash repo and components repos at package build stage (because of Pkg don’t work properly with git submodules). At package compilation, I read json files with components meta from this repos and generate Julia functions to create components. `make_handler` function makes handler for HTTP.serve, which responds to requests of Dash frontend. So I use only JS part from Dash repos

> [@avik](#):
>
> Finally, it’ll help if you give us some example of how the python syntax corresponds to the julia syntax when writing Dash applications.

It is pretty simple.

- _component naming:_ `html.Div` =\> `html_div`, `dcc.Graph` =\> `dcc_graph` and etc
- _component creation:_ just like in Python, functions for creating components have keywords arguments, which are the same as in Python. `html_div(id="my-id", children="Simple text")`.  
For components that have `children` prop, two additional signatures are available. `(children; kwargs..)` and `(children_maker::Function; kwargs...)` so You can write `html_div("Simple text", id="my-id")` for simple elements or avoid the hell of nested brackets with `do` syntax for complex elements:

```julia
html_div(id="outer-div") do
    html_h1("Welcome"),
    html_div(id="inner-div") do
    ......
    end
end

```

- _application and layout:_  
python:

```julia
app = dash.Dash("Test", external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[....])

```

Dashboards:

```julia
app = Dash("Test", external_stylesheets=external_stylesheets) do
   html_div() do
    ......
   end
end

```

- _callbacks_:  
python:

```julia
@app.callback(Output('output', 'children'),
              [Input('submit-button', 'n_clicks')],
              [State('state-1', 'value'),
               State('state-2', 'value')])
def update_output(n_clicks, state1, state2):
.....

```

Dashboards:

```julia
callback!(app, callid"""{state1.value, state2.value} 
                                   submit-button.n_clicks 
                                   => output.children""" ) do state1, state2, n_clicks
.....
end

```

Be careful - in Dashboards states came first in arguments list

- _json:_ I use JSON2 for json serialization/deserialization, so in callbacks all json objects are NamedTuples not Dicts. In component props you can use both Dicts and NamedTuples for json objects. But be careful with single property objects: `layout = (title = "Test graph")` is not interpreted as NamedTuple by Julia - you need add comma at the end `layout = (title = "Test graph",)`

Hope this is helpful

Best regards, Alexandr

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 1, 2019, 10:24am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/8 "2019-11-01T10:24:35Z")

</div>

> [@StevenSiew](#):
>
> It is to be able to do this
> 
> value\_a = Slider(0.0,4.0)  
> Plot(value\_a \* x^2 + 3.0\*x + 7.0,[x,-10.0,10.0])

Is this it?

```julia-auto
import HTTP
using Dashboards
function make_graph_figure(coeff)
   x_range = -10.0:0.1:10   
   (
       data = [(
           x = x_range,
           y = [coeff * x^2 + 3.0 * x + 7.0 for x in x_range]
       )],
       layout = (title = "$(coeff) * x^2 + 3.0 * x + 7.0",)
   ) 
end
app = Dash("Simple Slider", external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]) do
    html_div() do
        html_h1("Slider example"),
        
        dcc_slider(
            id="slider", min=0., max=4., step=0.05, value = 0.,
            updatemode = :drag, tooltip = (always_visible=true,),
            marks = Dict(map(x -> x=>x, 0:4))
        ),                
        dcc_graph(
            id="graph",
            figure = make_graph_figure(0.),
            style = Dict("padding-top" => "20px")
            )
        
                    
    end
end
callback!(app, callid"slider.value => graph.figure") do value
    return make_graph_figure(value)
end
handler = make_handler(app)
HTTP.serve(handler, HTTP.Sockets.localhost, 8080)

```

 ![39](https://global.discourse-cdn.com/julialang/original/3X/f/8/f8d571fb70c8c6e680e44a4078a27457d8d0c58c.png)

---

<div class="post-metadata">

**Author:** ![carlomontec](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/carlomontec/32/2011_2.png) [@carlomontec](https://discourse.julialang.org/u/carlomontec)\
**Post date:** [November 1, 2019, 11:14am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/9 "2019-11-01T11:14:44Z")

</div>

Wow it’s awesome! Thanks for your efforts!

---

<div class="post-metadata">

**Author:** ![randyzwitch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/randyzwitch/32/15955_2.png) [@randyzwitch](https://discourse.julialang.org/u/randyzwitch)\
**Post date:** [November 1, 2019, 1:25pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/10 "2019-11-01T13:25:32Z")

</div>

Great job tackling this! I have a work Dash dashboard built with our Python connector (we’re a database/analytics company), so it’d be cool to see if it cane be replicated with our Julia connector and your new package.

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 1, 2019, 2:48pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/11 "2019-11-01T14:48:42Z")

</div>

> [@randyzwitch](#):
>
> I have a work Dash dashboard built with our Python connector (we’re a database/analytics company), so it’d be cool to see if it cane be replicated with our Julia connector and your new package.

Offtopic:  
I came up with the idea of this package for similar reasons.  
I wrote a fast column database for our purposes a few years ago. It stores information about approximately 300 billion events (compressed to 1.5Tb on HDD) and process approximately 3.5K inserts per second. And now we have the problem: we have a large amount of data and we haven’t suitable instruments and workflows for analysis, mining and predictions on that data. So, after thinking, I agreed with the proposal to change the position from developer to analyst. I tried python as an instrument of analysis a little but after c++ its “optimization” upsets me, so I came to Julia (3 weeks ago 🙂)  
It’ll help if someone can recommend me good books or courses about data analysis and machine learning in private message. I have good programming and not bad math background and I don’t want to waste time on books where 80% is python syntax description

Sorry for offtopic

Best regards, Alexandr

---

<div class="post-metadata">

**Author:** ![Balinus](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/balinus/32/243_2.png) [@Balinus](https://discourse.julialang.org/u/Balinus)\
**Post date:** [November 1, 2019, 3:04pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/12 "2019-11-01T15:04:34Z")

</div>

That’s nice work for 3 weeks time. Thanks for sharing your package!

---

<div class="post-metadata">

**Author:** ![StevenSiew](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevensiew/32/218393_2.png) [@StevenSiew](https://discourse.julialang.org/u/StevenSiew)\
**Post date:** [November 2, 2019, 8:40am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/13 "2019-11-02T08:40:43Z")

</div>

Hi waralex,

Thanks for the code. That was really amazing.

I think the magic for the graph is in dcc\_graph function.

Do you know how to put a label on the slider so that the user would know which slider controls which variable if there are multiple sliders on the web page?

Regards  
Steven Siew

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 2, 2019, 9:04am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/14 "2019-11-02T09:04:50Z")

</div>

> [@StevenSiew](#):
>
> Do you know how to put a label on the slider so that the user would know which slider controls which variable if there are multiple sliders on the web page?

You can put html element, div for example near slider.  
I’m not a very big specialist in Dash itself. I tried to make a dashboard from examples, I realized that I don’t like doing it on the python, and seeing how it worked, I decided that I could quite easily implement it on Julia (and at the same time get to know Julia better).  
You can look at [Dash Gallery](https://dash-gallery.plotly.host/Portal/) for an ideas. I plan to implement some of these examples on Julia when I find some time.

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 2, 2019, 9:14am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/15 "2019-11-02T09:14:45Z")

</div>

> [@StevenSiew](#):
>
> I think the magic for the graph is in dcc\_graph function.

The magic for the graph is the ReactJS component in the frontend. dcc\_graph just generates the correct json with the settings and data for this component

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 4, 2019, 12:28am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/16 "2019-11-04T00:28:49Z")

</div>

Hi.  
I released version 0.2.5 of Dashboards. The main feature is the ability to use PlotlyBase.Plot (or PlotlyJS.Plot) to setup the `figure` property of the `dcc_graph` component. Also I implemented most of the dashboards from Dash Tutorial on Dashboards.jl - see [DashboardsExamples](https://github.com/waralex/DashboardsExamples).

Should I register this version with the General? What do you think?

Best regards, Alexandr

---

<div class="post-metadata">

**Author:** ![StevenSiew](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevensiew/32/218393_2.png) [@StevenSiew](https://discourse.julialang.org/u/StevenSiew)\
**Post date:** [November 4, 2019, 6:36am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/17 "2019-11-04T06:36:27Z")

</div>

waralex, You should register this with General register, it will make it really easy for newbies to install your package.

---

<div class="post-metadata">

**Author:** ![avik](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/avik/32/17_2.png) [@avik](https://discourse.julialang.org/u/avik)\
**Post date:** [November 6, 2019, 10:29pm UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/18 "2019-11-06T22:29:50Z")

</div>

So I just wanted to report that it took me couple of hours, going from not knowing any Dash, to implementing a simple interactive app with a handful of widgets. To make it harder, I did not look at the DashboardsExamples repo, just going by the readme and the Dash official docs. So I’m pretty happy with how easy it is to get started with this.

There were a couple of things that I struggled with for a bit

1. the fact that both sides of the Dict should be Symbols in things like marker
2. I’m having to ctrl^C the server and then creating a new app object for any change to my application.

It is also worth asking if the `do` block is the best syntax for describing the heirarchy of widgets. Maybe? But all in all, I’m very happy about how easy this is.

For the record, my code is here: [Calculate Pi with Dash · GitHub](https://gist.github.com/aviks/7db8fa22e23f8d80f07bb77d5f040938)

and the app looks like this:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/e/5/e589e321a250979663b33d0ffb266f488c4c2eb9.png)

---

<div class="post-metadata">

**Author:** ![waralex](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/waralex/32/13415_2.png) [@waralex](https://discourse.julialang.org/u/waralex)\
**Post date:** [November 7, 2019, 7:19am UTC](https://discourse.julialang.org/t/developing-julia-interface-for-plotly-dash/30533/19 "2019-11-07T07:19:09Z")

</div>

Hi, Avik.  
Thanks for Your report!

> [@avik](#):
>
> the fact that both sides of the Dict should be Symbols in things like marker

They can also be both strings. These are the requirements of Dash: “[marks has the following type: dict with strings as keys and values of type string | dict containing keys ‘label’, ‘style’](https://dash.plot.ly/dash-core-components/slider)”. So in `marks` you can set any Julia structure that marshals to a json dict `string : string` via JSON2.

> [@avik](#):
>
> I’m having to ctrl^C the server and then creating a new app object for any change to my application.

I see and think what can be done about it

> [@avik](#):
>
> if the `do` block is the best syntax for describing the heirarchy of widgets

The `do` block is most convenient for me, but you also can use the python-like syntax:

```julia
 html_div([
           html_span("Pi = "),
           html_span("0.0", id="pi")
          ])

```

or

```julia
html_div(children = [
           html_span("Pi = "),
           html_span("0.0", id="pi")
          ])

```

I sow you issue in github, but I don’t have time this week (because I need to do some dashboards for my superiors 🙂 ) I also sent the registration request to General 3 days ago.

Best regards, Alexandr