Windrose chart customization

📊 Plotly Python
1

Hi, I’m looking for a way to display attributes for an individual in one year compared to the next year in plotly. There are about a dozen measures but for the purpose of this example I’ll limit it to 6. Two of the viz options I’m looking at are a radar/spider chart and a windrose chart, however, I’m running into an issue with the layout options for the windrose viz. For the spider, I can do something like this:

import plotly.graph_objs as go
from plotly.offline import plot, iplot, init_notebook_mode

t = go.Scatterpolar(
theta =[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’],
r = [1,2,3,4,5,6],
mode = ‘lines’,
fill = ‘toself’,
fillcolor=‘red’,
line = dict(
color=‘black’),
hoverinfo=‘all’,
name= ‘Year 1’,
opacity=0.5
)

t1 = go.Scatterpolar(
theta =[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’],
r = [2,4,6,8,10,12],
mode = ‘lines’,
fill = ‘toself’,
fillcolor=‘blue’,
line = dict(
color=‘black’),
hoverinfo=‘all’,
name= ‘Year 2’,
opacity=0.5
)

data=[t,t1]

layout = go.Layout(
title = ‘Y1 vs Y2 Spider’,
font=dict(
size=16
),
polar = dict(
radialaxis = dict(
visible = True,
range = [0,20], ticksuffix=’%’, tickangle=0, tickfont=dict(size=13)
),
angularaxis=dict(
nticks=6
)
))

fig = go.Figure(data=data, layout=layout)
iplot(fig, filename = “y1y2 spider.html”)

This works no problem and lets me customize the radial range and the names of the attributes on the outside of the graph. It also lets me interact with the viz in plotly by checking/unchecking each trace as desired, but when I try to bring the same layout/approach to the windrose chart, I’m unable to do many of the same customizations.

My windrose code looks like this:

trace1 = go.Area(
r = [1,2,3,4,5,6],
t = [‘a’,‘b’,‘c’,‘d’,‘e’,‘f’],
name= ‘Year 1’,
marker=dict(
color=‘red’
),
opacity=0.5
)

trace2 = go.Area(
r = [2,4,6,8,10,12],
t = [‘a’,‘b’,‘c’,‘d’,‘e’,‘f’],
name= ‘Year 2’,
marker=dict(
color=‘blue’
),
opacity=0.5
)

data = [trace1, trace2]

layout = go.Layout(
title = ‘Y1 vs Y2 Rose’,
font=dict(
size=16
),
polar = dict(
radialaxis = dict(
visible = True,
range = [0,20], ticksuffix=’%’, tickangle=0, tickfont=dict(size=13)
),
angularaxis=dict(
nticks=6
)
))

fig = go.Figure(data=data, layout=layout)
iplot(fig, filename=‘y1y2 rose.html’)

The output for this has 3 uncheckable entries in the legend (Year1, Year2, and a random extra one), the radial range automatically sets (regardless of my [0,1] input), and only some of the 6 t-values (‘a’,‘e’,‘c’) appear as labels on the outside of the graph. Any help or insight into making these changes work for the windrose would be greatly appreciated, thanks!

2

Hi @SLiQNick,

