{ "cells": [ { "cell_type": "markdown", "id": "de1c1ba0", "metadata": {}, "source": [ "It is always desired to support blog posts with good visuals and the interactive plots are very good for exploration and a better understanding of the results and underlying data. Including interactive plots involves the usage of javascript for the given visualization library and makes embedding interactive figures not that straightforward. This post provides an exploration of methods used to embed interactive plot in jupyter notebook that is later transformed into an HTML webpage. The article is divided into three parts dedicated to major python plotting libraries: [plotly](https://plotly.com/python/), [bokeh](https://bokeh.org/) , and [altair](https://altair-viz.github.io/).\n", "\n", "\n", "\n", "- [Plotly](#plotly)\n", " - [Create baseline plot data](#create-baseline-plot-data)\n", " - [Display](#display)\n", " - [Method 1: template for js snippet \\(Figure is displayed twice\\)](#method-1-template-for-js-snippet-figure-is-displayed-twice)\n", " - [Method 2: Dump plotly figure to HTML string & pass to `display.HTML()` \\(no display in notebook\\)](#method-2-dump-plotly-figure-to-html-string--pass-to-displayhtml-no-display-in-notebook)\n", " - [Method 3. with HTML with plotly figure and display in IFrame](#method-3-with-html-with-plotly-figure-and-display-in-iframe)\n", "- [Bokeh](#bokeh)\n", "- [Altair](#altair)\n", "\n", "" ] }, { "cell_type": "markdown", "id": "79d34410", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "# Plotly" ] }, { "cell_type": "markdown", "id": "95b9307c", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "## Create baseline plot data" ] }, { "cell_type": "code", "execution_count": 1, "id": "2772fb44", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [], "source": [ "import plotly\n", "from plotly import express as px\n", "\n", "gapminder = px.data.gapminder()\n", "\n", "fig = px.scatter(\n", " gapminder.query(\"year==2007\"),\n", " x=\"gdpPercap\",\n", " y=\"lifeExp\",\n", " size=\"pop\",\n", " color=\"continent\",\n", " hover_name=\"country\",\n", " log_x=True,\n", " size_max=60,\n", " height=480,\n", " width=600,\n", ")" ] }, { "cell_type": "markdown", "id": "4594c01c", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "## Display" ] }, { "cell_type": "markdown", "id": "232b5cd0", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "### Method 1: template for js snippet (Figure is displayed twice)\n", "In this solution display(HTML) is rendering proper plot for the blog, and the fig.show() provides preview while working in the notebook." ] }, { "cell_type": "code", "execution_count": 2, "id": "048bad61", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [], "source": [ "plot_json = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)" ] }, { "cell_type": "code", "execution_count": 3, "id": "3ab6dd14", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from jinja2 import Template\n", "\n", "template = \"\"\"\n", "
\n", "\n", "\n", "\"\"\"\n", "data = {\"plot_json\": plot_json}\n", "j2_template = Template(template)\n", "\n", "from IPython.core.display import HTML\n", "\n", "# This will be visible in blog post\n", "display(HTML(j2_template.render(data)))" ] }, { "cell_type": "markdown", "id": "24c17dd1", "metadata": {}, "source": [ "The next cell contains only `fig.show()`. This is a preview (`display()` above do not render in a notebook) that can be either manually removed from the final version or can be filtered out using cell tags (`remove_cell`)" ] }, { "cell_type": "code", "execution_count": 4, "id": "7d814635", "metadata": { "hideCode": false, "hidePrompt": false, "tags": [ "remove_cell" ] }, "outputs": [ { "data": { "text/html": [ " \n", " " ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "hovertemplate": "%{hovertext}

continent=Asia
gdpPercap=%{x}
lifeExp=%{y}
pop=%{marker.size}", "hovertext": [ "Afghanistan", "Bahrain", "Bangladesh", "Cambodia", "China", "Hong Kong, China", "India", "Indonesia", "Iran", "Iraq", "Israel", "Japan", "Jordan", "Korea, Dem. Rep.", "Korea, Rep.", "Kuwait", "Lebanon", "Malaysia", "Mongolia", "Myanmar", "Nepal", "Oman", "Pakistan", "Philippines", "Saudi Arabia", "Singapore", "Sri Lanka", "Syria", "Taiwan", "Thailand", "Vietnam", "West Bank and Gaza", "Yemen, Rep." ], "legendgroup": "Asia", "marker": { "color": "#636efa", "size": [ 31889923, 708573, 150448339, 14131858, 1318683096, 6980412, 1110396331, 223547000, 69453570, 27499638, 6426679, 127467972, 6053193, 23301725, 49044790, 2505559, 3921278, 24821286, 2874127, 47761980, 28901790, 3204897, 169270617, 91077287, 27601038, 4553009, 20378239, 19314747, 23174294, 65068149, 85262356, 4018332, 22211743 ], "sizemode": "area", "sizeref": 366300.86, "symbol": "circle" }, "mode": "markers", "name": "Asia", "orientation": "v", "showlegend": true, "type": "scatter", "x": [ 974.5803384, 29796.04834, 1391.253792, 1713.778686, 4959.114854, 39724.97867, 2452.210407, 3540.651564, 11605.71449, 4471.061906, 25523.2771, 31656.06806, 4519.461171, 1593.06548, 23348.139730000006, 47306.98978, 10461.05868, 12451.6558, 3095.7722710000007, 944, 1091.359778, 22316.19287, 2605.94758, 3190.481016, 21654.83194, 47143.17964, 3970.095407, 4184.548089, 28718.27684, 7458.396326999998, 2441.576404, 3025.349798, 2280.769906 ], "xaxis": "x", "y": [ 43.828, 75.635, 64.062, 59.723, 72.961, 82.208, 64.69800000000001, 70.65, 70.964, 59.545, 80.745, 82.603, 72.535, 67.297, 78.623, 77.58800000000002, 71.993, 74.241, 66.803, 62.069, 63.785, 75.64, 65.483, 71.688, 72.777, 79.972, 72.396, 74.143, 78.4, 70.616, 74.249, 73.422, 62.698 ], "yaxis": "y" }, { "hovertemplate": "%{hovertext}

continent=Europe
gdpPercap=%{x}
lifeExp=%{y}
pop=%{marker.size}", "hovertext": [ "Albania", "Austria", "Belgium", "Bosnia and Herzegovina", "Bulgaria", "Croatia", "Czech Republic", "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Serbia", "Slovak Republic", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "United Kingdom" ], "legendgroup": "Europe", "marker": { "color": "#EF553B", "size": [ 3600523, 8199783, 10392226, 4552198, 7322858, 4493312, 10228744, 5468120, 5238460, 61083916, 82400996, 10706290, 9956108, 301931, 4109086, 58147733, 684736, 16570613, 4627926, 38518241, 10642836, 22276056, 10150265, 5447502, 2009245, 40448191, 9031088, 7554661, 71158647, 60776238 ], "sizemode": "area", "sizeref": 366300.86, "symbol": "circle" }, "mode": "markers", "name": "Europe", "orientation": "v", "showlegend": true, "type": "scatter", "x": [ 5937.029525999998, 36126.4927, 33692.60508, 7446.298803, 10680.79282, 14619.222719999998, 22833.30851, 35278.41874, 33207.0844, 30470.0167, 32170.37442, 27538.41188, 18008.94444, 36180.78919, 40675.99635, 28569.7197, 9253.896111, 36797.93332, 49357.19017, 15389.924680000002, 20509.64777, 10808.47561, 9786.534714, 18678.31435, 25768.25759, 28821.0637, 33859.74835, 37506.41907, 8458.276384, 33203.26128 ], "xaxis": "x", "y": [ 76.423, 79.829, 79.441, 74.852, 73.005, 75.748, 76.486, 78.332, 79.313, 80.657, 79.406, 79.483, 73.33800000000002, 81.757, 78.885, 80.546, 74.543, 79.762, 80.196, 75.563, 78.098, 72.476, 74.002, 74.663, 77.926, 80.941, 80.884, 81.70100000000002, 71.777, 79.425 ], "yaxis": "y" }, { "hovertemplate": "%{hovertext}

continent=Africa
gdpPercap=%{x}
lifeExp=%{y}
pop=%{marker.size}", "hovertext": [ "Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cameroon", "Central African Republic", "Chad", "Comoros", "Congo, Dem. Rep.", "Congo, Rep.", "Cote d'Ivoire", "Djibouti", "Egypt", "Equatorial Guinea", "Eritrea", "Ethiopia", "Gabon", "Gambia", "Ghana", "Guinea", "Guinea-Bissau", "Kenya", "Lesotho", "Liberia", "Libya", "Madagascar", "Malawi", "Mali", "Mauritania", "Mauritius", "Morocco", "Mozambique", "Namibia", "Niger", "Nigeria", "Reunion", "Rwanda", "Sao Tome and Principe", "Senegal", "Sierra Leone", "Somalia", "South Africa", "Sudan", "Swaziland", "Tanzania", "Togo", "Tunisia", "Uganda", "Zambia", "Zimbabwe" ], "legendgroup": "Africa", "marker": { "color": "#00cc96", "size": [ 33333216, 12420476, 8078314, 1639131, 14326203, 8390505, 17696293, 4369038, 10238807, 710960, 64606759, 3800610, 18013409, 496374, 80264543, 551201, 4906585, 76511887, 1454867, 1688359, 22873338, 9947814, 1472041, 35610177, 2012649, 3193942, 6036914, 19167654, 13327079, 12031795, 3270065, 1250882, 33757175, 19951656, 2055080, 12894865, 135031164, 798094, 8860588, 199579, 12267493, 6144562, 9118773, 43997828, 42292929, 1133066, 38139640, 5701579, 10276158, 29170398, 11746035, 12311143 ], "sizemode": "area", "sizeref": 366300.86, "symbol": "circle" }, "mode": "markers", "name": "Africa", "orientation": "v", "showlegend": true, "type": "scatter", "x": [ 6223.367465, 4797.231267, 1441.284873, 12569.85177, 1217.032994, 430.0706916, 2042.09524, 706.016537, 1704.063724, 986.1478792, 277.5518587, 3632.557798, 1544.750112, 2082.4815670000007, 5581.180998, 12154.08975, 641.3695236000002, 690.8055759, 13206.48452, 752.7497265, 1327.60891, 942.6542111, 579.2317429999998, 1463.249282, 1569.331442, 414.5073415, 12057.49928, 1044.770126, 759.3499101, 1042.581557, 1803.151496, 10956.99112, 3820.17523, 823.6856205, 4811.060429, 619.6768923999998, 2013.977305, 7670.122558, 863.0884639000002, 1598.435089, 1712.472136, 862.5407561000002, 926.1410683, 9269.657808, 2602.394995, 4513.480643, 1107.482182, 882.9699437999999, 7092.923025, 1056.380121, 1271.211593, 469.70929810000007 ], "xaxis": "x", "y": [ 72.301, 42.731, 56.728, 50.728, 52.295, 49.58, 50.43, 44.74100000000001, 50.651, 65.152, 46.462, 55.322, 48.328, 54.791, 71.33800000000002, 51.57899999999999, 58.04, 52.947, 56.735, 59.448, 60.022, 56.007, 46.38800000000001, 54.11, 42.592, 45.678, 73.952, 59.44300000000001, 48.303, 54.467, 64.164, 72.801, 71.164, 42.082, 52.90600000000001, 56.867, 46.859, 76.442, 46.242, 65.528, 63.062, 42.56800000000001, 48.159, 49.339, 58.556, 39.613, 52.517, 58.42, 73.923, 51.542, 42.38399999999999, 43.487 ], "yaxis": "y" }, { "hovertemplate": "%{hovertext}

continent=Americas
gdpPercap=%{x}
lifeExp=%{y}
pop=%{marker.size}", "hovertext": [ "Argentina", "Bolivia", "Brazil", "Canada", "Chile", "Colombia", "Costa Rica", "Cuba", "Dominican Republic", "Ecuador", "El Salvador", "Guatemala", "Haiti", "Honduras", "Jamaica", "Mexico", "Nicaragua", "Panama", "Paraguay", "Peru", "Puerto Rico", "Trinidad and Tobago", "United States", "Uruguay", "Venezuela" ], "legendgroup": "Americas", "marker": { "color": "#ab63fa", "size": [ 40301927, 9119152, 190010647, 33390141, 16284741, 44227550, 4133884, 11416987, 9319622, 13755680, 6939688, 12572928, 8502814, 7483763, 2780132, 108700891, 5675356, 3242173, 6667147, 28674757, 3942491, 1056608, 301139947, 3447496, 26084662 ], "sizemode": "area", "sizeref": 366300.86, "symbol": "circle" }, "mode": "markers", "name": "Americas", "orientation": "v", "showlegend": true, "type": "scatter", "x": [ 12779.37964, 3822.137084, 9065.800825, 36319.23501, 13171.63885, 7006.580419, 9645.06142, 8948.102923, 6025.3747520000015, 6873.262326000001, 5728.353514, 5186.050003, 1201.637154, 3548.3308460000007, 7320.8802620000015, 11977.57496, 2749.320965, 9809.185636, 4172.838464, 7408.905561, 19328.70901, 18008.50924, 42951.65309, 10611.46299, 11415.80569 ], "xaxis": "x", "y": [ 75.32, 65.554, 72.39, 80.653, 78.553, 72.889, 78.782, 78.273, 72.235, 74.994, 71.878, 70.259, 60.916, 70.19800000000001, 72.567, 76.195, 72.899, 75.53699999999998, 71.752, 71.421, 78.74600000000002, 69.819, 78.242, 76.384, 73.747 ], "yaxis": "y" }, { "hovertemplate": "%{hovertext}

continent=Oceania
gdpPercap=%{x}
lifeExp=%{y}
pop=%{marker.size}", "hovertext": [ "Australia", "New Zealand" ], "legendgroup": "Oceania", "marker": { "color": "#FFA15A", "size": [ 20434176, 4115771 ], "sizemode": "area", "sizeref": 366300.86, "symbol": "circle" }, "mode": "markers", "name": "Oceania", "orientation": "v", "showlegend": true, "type": "scatter", "x": [ 34435.367439999995, 25185.00911 ], "xaxis": "x", "y": [ 81.235, 80.204 ], "yaxis": "y" } ], "layout": { "height": 480, "legend": { "itemsizing": "constant", "title": { "text": "continent" }, "tracegroupgap": 0 }, "margin": { "t": 60 }, "template": { "data": { "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" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "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, "#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, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 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, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 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, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 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, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 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, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "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, "#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, "#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 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "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, "#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, "#f0f921" ] ], "sequentialminus": [ [ 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, "#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": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "width": 600, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "text": "gdpPercap" }, "type": "log" }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "text": "lifeExp" } } } }, "text/html": [ "
" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig.show()" ] }, { "cell_type": "markdown", "id": "e6379345", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "### Method 2: Dump plotly figure to HTML string & pass to `display.HTML()` (no display in notebook)" ] }, { "cell_type": "markdown", "id": "408c8ce2", "metadata": {}, "source": [ "The plot below is not displayed in the notebook" ] }, { "cell_type": "code", "execution_count": 5, "id": "e212c7d9", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n", "
\n", "
\n", "\n", "" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "import IPython\n", "\n", "plotly_graph = fig.to_html(include_plotlyjs=\"cdn\")\n", "IPython.display.HTML(plotly_graph)" ] }, { "cell_type": "markdown", "id": "37d3d4c4", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "### Method 3. Plotly figure to HTML and display in IFrame\n", "> **NOTE:** this method requires manual copying generated file to output dir (e.g. docs)" ] }, { "cell_type": "code", "execution_count": 6, "id": "729dcead", "metadata": {}, "outputs": [], "source": [ "with open(\"plotly_graph.html\", \"wt\") as f:\n", " f.write(fig.to_html(include_plotlyjs=\"cdn\"))" ] }, { "cell_type": "code", "execution_count": 7, "id": "8959f472", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "data": { "text/html": [ "\n", " \n", " " ], "text/plain": [ "" ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# iframe with and height should be litte bit larger than those rendered by plotly\n", "\n", "IPython.display.IFrame(\"plotly_graph.html\", width=650, height=500)" ] }, { "cell_type": "markdown", "id": "8d1f1bf0", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "# Bokeh" ] }, { "cell_type": "code", "execution_count": 8, "id": "ef2b4a16", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Bokeh version: 2.3.3\n" ] }, { "data": { "text/html": [ "\n", "
\n", " \n", " Loading BokehJS ...\n", "
" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", "(function(root) {\n", " function now() {\n", " return new Date();\n", " }\n", "\n", " var force = true;\n", "\n", " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n", " root._bokeh_onload_callbacks = [];\n", " root._bokeh_is_loading = undefined;\n", " }\n", "\n", " var JS_MIME_TYPE = 'application/javascript';\n", " var HTML_MIME_TYPE = 'text/html';\n", " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n", " var CLASS_NAME = 'output_bokeh rendered_html';\n", "\n", " /**\n", " * Render data to the DOM node\n", " */\n", " function render(props, node) {\n", " var script = document.createElement(\"script\");\n", " node.appendChild(script);\n", " }\n", "\n", " /**\n", " * Handle when an output is cleared or removed\n", " */\n", " function handleClearOutput(event, handle) {\n", " var cell = handle.cell;\n", "\n", " var id = cell.output_area._bokeh_element_id;\n", " var server_id = cell.output_area._bokeh_server_id;\n", " // Clean up Bokeh references\n", " if (id != null && id in Bokeh.index) {\n", " Bokeh.index[id].model.document.clear();\n", " delete Bokeh.index[id];\n", " }\n", "\n", " if (server_id !== undefined) {\n", " // Clean up Bokeh references\n", " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n", " cell.notebook.kernel.execute(cmd, {\n", " iopub: {\n", " output: function(msg) {\n", " var id = msg.content.text.trim();\n", " if (id in Bokeh.index) {\n", " Bokeh.index[id].model.document.clear();\n", " delete Bokeh.index[id];\n", " }\n", " }\n", " }\n", " });\n", " // Destroy server and session\n", " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n", " cell.notebook.kernel.execute(cmd);\n", " }\n", " }\n", "\n", " /**\n", " * Handle when a new output is added\n", " */\n", " function handleAddOutput(event, handle) {\n", " var output_area = handle.output_area;\n", " var output = handle.output;\n", "\n", " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n", " if ((output.output_type != \"display_data\") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {\n", " return\n", " }\n", "\n", " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n", "\n", " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n", " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n", " // store reference to embed id on output_area\n", " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n", " }\n", " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n", " var bk_div = document.createElement(\"div\");\n", " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n", " var script_attrs = bk_div.children[0].attributes;\n", " for (var i = 0; i < script_attrs.length; i++) {\n", " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n", " toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n", " }\n", " // store reference to server id on output_area\n", " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n", " }\n", " }\n", "\n", " function register_renderer(events, OutputArea) {\n", "\n", " function append_mime(data, metadata, element) {\n", " // create a DOM node to render to\n", " var toinsert = this.create_output_subarea(\n", " metadata,\n", " CLASS_NAME,\n", " EXEC_MIME_TYPE\n", " );\n", " this.keyboard_manager.register_events(toinsert);\n", " // Render to node\n", " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n", " render(props, toinsert[toinsert.length - 1]);\n", " element.append(toinsert);\n", " return toinsert\n", " }\n", "\n", " /* Handle when an output is cleared or removed */\n", " events.on('clear_output.CodeCell', handleClearOutput);\n", " events.on('delete.Cell', handleClearOutput);\n", "\n", " /* Handle when a new output is added */\n", " events.on('output_added.OutputArea', handleAddOutput);\n", "\n", " /**\n", " * Register the mime type and append_mime function with output_area\n", " */\n", " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n", " /* Is output safe? */\n", " safe: true,\n", " /* Index of renderer in `output_area.display_order` */\n", " index: 0\n", " });\n", " }\n", "\n", " // register the mime type if in Jupyter Notebook environment and previously unregistered\n", " if (root.Jupyter !== undefined) {\n", " var events = require('base/js/events');\n", " var OutputArea = require('notebook/js/outputarea').OutputArea;\n", "\n", " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n", " register_renderer(events, OutputArea);\n", " }\n", " }\n", "\n", " \n", " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n", " root._bokeh_timeout = Date.now() + 5000;\n", " root._bokeh_failed_load = false;\n", " }\n", "\n", " var NB_LOAD_WARNING = {'data': {'text/html':\n", " \"
\\n\"+\n", " \"

\\n\"+\n", " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n", " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n", " \"

\\n\"+\n", " \"
    \\n\"+\n", " \"
  • re-rerun `output_notebook()` to attempt to load from CDN again, or
    • \\n\"+\n", " \"
  • use INLINE resources instead, as so:
    • \\n\"+\n", " \"
\\n\"+\n", " \"\\n\"+\n", " \"from bokeh.resources import INLINE\\n\"+\n", " \"output_notebook(resources=INLINE)\\n\"+\n", " \"\\n\"+\n", " \"
\"}};\n", "\n", " function display_loaded() {\n", " var el = document.getElementById(\"1002\");\n", " if (el != null) {\n", " el.textContent = \"BokehJS is loading...\";\n", " }\n", " if (root.Bokeh !== undefined) {\n", " if (el != null) {\n", " el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n", " }\n", " } else if (Date.now() < root._bokeh_timeout) {\n", " setTimeout(display_loaded, 100)\n", " }\n", " }\n", "\n", "\n", " function run_callbacks() {\n", " try {\n", " root._bokeh_onload_callbacks.forEach(function(callback) {\n", " if (callback != null)\n", " callback();\n", " });\n", " } finally {\n", " delete root._bokeh_onload_callbacks\n", " }\n", " console.debug(\"Bokeh: all callbacks have finished\");\n", " }\n", "\n", " function load_libs(css_urls, js_urls, callback) {\n", " if (css_urls == null) css_urls = [];\n", " if (js_urls == null) js_urls = [];\n", "\n", " root._bokeh_onload_callbacks.push(callback);\n", " if (root._bokeh_is_loading > 0) {\n", " console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", " return null;\n", " }\n", " if (js_urls == null || js_urls.length === 0) {\n", " run_callbacks();\n", " return null;\n", " }\n", " console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", " root._bokeh_is_loading = css_urls.length + js_urls.length;\n", "\n", " function on_load() {\n", " root._bokeh_is_loading--;\n", " if (root._bokeh_is_loading === 0) {\n", " console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n", " run_callbacks()\n", " }\n", " }\n", "\n", " function on_error(url) {\n", " console.error(\"failed to load \" + url);\n", " }\n", "\n", " for (let i = 0; i < css_urls.length; i++) {\n", " const url = css_urls[i];\n", " const element = document.createElement(\"link\");\n", " element.onload = on_load;\n", " element.onerror = on_error.bind(null, url);\n", " element.rel = \"stylesheet\";\n", " element.type = \"text/css\";\n", " element.href = url;\n", " console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n", " document.body.appendChild(element);\n", " }\n", "\n", " const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\": \"dM3QQsP+wXdHg42wTqW85BjZQdLNNIXqlPw/BgKoExPmTG7ZLML4EGqLMfqHT6ON\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\": \"8x57I4YuIfu8XyZfFo0XVr2WAT8EK4rh/uDe3wF7YuW2FNUSNEpJbsPaB1nJ2fz2\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\": \"3QTqdz9LyAm2i0sG5XTePsHec3UHWwVsrOL68SYRoAXsafvfAyqtQ+h440+qIBhS\"};\n", "\n", " for (let i = 0; i < js_urls.length; i++) {\n", " const url = js_urls[i];\n", " const element = document.createElement('script');\n", " element.onload = on_load;\n", " element.onerror = on_error.bind(null, url);\n", " element.async = false;\n", " element.src = url;\n", " if (url in hashes) {\n", " element.crossOrigin = \"anonymous\";\n", " element.integrity = \"sha384-\" + hashes[url];\n", " }\n", " console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", " document.head.appendChild(element);\n", " }\n", " };\n", "\n", " function inject_raw_css(css) {\n", " const element = document.createElement(\"style\");\n", " element.appendChild(document.createTextNode(css));\n", " document.body.appendChild(element);\n", " }\n", "\n", " \n", " var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\"];\n", " var css_urls = [];\n", " \n", "\n", " var inline_js = [\n", " function(Bokeh) {\n", " Bokeh.set_log_level(\"info\");\n", " },\n", " function(Bokeh) {\n", " \n", " \n", " }\n", " ];\n", "\n", " function run_inline_js() {\n", " \n", " if (root.Bokeh !== undefined || force === true) {\n", " \n", " for (var i = 0; i < inline_js.length; i++) {\n", " inline_js[i].call(root, root.Bokeh);\n", " }\n", " if (force === true) {\n", " display_loaded();\n", " }} else if (Date.now() < root._bokeh_timeout) {\n", " setTimeout(run_inline_js, 100);\n", " } else if (!root._bokeh_failed_load) {\n", " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", " root._bokeh_failed_load = true;\n", " } else if (force !== true) {\n", " var cell = $(document.getElementById(\"1002\")).parents('.cell').data().cell;\n", " cell.output_area.append_execute_result(NB_LOAD_WARNING)\n", " }\n", "\n", " }\n", "\n", " if (root._bokeh_is_loading === 0) {\n", " console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", " run_inline_js();\n", " } else {\n", " load_libs(css_urls, js_urls, function() {\n", " console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n", " run_inline_js();\n", " });\n", " }\n", "}(window));" ], "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n function now() {\n return new Date();\n }\n\n var force = true;\n\n if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n root._bokeh_onload_callbacks = [];\n root._bokeh_is_loading = undefined;\n }\n\n \n\n \n if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_failed_load = false;\n }\n\n var NB_LOAD_WARNING = {'data': {'text/html':\n \"
\\n\"+\n \"

\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"

\\n\"+\n \"
    \\n\"+\n \"
  • re-rerun `output_notebook()` to attempt to load from CDN again, or
    • \\n\"+\n \"
  • use INLINE resources instead, as so:
    • \\n\"+\n \"
\\n\"+\n \"\\n\"+\n \"from bokeh.resources import INLINE\\n\"+\n \"output_notebook(resources=INLINE)\\n\"+\n \"\\n\"+\n \"
\"}};\n\n function display_loaded() {\n var el = document.getElementById(\"1002\");\n if (el != null) {\n el.textContent = \"BokehJS is loading...\";\n }\n if (root.Bokeh !== undefined) {\n if (el != null) {\n el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n }\n } else if (Date.now() < root._bokeh_timeout) {\n setTimeout(display_loaded, 100)\n }\n }\n\n\n function run_callbacks() {\n try {\n root._bokeh_onload_callbacks.forEach(function(callback) {\n if (callback != null)\n callback();\n });\n } finally {\n delete root._bokeh_onload_callbacks\n }\n console.debug(\"Bokeh: all callbacks have finished\");\n }\n\n function load_libs(css_urls, js_urls, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n\n root._bokeh_onload_callbacks.push(callback);\n if (root._bokeh_is_loading > 0) {\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n }\n if (js_urls == null || js_urls.length === 0) {\n run_callbacks();\n return null;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n function on_load() {\n root._bokeh_is_loading--;\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n run_callbacks()\n }\n }\n\n function on_error(url) {\n console.error(\"failed to load \" + url);\n }\n\n for (let i = 0; i < css_urls.length; i++) {\n const url = css_urls[i];\n const element = document.createElement(\"link\");\n element.onload = on_load;\n element.onerror = on_error.bind(null, url);\n element.rel = \"stylesheet\";\n element.type = \"text/css\";\n element.href = url;\n console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n document.body.appendChild(element);\n }\n\n const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\": \"dM3QQsP+wXdHg42wTqW85BjZQdLNNIXqlPw/BgKoExPmTG7ZLML4EGqLMfqHT6ON\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\": \"8x57I4YuIfu8XyZfFo0XVr2WAT8EK4rh/uDe3wF7YuW2FNUSNEpJbsPaB1nJ2fz2\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\": \"3QTqdz9LyAm2i0sG5XTePsHec3UHWwVsrOL68SYRoAXsafvfAyqtQ+h440+qIBhS\"};\n\n for (let i = 0; i < js_urls.length; i++) {\n const url = js_urls[i];\n const element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error.bind(null, url);\n element.async = false;\n element.src = url;\n if (url in hashes) {\n element.crossOrigin = \"anonymous\";\n element.integrity = \"sha384-\" + hashes[url];\n }\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n };\n\n function inject_raw_css(css) {\n const element = document.createElement(\"style\");\n element.appendChild(document.createTextNode(css));\n document.body.appendChild(element);\n }\n\n \n var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\"];\n var css_urls = [];\n \n\n var inline_js = [\n function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\n function(Bokeh) {\n \n \n }\n ];\n\n function run_inline_js() {\n \n if (root.Bokeh !== undefined || force === true) {\n \n for (var i = 0; i < inline_js.length; i++) {\n inline_js[i].call(root, root.Bokeh);\n }\n if (force === true) {\n display_loaded();\n }} else if (Date.now() < root._bokeh_timeout) {\n setTimeout(run_inline_js, 100);\n } else if (!root._bokeh_failed_load) {\n console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n root._bokeh_failed_load = true;\n } else if (force !== true) {\n var cell = $(document.getElementById(\"1002\")).parents('.cell').data().cell;\n cell.output_area.append_execute_result(NB_LOAD_WARNING)\n }\n\n }\n\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n run_inline_js();\n } else {\n load_libs(css_urls, js_urls, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n}(window));" }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
xy
01.625303-3.450590
10.331879-6.498201
\n", "
" ], "text/plain": [ " x y\n", "0 1.625303 -3.450590\n", "1 0.331879 -6.498201" ] }, "execution_count": 8, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# see: https://stackoverflow.com/a/43880597/3247880\n", "import pandas as pd\n", "import numpy as np\n", "import bokeh\n", "\n", "print(\"Bokeh version:\", bokeh.__version__)\n", "from bokeh.plotting import figure, show\n", "from bokeh.models.sources import ColumnDataSource\n", "from bokeh.io import output_file, output_notebook\n", "from bokeh.models import HoverTool\n", "from bokeh.embed import file_html\n", "from bokeh.resources import CDN\n", "\n", "output_notebook()\n", "\n", "df = pd.DataFrame(np.random.normal(0, 5, (100, 2)), columns=[\"x\", \"y\"])\n", "df.head(2)" ] }, { "cell_type": "code", "execution_count": 9, "id": "a96d8aac", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [], "source": [ "source = ColumnDataSource(df)\n", "hover = HoverTool(tooltips=[(\"x\", \"@x\"), (\"y\", \"@y\")])\n", "myplot = figure(\n", " plot_width=600,\n", " plot_height=400,\n", " tools=\"hover,box_zoom,box_select,crosshair,reset\",\n", ")\n", "_ = myplot.circle(\"x\", \"y\", size=7, fill_alpha=0.5, source=source)\n", "# show(myplot, notebook_handle=True)" ] }, { "cell_type": "code", "execution_count": 10, "id": "96d7880a", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n", "\n", "\n", "\n", " \n", " \n", " \n", " \n", " Bokeh Application\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "" ], "text/plain": [ "" ] }, "execution_count": 10, "metadata": {}, "output_type": "execute_result" } ], "source": [ "myplot_html = file_html(myplot, CDN)\n", "IPython.display.HTML(myplot_html)" ] }, { "cell_type": "markdown", "id": "afb34693", "metadata": { "hideCode": false, "hidePrompt": false }, "source": [ "\n", "# Altair\n", "For Altair displaying frontends refer to the documentation: [Displaying Altair Charts](https://altair-viz.github.io/user_guide/display_frontends.html). By default, both Jupyter Notebook and JupyterLab will render if there is a web connection. See the documentation for offline rendering." ] }, { "cell_type": "code", "execution_count": 11, "id": "632b09f0", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, "execution_count": 11, "metadata": {}, "output_type": "execute_result" } ], "source": [ "import altair as alt\n", "from vega_datasets import data\n", "\n", "source = data.cars()\n", "\n", "alt.Chart(source).mark_circle(size=60).encode(\n", " x=\"Horsepower\",\n", " y=\"Miles_per_Gallon\",\n", " color=\"Origin\",\n", " tooltip=[\"Name\", \"Origin\", \"Horsepower\", \"Miles_per_Gallon\"],\n", ").interactive()" ] }, { "cell_type": "code", "execution_count": 12, "id": "b2cc8e5d", "metadata": { "hideCode": false, "hidePrompt": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, "execution_count": 12, "metadata": {}, "output_type": "execute_result" } ], "source": [ "import altair as alt\n", "import pandas as pd\n", "\n", "# HTML renderer requires a web connection in order to load relevant\n", "# Javascript libraries.\n", "alt.renderers.enable(\"html\")\n", "source = pd.DataFrame(\n", " {\n", " \"Letter\": [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\"],\n", " \"Frequency\": [28, 55, 43, 91, 81, 53, 19, 87, 52],\n", " }\n", ")\n", "\n", "alt.Chart(source).mark_bar().encode(\n", " x=\"Letter\",\n", " y=\"Frequency\",\n", " tooltip=[\"Letter\", \"Frequency\"],\n", ").interactive()" ] }, { "cell_type": "code", "execution_count": 13, "id": "25f54c75", "metadata": { "hideCode": false, "hidePrompt": false, "tags": [ "remove_input" ] }, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n" ], "text/plain": [ "" ] }, "execution_count": 13, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Ensure this cell has remove_input tag added (to hide it in blog post text)\n", "from IPython.core.display import HTML\n", "\n", "def css_styling():\n", " styles = open(\"../../styles/notebook_custom_style.css\", \"r\").read()\n", " return HTML(styles)\n", "\n", "css_styling()" ] } ], "metadata": { "celltoolbar": "Tags", "hide_code_all_hidden": false, "hide_input": false, "jupytext": { "formats": "ipynb,md" }, "kernelspec": { "display_name": "jabot", "language": "python", "name": "jabot" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.10.9" }, "toc": { "base_numbering": 1, "nav_menu": {}, "number_sections": false, "sideBar": true, "skip_h1_title": false, "title_cell": "Contents", "title_sidebar": "Contents", "toc_cell": false, "toc_position": { "height": "1022px", "left": "35px", "top": "66px", "width": "342.047px" }, "toc_section_display": true, "toc_window_display": true } }, "nbformat": 4, "nbformat_minor": 5 }