Document how to interact with Plotly selection (#126)

Co-authored-by: lana-k <skochetova89@gmail.com>

How-to-work-with-plotly-interactive-selection.md

@@ -0,0 +1,33 @@
+# How to work with Plotly interactive selection
+
+Plotly supports interactive selection on some chart types, like scatterplot, 
+where you can select a subset of the points. It may be helpful for live
+presentation purposes, but there's no UI to interact with it if you want to
+compute something from the selection, like the count of points.
+
+![plotly scatterplot selection](./img/Screenshot_plotly_selection.png)
+
+This page proposes a workaround with browser console. Right click on the Plotly
+chart and select *Inspect* in the context menu. In the opened browser DOM 
+inspector scroll up and find the chart's container, matching 
+`div.js-plotly-plot` CSS selector. Right click and select *Use in console* or
+*Set as global variable* (depending on the browser). Then in *Console* tab paste
+the following snippet (adjust to your needs):
+
+```javascript
+temp0.on('plotly_selected', function(eventData) {
+  if (eventData) {
+    const start = Date.parse(eventData.range.x[0])
+    const finish = Date.parse(eventData.range.x[1])
+    console.log('---------- Selected points ----------')
+    console.log('Range, s:', (finish - start) / 1000)
+    console.log('Count:', eventData.points.length)
+  }
+})
+```
+
+To update set listener, first unset the existing one with:
+
+```javascript
+temp0.removeAllListeners('plotly_selected')
+```

sidebar.json

@@ -1,33 +1,35 @@
 [{
-	"sections": [{
+  "sections": [
-			"title": "For users",
+    {
-			"items": [
+      "title": "For users",
-				"/docs/",
+      "items": [
-				"/docs/installation/",
+        "/docs/",
-				"/docs/basic-usage/",
+        "/docs/installation/",
-				"/docs/multiple-csv-file-import/",
+        "/docs/basic-usage/",
-				"/docs/manage-inquiries/",
+        "/docs/multiple-csv-file-import/",
-				"/docs/export-current-database/",
+        "/docs/manage-inquiries/",
-				"/docs/graph/",
+        "/docs/export-current-database/",
-				"/docs/pivot-table/",
+  			"/docs/graph/",
-				"/docs/predefined-inquiries/",
+        "/docs/pivot-table/",
-				"/docs/sharing/",
+        "/docs/predefined-inquiries/",
-				"/docs/diagnostic-information/"
+        "/docs/sharing/",
-			]
+        "/docs/diagnostic-information/"
-		},
+      ]
-		{
+    },
-			"title": "Examples and tutorials",
+    {
-			"items": [
+      "title": "Examples and tutorials",
-				"/docs/how-to-migrate-to-sqliteviz-dot-com/",
+      "items": [
-				"/docs/how-to-build-a-pivot-table-in-sq-lite/",
+        "/docs/how-to-migrate-to-sqliteviz-dot-com/",
-				"/docs/how-to-rename-tables-and-columns-after-csv-import/"
+        "/docs/how-to-build-a-pivot-table-in-sq-lite/",
-			]
+        "/docs/how-to-rename-tables-and-columns-after-csv-import/",
-		},
+        "/docs/how-to-work-with-plotly-interactive-selection/"
-		{
+      ]
-			"title": "For developers",
+    },
-			"items": [
+    {
-				"/docs/integrate-predefined-inquiries/"
+      "title": "For developers",
-			]
+      "items": [
-		}
+        "/docs/integrate-predefined-inquiries/"
-	]
+      ]
+    }
+  ]
 }]