Could you update your post to add code fences around your code blocks (see https://help.github.com/articles/creating-and-highlighting-code-blocks/)? Right now it’s not possible to copy and run your examples because of formatting issues.

Thanks,
-Jon

3

No problem (and sorry for this - still new to Python!)

For the spider chart:

import plotly.graph_objs as go    
from plotly.offline import plot, iplot, init_notebook_mode


t = go.Scatterpolar(
    theta =['a','b','c','d','e','f'],
    r = [1,2,3,4,5,6],
    mode = 'lines',
    fill = 'toself',
    fillcolor='red',
    line = dict(
        color='black'),
    hoverinfo='all',
    name= 'Year 1',
    opacity=0.5 
    )

t1 = go.Scatterpolar(
    theta =['a','b','c','d','e','f'],
    r = [2,4,6,8,10,12],
    mode = 'lines',
    fill = 'toself',
    fillcolor='blue',
    line = dict(
        color='black'),
    hoverinfo='all',
    name= 'Year 2',
    opacity=0.5 
    )

data=[t,t1]


layout = go.Layout(
    title = 'Y1 vs Y2 Spider',
    font=dict(
        size=16
        ),
    polar = dict(
        radialaxis = dict(
            visible = True,
            range = [0,20], ticksuffix='%', tickangle=0, tickfont=dict(size=13)
        ),
    angularaxis=dict(
        nticks=6
        )
))

fig = go.Figure(data=data, layout=layout)
iplot(fig, filename = "y1y2 spider.html")

For the windrose:

trace1 = go.Area(
    r = [1,2,3,4,5,6],
    t = ['a','b','c','d','e','f'],
    name= 'Year 1', 
    marker=dict(
        color='red'
    ),
    opacity=0.5
)

trace2 = go.Area(
    r = [2,4,6,8,10,12],
    t = ['a','b','c','d','e','f'],
    name= 'Year 2', 
    marker=dict(
        color='blue'
    ),
    opacity=0.5
)   

data = [trace1, trace2]

layout = go.Layout(
    title = 'Y1 vs Y2 Rose',
    font=dict(
        size=16
        ),
    polar = dict(
        radialaxis = dict(
            visible = True,
            range = [0,20], ticksuffix='%', tickangle=0, tickfont=dict(size=13)
        ),
    angularaxis=dict(
        nticks=6
        )
))

fig = go.Figure(data=data, layout=layout)
iplot(fig, filename='y1y2 rose.html')

Thanks again!

4

Thanks @SLiQNick,

I do see what you mean. I think what you’re running into is that the Scatterpolar trace was part of the big “Polar 2.0” rewrite the landed about 6 months ago (https://github.com/plotly/plotly.js/pull/2200). This is when all of the nice interactivity came in.

The Area trace in polar coordinates wasn’t part of that rewrite, so it doesn’t share the same characteristics yet.

But the plotly.js devs are talking about it! See https://github.com/plotly/plotly.js/issues/2810. Sounds the Area trace might eventually be replaced by a polar bar trace, which I think it what you’re after here.

@etienne Does that sound about right?

5

Awesome, I really appreciate the info! Last thing would be to ask if the current Polar 2.0 update allows for hovering over the spider graph and displaying information for each value at the different points (2,4,6,8,10,12 for example)? At the moment, when I hover over the graph it only displays the name of the trace (‘year 1’ or ‘year 2’) no matter what formatting options I’ve tried

Thanks again for your help!

6

Hi @SLiQNick,

Interesting, the hover info is supposed to be controlled by the scatterpolar.hoverinfo property, but it does seem like that’s not having an effect for the go.Scatterpolar trace. Also interestingly, the hover info is shown if the fill mode is set to none (rather than toself).

I also tried the webgl accelerated version of this trace (go.Scatterpolargl) and that seems to have the correct hover behavior even when the fill is toself, so I’d recommend trying out that trace type.

Hope that helps!

-Jon

7

FYI, I opened a couple of Plotly.js issues based on this discussion:

8

Actaully, through to #2887 issue, I learned that you can switch this behavior on the standard Scatterpolar trace by setting the hoveron property to 'points':

import plotly.graph_objs as go    
from plotly.offline import plot, iplot, init_notebook_mode


t = go.Scatterpolar(
    theta =['a','b','c','d','e','f'],
    r = [1,2,3,4,5,6],
    mode = 'lines',
    fill = 'toself',
    fillcolor='red',
    line = dict(
        color='black'),
    hoverinfo='all',
    name= 'Year 1',
    opacity=0.5,
    hoveron = 'points'
    )

t1 = go.Scatterpolar(
    theta =['a','b','c','d','e','f'],
    r = [2,4,6,8,10,12],
    mode = 'lines',
    fill = 'toself',
    fillcolor='blue',
    line = dict(
        color='black'),
    hoverinfo='all',
    name= 'Year 2',
    opacity=0.5,
    hoveron = 'points'
    )

data=[t,t1]


layout = go.Layout(
    title = 'Y1 vs Y2 Spider',
    font=dict(
        size=16
        ),
    polar = dict(
        radialaxis = dict(
            visible = True,
            range = [0,20], ticksuffix='%', tickangle=0, tickfont=dict(size=13)
        ),
    angularaxis=dict(
        nticks=6
        )
))

fig = go.Figure(data=data, layout=layout)
9

This seems to have not sent yesterday, but this has been incredibly helpful, thank you kindly!!

1 Like