Skip to content

Instantly share code, notes, and snippets.

@genkuroki

genkuroki/standalone_html.ipynb

Created September 19, 2020 09:18
Show Gist options
  • Save genkuroki/569cb512d1c4a60ea4249d2d7da88760 to your computer and use it in GitHub Desktop.
Save genkuroki/569cb512d1c4a60ea4249d2d7da88760 to your computer and use it in GitHub Desktop.
Download ZIP
standalone_html
Display the source blob
Display the rendered blob
Raw
standalone_html.ipynb
{
"cells": [
{
"metadata": {
"trusted": true
},
"cell_type": "code",
"source": "html = \"<!DOCTYPE html>\\n<html>\\n <head>\\n <title>Plots.jl</title>\\n <meta http-equiv=\\\"content-type\\\" content=\\\"text/html; charset=UTF-8\\\">\\n <script src=\\\"https://cdn.plot.ly/plotly-1.54.2.min.js\\\"></script>\\n </head>\\n <body>\\n <div id=\\\"bfd085e9-a53b-4186-a947-5e662b375ce5\\\" style=\\\"width:600px;height:400px;\\\"></div>\\n <script>\\n PLOT = document.getElementById('bfd085e9-a53b-4186-a947-5e662b375ce5');\\n Plotly.plot(PLOT, [\\n {\\n \\\"xaxis\\\": \\\"x1\\\",\\n \\\"colorbar\\\": {\\n \\\"title\\\": \\\"\\\"\\n },\\n \\\"yaxis\\\": \\\"y1\\\",\\n \\\"x\\\": [\\n -5.0,\\n -4.975585452450529,\\n -4.951170904901059,\\n -4.926756357351589,\\n -4.9023418098021185,\\n -4.789467937116388,\\n -4.676594064430657,\\n -4.563720191744926,\\n -4.450846319059195,\\n -4.337972446373465,\\n -4.225098573687734,\\n -4.1122247010020025,\\n -3.9993508283162718,\\n -3.863685842973144,\\n -3.7280208576300167,\\n -3.592355872286889,\\n -3.456690886943761,\\n -3.227284849893052,\\n -2.997878812842343,\\n -2.7486795562559143,\\n -2.499480299669486,\\n -2.384610463415544,\\n -2.2697406271616023,\\n -2.15487079090766,\\n -2.0400009546537183,\\n -1.916848349974064,\\n -1.7936957452944098,\\n -1.6705431406147557,\\n -1.5473905359351015,\\n -1.4047061661049955,\\n -1.2620217962748894,\\n -1.1193374264447833,\\n -0.9766530566146772,\\n -0.8498520271834542,\\n -0.7230509977522314,\\n -0.5962499683210085,\\n -0.46944893888978556,\\n -0.24706278674379273,\\n -0.024676634597799892,\\n 0.21778396597769734,\\n 0.46024456655319457,\\n 0.5821953717969262,\\n 0.7041461770406577,\\n 0.8260969822843893,\\n 0.9480477875281209,\\n 1.0828799972071013,\\n 1.2177122068860817,\\n 1.3525444165650622,\\n 1.4873766262440427,\\n 1.6156660715451405,\\n 1.7439555168462386,\\n 1.8722449621473367,\\n 2.0005344074484346,\\n 2.1339256643647024,\\n 2.26731692128097,\\n 2.4007081781972377,\\n 2.5340994351135055,\\n 2.758673485890978,\\n 2.983247536668451,\\n 3.257426998266046,\\n 3.531606459863641,\\n 3.6604748502195017,\\n 3.789343240575363,\\n 3.918211630931224,\\n 4.047080021287085,\\n 4.150308598646275,\\n 4.253537176005464,\\n 4.3567657533646535,\\n 4.459994330723842,\\n 4.563222908083031,\\n 4.66645148544222,\\n 4.7696800628014095,\\n 4.872908640160599,\\n 4.904681480120449,\\n 4.9364543200802995,\\n 4.96822716004015,\\n 5.0\\n ],\\n \\\"showlegend\\\": true,\\n \\\"mode\\\": \\\"lines\\\",\\n \\\"name\\\": \\\"y1\\\",\\n \\\"zmin\\\": null,\\n \\\"legendgroup\\\": \\\"y1\\\",\\n \\\"zmax\\\": null,\\n \\\"line\\\": {\\n \\\"color\\\": \\\"rgba(0, 154, 250, 1.000)\\\",\\n \\\"shape\\\": \\\"linear\\\",\\n \\\"dash\\\": \\\"solid\\\",\\n \\\"width\\\": 1\\n },\\n \\\"y\\\": [\\n 0.9589242746631385,\\n 0.965563291722537,\\n 0.97162679393126,\\n 0.9771111671962716,\\n 0.9820131426088557,\\n 0.9970308876503605,\\n 0.9993594303958425,\\n 0.9889691355046937,\\n 0.9659922401577499,\\n 0.9307211710759917,\\n 0.8836048228085437,\\n 0.8252428446561658,\\n 0.7563780089405031,\\n 0.6609568980656421,\\n 0.5533895297159968,\\n 0.4356526454244615,\\n 0.30990986964986167,\\n 0.08558735965787978,\\n -0.14321964837503193,\\n -0.3828811482645716,\\n -0.5988884178668034,\\n -0.6867308941333826,\\n -0.7655218613254127,\\n -0.8342228090735139,\\n -0.8919282192813187,\\n -0.9407191411596759,\\n -0.9752606092104765,\\n -0.9950294098276709,\\n -0.9997260969818377,\\n -0.986238707792793,\\n -0.9527066947452159,\\n -0.899811572956539,\\n -0.8286283994203965,\\n -0.751182737350679,\\n -0.6616753570350854,\\n -0.5615434757426131,\\n -0.4523949080295961,\\n -0.24455699373377002,\\n -0.02467413025764248,\\n 0.2160664670593724,\\n 0.444167238157247,\\n 0.5498589611843256,\\n 0.6473833119728851,\\n 0.7352917051011392,\\n 0.8122783865116799,\\n 0.8833115717351019,\\n 0.9383107090121471,\\n 0.9762774430259284,\\n 0.9965225940430157,\\n 0.9989935218813863,\\n 0.9850453703032711,\\n 0.9549073858487706,\\n 0.9090749050234505,\\n 0.8455887043238225,\\n 0.7670790476493855,\\n 0.6749408050647633,\\n 0.5708109838099867,\\n 0.37362981296428177,\\n 0.15768424347650672,\\n -0.11557548200784744,\\n -0.3802011846346912,\\n -0.4959097764199482,\\n -0.6033941549108707,\\n -0.7008717892993345,\\n -0.7867261015407899,\\n -0.8461482082902942,\\n -0.8965616460290249,\\n -0.9374296790293236,\\n -0.9683171984310474,\\n -0.988895354706268,\\n -0.9989450588148868,\\n -0.998359314775486,\\n -0.9871443588172798,\\n -0.981568696042158,\\n -0.9750022099138186,\\n -0.9674515288300809,\\n -0.9589242746631385\\n ],\\n \\\"type\\\": \\\"scatter\\\"\\n }\\n]\\n, {\\n \\\"showlegend\\\": true,\\n \\\"xaxis\\\": {\\n \\\"showticklabels\\\": true,\\n \\\"gridwidth\\\": 0.5,\\n \\\"tickvals\\\": [\\n -4.0,\\n -2.0,\\n 0.0,\\n 2.0,\\n 4.0\\n ],\\n \\\"range\\\": [\\n -5.3,\\n 5.3\\n ],\\n \\\"domain\\\": [\\n 0.0658209390492855,\\n 0.9934383202099738\\n ],\\n \\\"mirror\\\": false,\\n \\\"tickangle\\\": 0,\\n \\\"showline\\\": true,\\n \\\"ticktext\\\": [\\n \\\"-4\\\",\\n \\\"-2\\\",\\n \\\"0\\\",\\n \\\"2\\\",\\n \\\"4\\\"\\n ],\\n \\\"zeroline\\\": false,\\n \\\"tickfont\\\": {\\n \\\"color\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"family\\\": \\\"sans-serif\\\",\\n \\\"size\\\": 11\\n },\\n \\\"zerolinecolor\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"anchor\\\": \\\"y1\\\",\\n \\\"visible\\\": true,\\n \\\"ticks\\\": \\\"inside\\\",\\n \\\"tickmode\\\": \\\"array\\\",\\n \\\"linecolor\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"showgrid\\\": true,\\n \\\"title\\\": \\\"\\\",\\n \\\"gridcolor\\\": \\\"rgba(0, 0, 0, 0.100)\\\",\\n \\\"titlefont\\\": {\\n \\\"color\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"family\\\": \\\"sans-serif\\\",\\n \\\"size\\\": 15\\n },\\n \\\"tickcolor\\\": \\\"rgb(0, 0, 0)\\\",\\n \\\"type\\\": \\\"-\\\"\\n },\\n \\\"paper_bgcolor\\\": \\\"rgba(255, 255, 255, 1.000)\\\",\\n \\\"annotations\\\": [],\\n \\\"height\\\": 400,\\n \\\"margin\\\": {\\n \\\"l\\\": 0,\\n \\\"b\\\": 20,\\n \\\"r\\\": 0,\\n \\\"t\\\": 20\\n },\\n \\\"plot_bgcolor\\\": \\\"rgba(255, 255, 255, 1.000)\\\",\\n \\\"yaxis\\\": {\\n \\\"showticklabels\\\": true,\\n \\\"gridwidth\\\": 0.5,\\n \\\"tickvals\\\": [\\n -1.0,\\n -0.5,\\n 0.0,\\n 0.5,\\n 1.0\\n ],\\n \\\"range\\\": [\\n -1.0596986628031682,\\n 1.059331996217173\\n ],\\n \\\"domain\\\": [\\n 0.03762029746281716,\\n 0.9901574803149606\\n ],\\n \\\"mirror\\\": false,\\n \\\"tickangle\\\": 0,\\n \\\"showline\\\": true,\\n \\\"ticktext\\\": [\\n \\\"-1.0\\\",\\n \\\"-0.5\\\",\\n \\\"0.0\\\",\\n \\\"0.5\\\",\\n \\\"1.0\\\"\\n ],\\n \\\"zeroline\\\": false,\\n \\\"tickfont\\\": {\\n \\\"color\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"family\\\": \\\"sans-serif\\\",\\n \\\"size\\\": 11\\n },\\n \\\"zerolinecolor\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"anchor\\\": \\\"x1\\\",\\n \\\"visible\\\": true,\\n \\\"ticks\\\": \\\"inside\\\",\\n \\\"tickmode\\\": \\\"array\\\",\\n \\\"linecolor\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"showgrid\\\": true,\\n \\\"title\\\": \\\"\\\",\\n \\\"gridcolor\\\": \\\"rgba(0, 0, 0, 0.100)\\\",\\n \\\"titlefont\\\": {\\n \\\"color\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"family\\\": \\\"sans-serif\\\",\\n \\\"size\\\": 15\\n },\\n \\\"tickcolor\\\": \\\"rgb(0, 0, 0)\\\",\\n \\\"type\\\": \\\"-\\\"\\n },\\n \\\"legend\\\": {\\n \\\"yanchor\\\": \\\"auto\\\",\\n \\\"xanchor\\\": \\\"auto\\\",\\n \\\"bordercolor\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"bgcolor\\\": \\\"rgba(255, 255, 255, 1.000)\\\",\\n \\\"font\\\": {\\n \\\"color\\\": \\\"rgba(0, 0, 0, 1.000)\\\",\\n \\\"family\\\": \\\"sans-serif\\\",\\n \\\"size\\\": 11\\n },\\n \\\"tracegroupgap\\\": 0,\\n \\\"y\\\": 1.0,\\n \\\"borderwidth\\\": 1,\\n \\\"traceorder\\\": \\\"normal\\\",\\n \\\"x\\\": 1.0\\n },\\n \\\"width\\\": 600\\n}\\n);\\n </script>\\n\\n </body>\\n</html>\\n\"\ndisplay(\"text/html\", html)",
"execution_count": 1,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/html": "<!DOCTYPE html>\n<html>\n <head>\n <title>Plots.jl</title>\n <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n <script src=\"https://cdn.plot.ly/plotly-1.54.2.min.js\"></script>\n </head>\n <body>\n <div id=\"bfd085e9-a53b-4186-a947-5e662b375ce5\" style=\"width:600px;height:400px;\"></div>\n <script>\n PLOT = document.getElementById('bfd085e9-a53b-4186-a947-5e662b375ce5');\n Plotly.plot(PLOT, [\n {\n \"xaxis\": \"x1\",\n \"colorbar\": {\n \"title\": \"\"\n },\n \"yaxis\": \"y1\",\n \"x\": [\n -5.0,\n -4.975585452450529,\n -4.951170904901059,\n -4.926756357351589,\n -4.9023418098021185,\n -4.789467937116388,\n -4.676594064430657,\n -4.563720191744926,\n -4.450846319059195,\n -4.337972446373465,\n -4.225098573687734,\n -4.1122247010020025,\n -3.9993508283162718,\n -3.863685842973144,\n -3.7280208576300167,\n -3.592355872286889,\n -3.456690886943761,\n -3.227284849893052,\n -2.997878812842343,\n -2.7486795562559143,\n -2.499480299669486,\n -2.384610463415544,\n -2.2697406271616023,\n -2.15487079090766,\n -2.0400009546537183,\n -1.916848349974064,\n -1.7936957452944098,\n -1.6705431406147557,\n -1.5473905359351015,\n -1.4047061661049955,\n -1.2620217962748894,\n -1.1193374264447833,\n -0.9766530566146772,\n -0.8498520271834542,\n -0.7230509977522314,\n -0.5962499683210085,\n -0.46944893888978556,\n -0.24706278674379273,\n -0.024676634597799892,\n 0.21778396597769734,\n 0.46024456655319457,\n 0.5821953717969262,\n 0.7041461770406577,\n 0.8260969822843893,\n 0.9480477875281209,\n 1.0828799972071013,\n 1.2177122068860817,\n 1.3525444165650622,\n 1.4873766262440427,\n 1.6156660715451405,\n 1.7439555168462386,\n 1.8722449621473367,\n 2.0005344074484346,\n 2.1339256643647024,\n 2.26731692128097,\n 2.4007081781972377,\n 2.5340994351135055,\n 2.758673485890978,\n 2.983247536668451,\n 3.257426998266046,\n 3.531606459863641,\n 3.6604748502195017,\n 3.789343240575363,\n 3.918211630931224,\n 4.047080021287085,\n 4.150308598646275,\n 4.253537176005464,\n 4.3567657533646535,\n 4.459994330723842,\n 4.563222908083031,\n 4.66645148544222,\n 4.7696800628014095,\n 4.872908640160599,\n 4.904681480120449,\n 4.9364543200802995,\n 4.96822716004015,\n 5.0\n ],\n \"showlegend\": true,\n \"mode\": \"lines\",\n \"name\": \"y1\",\n \"zmin\": null,\n \"legendgroup\": \"y1\",\n \"zmax\": null,\n \"line\": {\n \"color\": \"rgba(0, 154, 250, 1.000)\",\n \"shape\": \"linear\",\n \"dash\": \"solid\",\n \"width\": 1\n },\n \"y\": [\n 0.9589242746631385,\n 0.965563291722537,\n 0.97162679393126,\n 0.9771111671962716,\n 0.9820131426088557,\n 0.9970308876503605,\n 0.9993594303958425,\n 0.9889691355046937,\n 0.9659922401577499,\n 0.9307211710759917,\n 0.8836048228085437,\n 0.8252428446561658,\n 0.7563780089405031,\n 0.6609568980656421,\n 0.5533895297159968,\n 0.4356526454244615,\n 0.30990986964986167,\n 0.08558735965787978,\n -0.14321964837503193,\n -0.3828811482645716,\n -0.5988884178668034,\n -0.6867308941333826,\n -0.7655218613254127,\n -0.8342228090735139,\n -0.8919282192813187,\n -0.9407191411596759,\n -0.9752606092104765,\n -0.9950294098276709,\n -0.9997260969818377,\n -0.986238707792793,\n -0.9527066947452159,\n -0.899811572956539,\n -0.8286283994203965,\n -0.751182737350679,\n -0.6616753570350854,\n -0.5615434757426131,\n -0.4523949080295961,\n -0.24455699373377002,\n -0.02467413025764248,\n 0.2160664670593724,\n 0.444167238157247,\n 0.5498589611843256,\n 0.6473833119728851,\n 0.7352917051011392,\n 0.8122783865116799,\n 0.8833115717351019,\n 0.9383107090121471,\n 0.9762774430259284,\n 0.9965225940430157,\n 0.9989935218813863,\n 0.9850453703032711,\n 0.9549073858487706,\n 0.9090749050234505,\n 0.8455887043238225,\n 0.7670790476493855,\n 0.6749408050647633,\n 0.5708109838099867,\n 0.37362981296428177,\n 0.15768424347650672,\n -0.11557548200784744,\n -0.3802011846346912,\n -0.4959097764199482,\n -0.6033941549108707,\n -0.7008717892993345,\n -0.7867261015407899,\n -0.8461482082902942,\n -0.8965616460290249,\n -0.9374296790293236,\n -0.9683171984310474,\n -0.988895354706268,\n -0.9989450588148868,\n -0.998359314775486,\n -0.9871443588172798,\n -0.981568696042158,\n -0.9750022099138186,\n -0.9674515288300809,\n -0.9589242746631385\n ],\n \"type\": \"scatter\"\n }\n]\n, {\n \"showlegend\": true,\n \"xaxis\": {\n \"showticklabels\": true,\n \"gridwidth\": 0.5,\n \"tickvals\": [\n -4.0,\n -2.0,\n 0.0,\n 2.0,\n 4.0\n ],\n \"range\": [\n -5.3,\n 5.3\n ],\n \"domain\": [\n 0.0658209390492855,\n 0.9934383202099738\n ],\n \"mirror\": false,\n \"tickangle\": 0,\n \"showline\": true,\n \"ticktext\": [\n \"-4\",\n \"-2\",\n \"0\",\n \"2\",\n \"4\"\n ],\n \"zeroline\": false,\n \"tickfont\": {\n \"color\": \"rgba(0, 0, 0, 1.000)\",\n \"family\": \"sans-serif\",\n \"size\": 11\n },\n \"zerolinecolor\": \"rgba(0, 0, 0, 1.000)\",\n \"anchor\": \"y1\",\n \"visible\": true,\n \"ticks\": \"inside\",\n \"tickmode\": \"array\",\n \"linecolor\": \"rgba(0, 0, 0, 1.000)\",\n \"showgrid\": true,\n \"title\": \"\",\n \"gridcolor\": \"rgba(0, 0, 0, 0.100)\",\n \"titlefont\": {\n \"color\": \"rgba(0, 0, 0, 1.000)\",\n \"family\": \"sans-serif\",\n \"size\": 15\n },\n \"tickcolor\": \"rgb(0, 0, 0)\",\n \"type\": \"-\"\n },\n \"paper_bgcolor\": \"rgba(255, 255, 255, 1.000)\",\n \"annotations\": [],\n \"height\": 400,\n \"margin\": {\n \"l\": 0,\n \"b\": 20,\n \"r\": 0,\n \"t\": 20\n },\n \"plot_bgcolor\": \"rgba(255, 255, 255, 1.000)\",\n \"yaxis\": {\n \"showticklabels\": true,\n \"gridwidth\": 0.5,\n \"tickvals\": [\n -1.0,\n -0.5,\n 0.0,\n 0.5,\n 1.0\n ],\n \"range\": [\n -1.0596986628031682,\n 1.059331996217173\n ],\n \"domain\": [\n 0.03762029746281716,\n 0.9901574803149606\n ],\n \"mirror\": false,\n \"tickangle\": 0,\n \"showline\": true,\n \"ticktext\": [\n \"-1.0\",\n \"-0.5\",\n \"0.0\",\n \"0.5\",\n \"1.0\"\n ],\n \"zeroline\": false,\n \"tickfont\": {\n \"color\": \"rgba(0, 0, 0, 1.000)\",\n \"family\": \"sans-serif\",\n \"size\": 11\n },\n \"zerolinecolor\": \"rgba(0, 0, 0, 1.000)\",\n \"anchor\": \"x1\",\n \"visible\": true,\n \"ticks\": \"inside\",\n \"tickmode\": \"array\",\n \"linecolor\": \"rgba(0, 0, 0, 1.000)\",\n \"showgrid\": true,\n \"title\": \"\",\n \"gridcolor\": \"rgba(0, 0, 0, 0.100)\",\n \"titlefont\": {\n \"color\": \"rgba(0, 0, 0, 1.000)\",\n \"family\": \"sans-serif\",\n \"size\": 15\n },\n \"tickcolor\": \"rgb(0, 0, 0)\",\n \"type\": \"-\"\n },\n \"legend\": {\n \"yanchor\": \"auto\",\n \"xanchor\": \"auto\",\n \"bordercolor\": \"rgba(0, 0, 0, 1.000)\",\n \"bgcolor\": \"rgba(255, 255, 255, 1.000)\",\n \"font\": {\n \"color\": \"rgba(0, 0, 0, 1.000)\",\n \"family\": \"sans-serif\",\n \"size\": 11\n },\n \"tracegroupgap\": 0,\n \"y\": 1.0,\n \"borderwidth\": 1,\n \"traceorder\": \"normal\",\n \"x\": 1.0\n },\n \"width\": 600\n}\n);\n </script>\n\n </body>\n</html>\n"
},
"metadata": {}
}
]
},
{
"metadata": {
"trusted": true
},
"cell_type": "code",
"source": "",
"execution_count": null,
"outputs": []
}
],
"metadata": {
"kernelspec": {
"name": "julia-1.6-o3-depwarn",
"display_name": "Julia 1.6.0-DEV depwarn -O3",
"language": "julia"
},
"toc": {
"nav_menu": {},
"number_sections": true,
"sideBar": true,
"skip_h1_title": false,
"base_numbering": 1,
"title_cell": "Table of Contents",
"title_sidebar": "Contents",
"toc_cell": false,
"toc_position": {},
"toc_section_display": true,
"toc_window_display": false
},
"language_info": {
"file_extension": ".jl",
"name": "julia",
"mimetype": "application/julia",
"version": "1.6.0"
},
"@webio": {
"lastKernelId": null,
"lastCommId": null
},
"gist": {
"id": "",
"data": {
"description": "standalone_html",
"public": true
}
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment