Skip to content

Instantly share code, notes, and snippets.

@ghtmtt
Created Sep 10, 2019
Embed
What would you like to do?
<head><meta charset="utf-8" /><script src="/home/matteo/.local/share/QGIS/QGIS3/profiles/matteo/python/plugins/DataPlotly/core/../jsscripts/polyfill.min.js"></script><script src="/home/matteo/.local/share/QGIS/QGIS3/profiles/matteo/python/plugins/DataPlotly/core/../jsscripts/plotly-1.34.0.min.js"></script></head><div> <div id="97e673f2-9241-4ef0-85f8-d0b67ecf5b2d" class="plotly-graph-div" style="height:100%; width:100%;"></div> <script type="text/javascript"> window.PLOTLYENV=window.PLOTLYENV || {}
;
if (document.getElementById("97e673f2-9241-4ef0-85f8-d0b67ecf5b2d")) {
Plotly.newPlot( '97e673f2-9241-4ef0-85f8-d0b67ecf5b2d', [ {
"customdata": ["so4"], "hoverinfo": "all", "ids": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], "line": {
"dash": "solid", "width": 1
}
, "marker": {
"color": "rgb(142, 186, 217)", "colorbar": {
"len": 0.8
}
, "colorscale": [[0.0, "rgb(255,255,255)"], [0.125, "rgb(240,240,240)"], [0.25, "rgb(217,217,217)"], [0.375, "rgb(189,189,189)"], [0.5, "rgb(150,150,150)"], [0.625, "rgb(115,115,115)"], [0.75, "rgb(82,82,82)"], [0.875, "rgb(37,37,37)"], [1.0, "rgb(0,0,0)"]], "line": {
"color": "rgb(31, 119, 180)", "width": 1
}
, "reversescale": false, "showscale": false, "size": 10, "symbol": 0
}
, "mode": "markers", "name": "so4 - ca", "opacity": 1.0, "text": [], "type": "scatter", "x": [203, 151, 350, 137, 319, 329, 267, 88, 98, 84, 100, 627, 306, 513, 267, 457, 683, 791, 788, 265, 296, 680, 536, 1122, 632, 1055, 1322, 1485, 1197, 602], "y": [110.45, 108.25, 116.44, 126.73, 46.64, 35.05, 74.16, 22.26, 81.87, 42.94, 47.43, 61.46, 149.01, 115.89, 147.26, 85.97, 143.38, 93.39, 64.94, 62.91, 83.0, 81.57, 53.6, 270.45, 263.33, 269.56, 249.28, 282.48, 247.84, 200.45]
}
], {
"legend": {
"orientation": "v"
}
, "showlegend": true, "template": {
"data": {
"bar": [ {
"error_x": {
"color": "#2a3f5f"
}
, "error_y": {
"color": "#2a3f5f"
}
, "marker": {
"line": {
"color": "#E5ECF6", "width": 0.5
}
}
, "type": "bar"
}
], "barpolar": [ {
"marker": {
"line": {
"color": "#E5ECF6", "width": 0.5
}
}
, "type": "barpolar"
}
], "carpet": [ {
"aaxis": {
"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"
}
, "baxis": {
"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"
}
, "type": "carpet"
}
], "choropleth": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "type": "choropleth"
}
], "contour": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"
}
], "contourcarpet": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "type": "contourcarpet"
}
], "heatmap": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"
}
], "heatmapgl": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmapgl"
}
], "histogram": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "histogram"
}
], "histogram2d": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"
}
], "histogram2dcontour": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"
}
], "mesh3d": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "type": "mesh3d"
}
], "parcoords": [ {
"line": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "parcoords"
}
], "scatter": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scatter"
}
], "scatter3d": [ {
"line": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scatter3d"
}
], "scattercarpet": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scattercarpet"
}
], "scattergeo": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scattergeo"
}
], "scattergl": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scattergl"
}
], "scattermapbox": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scattermapbox"
}
], "scatterpolar": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scatterpolar"
}
], "scatterpolargl": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scatterpolargl"
}
], "scatterternary": [ {
"marker": {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
}
, "type": "scatterternary"
}
], "surface": [ {
"colorbar": {
"outlinewidth": 0, "ticks": ""
}
, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "surface"
}
], "table": [ {
"cells": {
"fill": {
"color": "#EBF0F8"
}
, "line": {
"color": "white"
}
}
, "header": {
"fill": {
"color": "#C8D4E3"
}
, "line": {
"color": "white"
}
}
, "type": "table"
}
]
}
, "layout": {
"annotationdefaults": {
"arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1
}
, "colorscale": {
"diverging": [[0, "#8e0152"], [0.1, "#c51b7d"], [0.2, "#de77ae"], [0.3, "#f1b6da"], [0.4, "#fde0ef"], [0.5, "#f7f7f7"], [0.6, "#e6f5d0"], [0.7, "#b8e186"], [0.8, "#7fbc41"], [0.9, "#4d9221"], [1, "#276419"]], "sequential": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "sequentialminus": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]]
}
, "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"], "font": {
"color": "#2a3f5f"
}
, "geo": {
"bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white"
}
, "hoverlabel": {
"align": "left"
}
, "hovermode": "closest", "mapbox": {
"style": "light"
}
, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": {
"angularaxis": {
"gridcolor": "white", "linecolor": "white", "ticks": ""
}
, "bgcolor": "#E5ECF6", "radialaxis": {
"gridcolor": "white", "linecolor": "white", "ticks": ""
}
}
, "scene": {
"xaxis": {
"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"
}
, "yaxis": {
"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"
}
, "zaxis": {
"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"
}
}
, "shapedefaults": {
"line": {
"color": "#2a3f5f"
}
}
, "ternary": {
"aaxis": {
"gridcolor": "white", "linecolor": "white", "ticks": ""
}
, "baxis": {
"gridcolor": "white", "linecolor": "white", "ticks": ""
}
, "bgcolor": "#E5ECF6", "caxis": {
"gridcolor": "white", "linecolor": "white", "ticks": ""
}
}
, "title": {
"x": 0.05
}
, "xaxis": {
"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "zerolinecolor": "white", "zerolinewidth": 2
}
, "yaxis": {
"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "zerolinecolor": "white", "zerolinewidth": 2
}
}
}
, "title": {
"text": ""
}
, "xaxis": {
"rangeslider": {
"borderwidth": 1, "visible": false
}
, "title": {
"text": "so4"
}
, "type": "linear"
}
, "yaxis": {
"title": {
"text": "ca"
}
, "type": "linear"
}
}
, {
"scrollZoom": true, "editable": true, "responsive": true
}
)
}
;
</script> </div> <script> // additional js function to select and click on the data
// returns the ids of the selected/clicked feature
var plotly_div=document.getElementById('97e673f2-9241-4ef0-85f8-d0b67ecf5b2d') var plotly_data=plotly_div.data // selecting function
plotly_div.on('plotly_selected', function(data) {
var dds= {}
;
dds["mode"]='selection' dds["type"]=data.points[0].data.type featureIds=[];
featureIdsTernary=[];
data.points.forEach(function(pt) {
featureIds.push(parseInt(pt.id)) featureIdsTernary.push(parseInt(pt.pointNumber)) dds["id"]=featureIds dds["tid"]=featureIdsTernary
}
) //console.log(dds)
window.status=JSON.stringify(dds)
}
) // clicking function
plotly_div.on('plotly_click', function(data) {
var featureIds=[];
var dd= {}
;
dd["fidd"]=data.points[0].id dd["mode"]='clicking' // loop and create dictionary depending on plot type
for(var i=0;
i < data.points.length;
i++) {
// scatter plot
if(data.points[i].data.type=='scatter') {
dd["uid"]=data.points[i].data.uid dd["type"]=data.points[i].data.type data.points.forEach(function(pt) {
dd["fid"]=pt.id
}
)
}
// pie
else if(data.points[i].data.type=='pie') {
dd["type"]=data.points[i].data.type dd["label"]=data.points[i].label dd["field"]=data.points[i].data.name console.log(data.points[i].label) console.log(data.points[i])
}
// histogram
else if(data.points[i].data.type=='histogram') {
dd["type"]=data.points[i].data.type dd["uid"]=data.points[i].data.uid dd["field"]=data.points[i].data.name // correct axis orientation
if(data.points[i].data.orientation=='v') {
dd["id"]=data.points[i].x dd["bin_step"]=data.points[i].data.xbins.size
}
else {
dd["id"]=data.points[i].y dd["bin_step"]=data.points[i].data.ybins.size
}
}
// box plot
else if(data.points[i].data.type=='box') {
dd["uid"]=data.points[i].data.uid dd["type"]=data.points[i].data.type dd["field"]=data.points[i].data.customdata[0] // correct axis orientation
if(data.points[i].data.orientation=='v') {
dd["id"]=data.points[i].x
}
else {
dd["id"]=data.points[i].y
}
}
// violin plot
else if(data.points[i].data.type=='violin') {
dd["uid"]=data.points[i].data.uid dd["type"]=data.points[i].data.type dd["field"]=data.points[i].data.customdata[0] // correct axis orientation (for violin is viceversa)
if(data.points[i].data.orientation=='v') {
dd["id"]=data.points[i].x
}
else {
dd["id"]=data.points[i].y
}
}
// bar plot
else if(data.points[i].data.type=='bar') {
dd["uid"]=data.points[i].data.uid dd["type"]=data.points[i].data.type dd["field"]=data.points[i].data.customdata[0] // correct axis orientation
if(data.points[i].data.orientation=='v') {
dd["id"]=data.points[i].x
}
else {
dd["id"]=data.points[i].y
}
}
// ternary
else if(data.points[i].data.type=='scatterternary') {
dd["uid"]=data.points[i].data.uid dd["type"]=data.points[i].data.type dd["field"]=data.points[i].data.customdata dd["fid"]=data.points[i].pointNumber
}
}
window.status=JSON.stringify(dd)
}
);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment