A story about understanding the structure of plotly

What is plotly

plotly is a package that creates dynamic graphs that can be used in JavaScript, R, and Python.

A dynamic graph is a graph that can be moved as follows.

You can easily create a dynamic graph by preparing the specified arguments like other functions. Javascript "plotly.js" python is sometimes called "plotly.py" to distinguish it from other plotly

Contents and movement of plotly

plotly once transforms a data frame like pandas or an array of numpy into json format and holds it. It can be executed and saved as html by javascript

If you create the following html with a text editor, a plotly bar plot will be created.


<body>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="graph" style="width: 600px; height: 400px;"></div>

<script>
  //Write the value of X
  var x = ["giraffes","orangutans","monkeys"];
  //Write the value of Y
  var y = [20,14,23];
  var data = [{ name: 'sample', x : x, y : y, type: 'bar'}];
  var layout = { legend : { showlegend : false } };
  Plotly.newPlot("graph", data, layout);
</script>

</body>

What about python?

python==3.8 plotly==4.10.0

I'll do the same with python

import plotly.express as px
fig = px.bar(x=["giraffes","orangutans","monkeys"], 
            y=[20,14,23])
fig.show()

Data frames and matrices are easier to handle and pass more smoothly in python than in html. Above all, it is completed as a function and can be executed with as little code as possible.

I mentioned earlier that it holds internal data in json type. plotly has an offline plot function, by directly inserting json format data created with python here. You can do the same as you do with the function


data2=[dict(x=["giraffes","orangutans","monkeys"], 
            y=[20,14,23],
            type='bar'
           )]

import plotly

plotly.offline.iplot({
    "data": data2
})

data2 is

[{'x': ['giraffes', 'orangutans', 'monkeys'],
  'y': [20, 14, 23],
  'type': 'bar'}]

Is held as. It is not always necessary to create it with dict or list, There is no problem if it can be formatted into data with a similar structure.

data2=[
{
  "x": [
    "giraffes",
    "orangutans",
    "monkeys"
    ],
  "y": [
    20,
    14,
    23
    ],
  "type": "bar"
}
    ]

I'll try

import plotly

plotly.offline.iplot({
    "data": data2
})

It's done.

In this way, by giving "data" and "layout" as json, which is not mentioned above, the plot is completed.

I can plot by passing the argument explained in the bar function of the official web reference. If you remember how to pass in json type, you will be able to freely change the title etc.

(If you stick to it, the effort will explode, so watch the situation there)

The official function description may also have a similar json format description, I think it will be easier to learn if you understand such a structure.

Since it's a big deal, I also talk about layout

Use scatter_geo and try to specify layout as well

import plotly
import pandas as pd
import plotly.express as px

geo_info = pd.DataFrame()

geo_info['latitude']=[36,50]
geo_info['longitude']=[140,50]
geo_info['color']=[80,5]

fig = px.scatter_geo(geo_info,
                     lat='latitude',
                     lon='longitude',
                     color='color',
                     range_color=(0, 100),
                     title='Tokyo and Paris',
                     projection="equirectangular")
fig.show()

I was able to do a good plot very easily

Try changing the display title using layout and renaming the colorbar from data By default, the name of the color bar is a rule to give the passed column name.

data1 = [dict(type='scattergeo',
              lat=geo_info['latitude'],
              lon=geo_info['longitude'],
              
              marker = dict(#size = 9, 
                            #autocolorscale=False,
                            #colorscale = 'Viridis',
                            color = geo_info['color'], 
                            colorbar = dict(title='color bar!!!')
                           )
             )]

layout1 = dict(title='Tokyo and Paris from layout',
               geo = dict(projection = dict(type ='equirectangular'),
                          showland = True,
                          #landcolor="rgb(250,250,250)",
                          #subunitcolor = "rgb(217,217,217)",
                          #countrycolor = "rgb(217,217,217)",
                          countrywidth =0.5, 
                          subunitwidth=0.5)
              )


import plotly

plotly.offline.iplot({
    "data": data1,
    "layout": layout1
})

It's done.

You will be able to customize it freely like this If you put it in the corner of your head, it will help you to understand how to use plotly.

I want to check the json format

If you want to customize but don't know how to pass json Select the plot type you want to draw from plotly chart-studio and from viwer

Select python & R

You can see the json how you are passing the data You can draw this by passing it to the offline plot

[Talking about the drawing structure of plotly] Dynamic visualization with plotly [python]

What is plotly

Contents and movement of plotly

What about python?

Since it's a big deal, I also talk about layout

I want to check the json format

that's all