Learning software by exampe or full reference documentation. There are certain things I expect to be covered by simple examples properly. I would assume that it is reasonable that most everyday cases are covered by examples. Less often used functions should be documented properly in a reference manual.

Contents


The problem

I used plotly.js in the post on regression metrics. I am more used to matplotlib and ggplot2 but I like the idea of a package highlights data in a graph when displayed in a browser on hovering.

I do not like the idea to use symbols twice in a single plot. Since it is difficult to get a lot of colors that are colorbild safe, print friendly and photocopy safe, it is useful to add different symbols as a final safety precaution. Therefore, I wanted to know how to change the symbol of the marker. I would have expected to find it in either Line and Scatterplots or in Styling Markers. Unfortunately, search engines of my choice did not help much either (at least not for the javascript implementation).

The solution

We find a list of all symbols hidden deep inside the reference. To use them is straight forward:


// creating a few arrays with random numbers
set_1_array = new Array(20)
for (var i = 0; i < set_1_array.length; i++) {
  set_1_array[i] = Math.random()
}

set_2_array = new Array(8)
for (var i = 0; i < set_2_array.length; i++) {
  set_2_array[i] = Math.random()
}

set_3_array = new Array(4)
for (var i = 0; i < set_3_array.length; i++) {
  set_3_array[i] = Math.random()
}


set_4_array = new Array(13)
for (var i = 0; i < set_4_array.length; i++) {
  set_4_array[i] = Math.random()
}


// creating traces for plotly.js

// symbol is a part of 'marker'

var set_1 = {
    x: set_1_array,
    mode: 'markers',
        marker : {
            color: 'rgb(252,141,98)' },
    name: 'Set 1'
    };

var set_2 = {
    x: set_2_array,
    mode: 'markers',
        marker : {
            color: 'blue',
            symbol: 'star-triangle-up' },
    name: 'Set 2'
    };



var set_3 = {
    x: set_3_array,
    mode: 'markers',
        marker : {
            color: 'black',
            symbol: 'x' },
    name: 'Set 3'
    };


var set_4 = {
    x: set_4_array,
    mode: 'markers',
        marker : {
            color: 'rgb(102,194,165)',
            symbol: 'diamond' },
    name: 'Set 4'
    };
Plotly.newPlot('example-plot', [set_1, set_2, set_3, set_4]);

and we get: