Skip to content

Instantly share code, notes, and snippets.

@this-josh
Created March 21, 2023 08:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save this-josh/e6f944147904fe21cf74f491a05f742a to your computer and use it in GitHub Desktop.
Save this-josh/e6f944147904fe21cf74f491a05f742a to your computer and use it in GitHub Desktop.
Hover Template
{
"data": [
{
"coloraxis": "coloraxis",
"customdata": [
[
[
0.5805209079366938,
0.4145465488645458,
0.7488916153892086,
0.23225747447580458,
0.6264770747342089,
0.7567610330366803,
0.32916084714253446
],
[
0.2015062562850568,
0.4135917837269064,
0.16930646082906786,
0.1745881009548762,
0.1325398212462695,
0.04406350966260275,
0.5616925298962588
],
[
0.8159110467216402,
0.13576374155942017,
0.08083760578811439,
0.5201333656078831,
0.7837785097008303,
0.14915796393952874,
0.9400291375195705
],
[
0.1378231436577635,
0.5929942496246132,
0.9473896719538369,
0.4616840811243895,
0.5333473566594279,
0.06172995592070063,
0.4809335827073493
],
[
0.37780028857922965,
0.43308987729445736,
0.5064184440474073,
0.725470956444381,
0.9597526932511722,
0.6513085078531982,
0.1340930269426409
],
[
0.6937839132382566,
0.5685646057999124,
0.6104956285971378,
0.621414306260652,
0.002360146666188445,
0.7656254673886753,
0.26572661925095953
],
[
0.6409087183731356,
0.9563299099457475,
0.5259971837934101,
0.6615364738436338,
0.3509257897587722,
0.3490037963147291,
0.6629716335118017
]
],
[
[
0.9649201218864953,
0.21916662349844673,
0.5531899995203727,
0.7448071017070875,
0.1785674632912978,
0.10113844840419617,
0.646186825244371
],
[
0.5477659883367494,
0.697919975519172,
0.16474136212455603,
0.5012896772774581,
0.7421155909730657,
0.2546483235688095,
0.12312792255812643
],
[
0.05966905638846021,
0.27289011490395176,
0.6990969896823758,
0.2385454245547438,
0.40163082837193265,
0.7756651010814232,
0.049250699800071684
],
[
0.7450827999984058,
0.4845774560680899,
0.14248259269902008,
0.9872782254338011,
0.20457442522269187,
0.28431787691554167,
0.02056202670215379
],
[
0.07378521255490389,
0.0013557371016771347,
0.459154954303597,
0.2871300415587916,
0.5683161887752379,
0.25049146125235866,
0.11849448778617544
],
[
0.08423470866345806,
0.9999795922545266,
0.8910123710017198,
0.9415311112476029,
0.822896594704122,
0.7202498051568375,
0.05499178822187689
],
[
0.3359137070920404,
0.575472993955267,
0.2270050158557153,
0.09613539197838517,
0.2835117001116986,
0.1177908924733897,
0.8270291410302797
]
]
],
"hovertemplate": "<b>z1:%{z:.3f}</b><br>z2:%{customdata[0]:.3f} <br>z3: %{customdata[1]:.3f}",
"name": "",
"z": [
[
0.48954844294753075,
0.339613859021076,
0.056423115227961285,
0.6131209270622533,
0.23994685913005265,
0.9515422213645405,
0.028375494337633533
],
[
0.1752939391960303,
0.10849547728774933,
0.47370806598180215,
0.8815733340762306,
0.9404594186580566,
0.9275813319930681,
0.21471337639987542
],
[
0.4436275758598647,
0.6170819797720531,
0.8593401053324699,
0.1883586300685789,
0.6838458925373881,
0.9933858521395816,
0.49669056865465133
],
[
0.6376981035929067,
0.4155475533897818,
0.9395907368604569,
0.5580789682986591,
0.6389919242486309,
0.39582395573258,
0.6044549399303313
],
[
0.3405969647514071,
0.004520026073866257,
0.44058846011861574,
0.969966757492276,
0.06961307215562074,
0.29496723799415525,
0.28701848038725697
],
[
0.30574942737235233,
0.19123338801502732,
0.42234982732197357,
0.4525234859116357,
0.7195329960652519,
0.7169438114040961,
0.7305703147846355
],
[
0.03958844498876013,
0.9438415256896314,
0.3162778260869642,
0.1214966987313989,
0.40736667936286175,
0.14400559173977145,
0.7652106244223416
]
],
"type": "heatmap",
"xaxis": "x",
"yaxis": "y"
},
{
"coloraxis": "coloraxis",
"customdata": [
[
[
0.48954844294753075,
0.339613859021076,
0.056423115227961285,
0.6131209270622533,
0.23994685913005265,
0.9515422213645405,
0.028375494337633533
],
[
0.1752939391960303,
0.10849547728774933,
0.47370806598180215,
0.8815733340762306,
0.9404594186580566,
0.9275813319930681,
0.21471337639987542
],
[
0.4436275758598647,
0.6170819797720531,
0.8593401053324699,
0.1883586300685789,
0.6838458925373881,
0.9933858521395816,
0.49669056865465133
],
[
0.6376981035929067,
0.4155475533897818,
0.9395907368604569,
0.5580789682986591,
0.6389919242486309,
0.39582395573258,
0.6044549399303313
],
[
0.3405969647514071,
0.004520026073866257,
0.44058846011861574,
0.969966757492276,
0.06961307215562074,
0.29496723799415525,
0.28701848038725697
],
[
0.30574942737235233,
0.19123338801502732,
0.42234982732197357,
0.4525234859116357,
0.7195329960652519,
0.7169438114040961,
0.7305703147846355
],
[
0.03958844498876013,
0.9438415256896314,
0.3162778260869642,
0.1214966987313989,
0.40736667936286175,
0.14400559173977145,
0.7652106244223416
]
],
[
[
0.9649201218864953,
0.21916662349844673,
0.5531899995203727,
0.7448071017070875,
0.1785674632912978,
0.10113844840419617,
0.646186825244371
],
[
0.5477659883367494,
0.697919975519172,
0.16474136212455603,
0.5012896772774581,
0.7421155909730657,
0.2546483235688095,
0.12312792255812643
],
[
0.05966905638846021,
0.27289011490395176,
0.6990969896823758,
0.2385454245547438,
0.40163082837193265,
0.7756651010814232,
0.049250699800071684
],
[
0.7450827999984058,
0.4845774560680899,
0.14248259269902008,
0.9872782254338011,
0.20457442522269187,
0.28431787691554167,
0.02056202670215379
],
[
0.07378521255490389,
0.0013557371016771347,
0.459154954303597,
0.2871300415587916,
0.5683161887752379,
0.25049146125235866,
0.11849448778617544
],
[
0.08423470866345806,
0.9999795922545266,
0.8910123710017198,
0.9415311112476029,
0.822896594704122,
0.7202498051568375,
0.05499178822187689
],
[
0.3359137070920404,
0.575472993955267,
0.2270050158557153,
0.09613539197838517,
0.2835117001116986,
0.1177908924733897,
0.8270291410302797
]
]
],
"hovertemplate": "z1:%{customdata[0]:.3f} <br><b>z2:%{z:.3f}</b><br>z3: %{customdata[1]:.3f}",
"name": "",
"z": [
[
0.5805209079366938,
0.4145465488645458,
0.7488916153892086,
0.23225747447580458,
0.6264770747342089,
0.7567610330366803,
0.32916084714253446
],
[
0.2015062562850568,
0.4135917837269064,
0.16930646082906786,
0.1745881009548762,
0.1325398212462695,
0.04406350966260275,
0.5616925298962588
],
[
0.8159110467216402,
0.13576374155942017,
0.08083760578811439,
0.5201333656078831,
0.7837785097008303,
0.14915796393952874,
0.9400291375195705
],
[
0.1378231436577635,
0.5929942496246132,
0.9473896719538369,
0.4616840811243895,
0.5333473566594279,
0.06172995592070063,
0.4809335827073493
],
[
0.37780028857922965,
0.43308987729445736,
0.5064184440474073,
0.725470956444381,
0.9597526932511722,
0.6513085078531982,
0.1340930269426409
],
[
0.6937839132382566,
0.5685646057999124,
0.6104956285971378,
0.621414306260652,
0.002360146666188445,
0.7656254673886753,
0.26572661925095953
],
[
0.6409087183731356,
0.9563299099457475,
0.5259971837934101,
0.6615364738436338,
0.3509257897587722,
0.3490037963147291,
0.6629716335118017
]
],
"type": "heatmap",
"xaxis": "x2",
"yaxis": "y2"
}
],
"layout": {
"template": {
"data": {
"histogram2dcontour": [
{
"type": "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"
]
]
}
],
"choropleth": [
{
"type": "choropleth",
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
],
"histogram2d": [
{
"type": "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"
]
]
}
],
"heatmap": [
{
"type": "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"
]
]
}
],
"heatmapgl": [
{
"type": "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"
]
]
}
],
"contourcarpet": [
{
"type": "contourcarpet",
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
],
"contour": [
{
"type": "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"
]
]
}
],
"surface": [
{
"type": "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"
]
]
}
],
"mesh3d": [
{
"type": "mesh3d",
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
],
"scatter": [
{
"fillpattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
},
"type": "scatter"
}
],
"parcoords": [
{
"type": "parcoords",
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"scatterpolargl": [
{
"type": "scatterpolargl",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"bar": [
{
"error_x": {
"color": "#2a3f5f"
},
"error_y": {
"color": "#2a3f5f"
},
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"scattergeo": [
{
"type": "scattergeo",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"scatterpolar": [
{
"type": "scatterpolar",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"histogram": [
{
"marker": {
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "histogram"
}
],
"scattergl": [
{
"type": "scattergl",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"scatter3d": [
{
"type": "scatter3d",
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"scattermapbox": [
{
"type": "scattermapbox",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"scatterternary": [
{
"type": "scatterternary",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"scattercarpet": [
{
"type": "scattercarpet",
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
}
}
],
"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"
}
],
"table": [
{
"cells": {
"fill": {
"color": "#EBF0F8"
},
"line": {
"color": "white"
}
},
"header": {
"fill": {
"color": "#C8D4E3"
},
"line": {
"color": "white"
}
},
"type": "table"
}
],
"barpolar": [
{
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"pie": [
{
"automargin": true,
"type": "pie"
}
]
},
"layout": {
"autotypenumbers": "strict",
"colorway": [
"#636efa",
"#EF553B",
"#00cc96",
"#ab63fa",
"#FFA15A",
"#19d3f3",
"#FF6692",
"#B6E880",
"#FF97FF",
"#FECB52"
],
"font": {
"color": "#2a3f5f"
},
"hovermode": "closest",
"hoverlabel": {
"align": "left"
},
"paper_bgcolor": "white",
"plot_bgcolor": "#E5ECF6",
"polar": {
"bgcolor": "#E5ECF6",
"angularaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"radialaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"ternary": {
"bgcolor": "#E5ECF6",
"aaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"baxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"caxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"coloraxis": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"colorscale": {
"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"
]
],
"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"
]
]
},
"xaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"automargin": true,
"zerolinewidth": 2
},
"yaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"automargin": true,
"zerolinewidth": 2
},
"scene": {
"xaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white",
"gridwidth": 2
},
"yaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white",
"gridwidth": 2
},
"zaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white",
"gridwidth": 2
}
},
"shapedefaults": {
"line": {
"color": "#2a3f5f"
}
},
"annotationdefaults": {
"arrowcolor": "#2a3f5f",
"arrowhead": 0,
"arrowwidth": 1
},
"geo": {
"bgcolor": "white",
"landcolor": "#E5ECF6",
"subunitcolor": "white",
"showland": true,
"showlakes": true,
"lakecolor": "white"
},
"title": {
"x": 0.05
},
"mapbox": {
"style": "light"
}
}
},
"xaxis": {
"anchor": "y",
"domain": [
0.0,
0.45
]
},
"yaxis": {
"anchor": "x",
"domain": [
0.0,
1.0
]
},
"xaxis2": {
"anchor": "y2",
"domain": [
0.55,
1.0
]
},
"yaxis2": {
"anchor": "x2",
"domain": [
0.0,
1.0
]
},
"annotations": [
{
"font": {
"size": 16
},
"showarrow": false,
"text": "z1",
"x": 0.225,
"xanchor": "center",
"xref": "paper",
"y": 1.0,
"yanchor": "bottom",
"yref": "paper"
},
{
"font": {
"size": 16
},
"showarrow": false,
"text": "z2",
"x": 0.775,
"xanchor": "center",
"xref": "paper",
"y": 1.0,
"yanchor": "bottom",
"yref": "paper"
}
],
"title": {
"text": "Hover to see the value of z1, z2 and z3 together"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment