Changing line weight and font in PlotlyJS

Specific Domains Visualization
, , , ,
1

Thanks for reading and please see below for a MWE parcoords() with the Plotly backend.

This MWE generates no errors.

background

I just need a parallel coordinates plot. In general, I prefer the gr() or pyplot() backends but couldn’t find any examples for these, so I chose PlotlyJS based on the example in this previous answer. So I’m grateful for any working example of this figure, regardless of the backend.

question:

How can I fix the following:

  1. attempt to set the font size of the ticks and axis labels (via variables xts,yts,ygs) is not working
  2. attempt to set the line weight (via variable lw) is not working

code

using Plots, PlotlyJS, DataFrames

n = 100
lw = 20
xts = 20
yts = 20
ygs = 20
df = DataFrame(group=rand(1:3,n), response1 = rand(n), response2 = rand(n), response3=rand(n), response4=rand(n));

df.score23 = df.response2.*df.response3

mytrace = parcoords(;line = attr(color=df.score23),
        dimensions = [
            attr(range = [0,1],
                 label = "response1", values = df.response1),
            attr(range = [0,1],
                 label = "response2", values = df.response2),
            attr(range = [0,1],
                 label = "response3", values = df.response3),
            attr(range = [0,1],
                 label = "response4", values = df.response4)
        ]);

        layout = Layout(Dict{Symbol,Any}(
            :paper_bgcolor => "rgb(105, 105, 105)",
            :plot_bgcolor => "rgb(105, 105, 105)",
            :linewidth => lw,
            :xtickfontsize => xts,
            :ytickfontsize => yts,
            :yguidefontsize => ygs))

myplot = PlotlyJS.plot(mytrace,layout)
PlotlyJS.savefig(myplot, "/tmp/parcoords.png")

output

parcoords
parcoords700×500 170 KB

1 Like
2

@mkarikom
You can set tickfont size within mytrace definition.
The right place to set the line width is also here, but it is not implemented yet https://github.com/plotly/plotly.js/issues/4504
https://github.com/plotly/plotly.js/issues/2573.

mytrace = parcoords(;tickfont_size=20, 
                     line = attr(color=df.score23, width=0.5)
...

I inserted width=0.5, although at the moment it has no effect.

2 Likes
3

@mkarikom and @empet, this is awesome.

Would you know how to:

  • avoid the white hallow around the multiple y-axes labels?
  • change the color of the other axes annotations: response1 to response4?

NB: it seems that using Plots in example above is not needed

4

@rafael.guerra, @mkarikom
That white hallow is displayed because of the dark background color. It can be removed setting tickfont_color="white". But even in this case the font looks like a bold one. Perhaps this is the intended appearance, because the tick label could be covered by lines.
Since in @mkarikom’s plot the axis labels “response1”, … “response4” are not displayed, the font_color should be set in layout, too:

mytrace = parcoords(;tickfont_size=14, tickfont_color="white", # tickfont_family="Balto",
                     line = attr(color=df.score23),
        dimensions = [
            attr(range = [0,1],
                 label = "response1", values = df.response1),
            attr(range = [0,1],
                 label = "response2", values = df.response2),
            attr(range = [0,1],
                 label = "response3", values = df.response3),
            attr(range = [0,1],
                 label = "response4", values = df.response4)
        ]);

        layout = Layout(Dict{Symbol,Any}(
             :font_family=> "Balto",
            :font_size=>20, 
            :font_color=>"white",
            :paper_bgcolor => "rgb(105, 105, 105)",
            #:plot_bgcolor => "rgb(105, 105, 105)",
            ))
1 Like
5

@empet, thanks a lot!
In plot below the white hallow around the y-axes labels is a bit annoying but overall and otherwise it looks quite good and this type of plot is extremely useful.

NB: in this case a black-hallow would come handy…

PlotlyJS_inter_multi_yaxis_plot_black
PlotlyJS_inter_multi_yaxis_plot_black1600×880 1.65 MB

6

Thanks, @empet!
One further question: do you the proper way to render this in .eps, .pdf, or .svg?
PlotlyJS.savefig(myplot, "/tmp/parcoords.pdf") works, but it seems to have just embedded the bitmap, which is fine for a slide but is not my preferred route for eg posters, manuscripts.

7

To save your plot as a pdf file with prescribed DPI, let us say, DPI=300,
just give the width and the height, as follows:

PlotlyJS.savefig(myplot, "/tmp/parcoords.pdf", width=Int64(1.2*300), height=Int64(0.9*300),  scale=1)
1 Like
8

@rafael.guerra
I asked on plotly.js https://github.com/plotly/plotly.js/issues/2573 why the ticklabels on yaxes look like they are displayed with a bold font, and found out that this issue is already fixed and soon will be available a new plotly.js version that works as expected for parccords.

1 Like