Splom unselected not working?

plotly.js
1

Hello! I’m looking at the api docs here Single-page reference in JavaScript and it looks like I should just be able to add the code: unselected: {marker: {opacity: 0}) to my trace but that doesn’t seem to be the case? Can anyone help me debug?

In the codepen below I expect the line added above to my code to produce a plot where if I lasso or box select the other points are no longer visible. Shouldn’t this be the case?

HTML:

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JS:

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key.replace('.',' ')]; });
    }

    colors = []
    for (i=0; i < unpack(rows, 'class').length; i++) {
      if (unpack(rows, 'class')[i] == "Iris-setosa") {
        colors.push(0)
      } else if (unpack(rows, 'class')[i] == "Iris-versicolor") {
        colors.push(0.5)
      } else if (unpack(rows, 'class')[i] == "Iris-virginica") {
        colors.push(1)
      }
    }

    var pl_colorscale=[
               [0.0, '#19d3f3'],
               [0.333, '#19d3f3'],
               [0.333, '#e763fa'],
               [0.666, '#e763fa'],
               [0.666, '#636efa'],
               [1, '#636efa']
    ]

    var axis = () => ({
      showline:false,
      zeroline:false,
      gridcolor:'#ffff',
      ticklen:4
    })

    var data = [{
      type: 'splom',
      dimensions: [
        {label:'sepal length', values:unpack(rows,'sepal length')},
        {label:'sepal width', values:unpack(rows,'sepal width')},
        {label:'petal length', values:unpack(rows,'petal length')},
        {label:'petal width', values:unpack(rows,'petal width')}
      ],
      text: unpack(rows, 'class'),
      marker: {
        color: colors,
        colorscale:pl_colorscale,
        size: 7,
        line: {
          color: 'white',
          width: 0.5
        }
      },
      unselected: {marker: {opacity: 0}}
    }]

    var layout = {
      title:'Iris Data set',
      height: 800,
      width: 800,
      autosize: false,
      hovermode:'closest',
      dragmode:'select',
      plot_bgcolor:'rgba(240,240,240, 0.95)',
      xaxis:axis(),
      yaxis:axis(),
      xaxis2:axis(),
      xaxis3:axis(),
      xaxis4:axis(),
      yaxis2:axis(),
      yaxis3:axis(),
      yaxis4:axis()
    }

    Plotly.react('myDiv', data, layout)

});
2

Hi,

Thank you for providing the codepen! I think this is a bug in Plotly, as it happens exclusively when the value is set to 0 (both in opacity and size).

The solution for now would be to use a very small value instead (say 0.0001).

@adamschroeder

3

Thank you for pointing this out @jlfsjunior and @MGans .

I will figure out the best way to move forward and get back to you.

4

Issue opened on Github: Selected/unselected markers opacity can't be set to 0 in splom plot · Issue #6272 · plotly/plotly.js · GitHub

2 Likes