Add count of y-axis points to scatter plot

plotly.js
1

Hi,
In this simple example a couple of traces place multiple points on the same y axis values. Here it’s just two on each row. I’d like the count of markers along each y row to display at the end of the row on the right hand side (or some other useful display). Ideally this would just be as a column of numbers - if we could label it, even better.

My case is more complex than this with several traces on 10 to 100 y axis rows, the x axis being dates and hundreds to thousands of points :slightly_smiling_face: . This would make the count of the points for the same y value really useful!

var trace1 = {
  x: [0, 1, 2, 3, 4, 5],
  y: ["a", "b", "c", "d", "e", "f"],
  type: 'scatter',
  mode: "markers",
};

var trace2 = {
  x: [1, 3, 5, 4, 3, 2],
  y: ["a", "b", "c", "d", "e", "f"],
  type: 'scatter',
  mode: "markers",
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);
2

I’ve got the display part of the solution working. This code shows a vertical column of bubbles and a vertical column of numbers (values hardcoded and don’t actually count the points). I haven’t decided yet which one I’m going to use.
Btw, the sizes and text given as ‘1+1’ are calculated and accepted by plotly!

The real code will need to dynamically calculate the counts/sizes to plug in to the arrays instead of the hardcoded values here.

plotlycounts
plotlycounts725×206 9.33 KB

var trace0 = {
  x: ["2014-03-21",
"2014-07-04",
"2015-01-28",
"2014-08-29",
"2017-01-25",
"2017-02-01"],
  y: ["a", "b", "c", "d", "e", "f"],
  type: 'scatter',
  mode: "markers"
};

var trace1 = {
  name: 'Number of encounters',
  hovertemplate: "count:%{marker.size}" ,
  x: ["2018-01-01","2018-01-01",
     "2018-01-01","2018-01-01",
     "2018-01-01","2018-01-01"],
  y: ["a", "b", "c", "d", "e", "f"],
  type: 'scatter',
  mode: "markers",
  marker: { color: 'White',
          line: {color: '#d64161', width: 2},
          size: [1+1,2+1,3+1,4+1,5+1,6+1]
          }
};


var trace2 = {
  name: 'Encounter count',
  x: ["2018-03-01","2018-03-01",
     "2018-03-01","2018-03-01",
     "2018-03-01","2018-03-01"],
  y: ["a", "b", "c", "d", "e", "f"],
  type: 'scatter',
  mode: "text",
  text: ['count:2',2, 3, 6, 6, 'count:8'],
  marker: { color: 'White',
          line: {color: 'Red', width: 2},
          size: [1+1,2+1,3+1,4+1,5+1,6+1]
          },
    text: [1+1,2+1,3+1,4+1,5+1,6+1],
  textposition: 'top right',
  textfont: {
    size: 11,
    color: '#1f77b4'
  },
};

var layout = {
  hovermode: 'closest',
  height: 400,
  width: 1300
};

var data = [trace0, trace1, trace2];

Plotly.newPlot('myDiv', data, layout);