var gd = document.getElementById('graph')
var gen = v => Math.round(Math.random(v) * 10)
var n = 100
var x = new Array(n).fill(0).map(gen)
var y = new Array(n).fill(0).map(gen)
var c = '#984ea3'
var usmo = 0

Plotly.newPlot(gd, [{
  mode: 'markers',
  x: x,
  y: y,
  marker: {color: c},
  unselected: { marker: {opacity: usmo} }
}, {
  type: 'violin',
  name: 'x',
  x: x,
  points: 'all',
  pointpos: 1.5,
  box: {visible: true},
  yaxis: 'y2',
  marker: {color: c},
  unselected: { marker: {opacity: usmo} }
}, {
  type: 'violin',
  name: 'y',
  y: y,
  points: 'all',
  pointpos: 1.5,
  box: {visible: true},
  xaxis: 'x2',
  marker: {color: c},
  unselected: { marker: {opacity: usmo} }
}], {
  xaxis: {
    domain: [0, 0.48]
  },
  yaxis: {
    domain: [0, 0.48]
  },
  xaxis2: {
    domain: [0.52, 1]
  },
  yaxis2: {
    domain: [0.52, 1]
  },
  showlegend: false,
  dragmode: 'lasso',
  hovermode: 'closest',
  width: 500,
  height: 500
})
gd.on('plotly_selected', d => {
  if(d && d.points && d.points.length) {
    var sel = d.points.map(p => p.pointIndex)
    Plotly.restyle(gd, 'selectedpoints', [sel.slice(), sel.slice(), sel.slice()])
  } else {
    Plotly.restyle(gd, 'selectedpoints', null)
  }
})