Charles Karpati | NB2HTML TEST

 This text was written in a code block and will return an error if ran.
 Fortunately, output errors are removed during conversion to html.

print("#hide_output #collapse_input_open")

text and html can pretty much be placed anywhere. Just take note of the Notes above as it'll list special handling instructions.

When you use %%javascript to run JavaScript code in a Jupyter notebook, the code isn't isolated. It's executed in the context of the notebook's web page. This means that variables or functions you define will be added to the global scope and are thus accessible to subsequent cells.

line break!

Use %%javascript to execute immidiately in the browser; Just make sure to run the cell.

from IPython.core.display import display, Javascript

def js_to_python(js_var_name, py_var_name):
     display(Javascript(f"""
         var js_val = {js_var_name};
         IPython.notebook.kernel.execute(`{py_var_name} = '""' + js_val + '""'`);
     """))
 
 # Now, you can use the above function to pass the data
 js_script = """
 var myData = {name: "John", age: 30, city: "New York"};
 """
 display(Javascript(js_script))
 js_to_python("myData", "pythonData")

print('hello')

display(Javascript("""
 document.body.style.backgroundColor = '';
 """))

display(Javascript("""
         var currentScriptTag = document.currentScript;
         console.log(currentScriptTag);
         var parentOfScriptTag = currentScriptTag.parentElement;
         console.log(parentOfScriptTag);
 """))

vega-embed

embed

hello-vega-embed

1. Folium JavascriptLink

2. Folium Adding Javascript

3. Folium How to Use Custom Javascript

4. Folium Custom HTML JS

5. Folium Click Event

%%capture
 !pip install geopandas
 !pip install dataplay
 !pip install dexplot

import dataplay
 help(dataplay)

# https://pypi.org/project/observable-jupyter/
 from observable_jupyter import embed

pivottablejs

The mpld3 project brings together Matplotlib, the popular Python-based graphing library, and D3js, the popular JavaScript library for creating interactive data visualizations for the web. The result is a simple API for exporting your matplotlib graphics to HTML code which can be used within the browser, within standard web pages, blogs, or tools such as the IPython notebook.

dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo)

It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive

https://github.com/washim/dcpy/blob/master/dcpy/widget.py

from dcpy import widget
 import pandas as pd

df = pd.DataFrame({"book":["A","B","C","D","E","F","G","H","I","J","K"],"scores":[45,34,54,27,70,25,92,22,40,10,40]})
 data = df.to_json(orient="records")

crossfilter = ["var bookDimension=ndx.dimension(function(d){return d.book;});",
                "var bookscoresGroup=bookDimension.group().reduceSum(function(d){return d.scores;});",
                "var coreCount=ndx.dimension(function(d){\
                    if (d.scores > 80*0.5) {\
                        return 'High';\
                    }\
                    else{\
                        return 'Low';\
                    }\
                });",
                "var coreCountGroup=coreCount.group();",
                "var all = ndx.groupAll();"]
 
 barchartoptions = ["xAxisLabel('book_id')",
                    "yAxisLabel('score')",
                    "width(320)",
                    "height(320)",
                    "x(d3.scale.ordinal())",
                    "xUnits(dc.units.ordinal)",
                    "dimension(bookDimension)",
                    "group(bookscoresGroup)",
                    "colors(['orange'])"]
 
 piechartoptions = ["width(320)",
                    "height(320)",
                    "radius(120)",
                    "innerRadius(40)",
                    "dimension(coreCount)",
                    "group(coreCountGroup)",
                    "label(function(d){\
                        var label = d.key;\
                        if(all.value()){\
                            label += '(' + Math.floor(d.value/all.value()*100)+'%)';\
                        }\
                        return label;\
                    })"]

• Altair provides a Python API for generating validated Vega-Lite specifications

• Altair is fundamentally about constructing chart specifications, the central functionality of any chart object are the to_dict() and to_json()

test123

This isn't interactive

python-nvd3 homepage and docs

NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js offers you.

This will output the following HTML to render a live chart. The HTML could be stored into a HTML file, used in a Web application

from nvd3 import pieChart
 type = 'pieChart'
 chart = pieChart(name=type, color_category='category20c', height=450, width=450)
 xdata = ["Orange", "Banana", "Pear", "Kiwi", "Apple", "Strawberry", "Pineapple"]
 ydata = [3, 4, 0, 1, 5, 7, 3]
 extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}}
 chart.add_serie(y=ydata, x=xdata, extra=extra_serie)
 # chart.buildcontent()
 chart.buildhtml()
 chart_html = chart.htmlcontent
 display(HTML(chart_html))

No script here!

1. Bokeh Developing with JavaScript

2. Bokeh Callbacks

3. Bokeh Exporting Plots

4. Bokeh Embed

# https://pandas.pydata.org/pandas-docs/stable/user_guide/visualization.html#plotting-directly-with-matplotlib
 # Series and DataFrame objects behave like arrays and can therefore be passed directly to matplotlib functions without explicit casts.
 import pandas as pd
 import matplotlib.pyplot as plt
 import numpy as np
 price = pd.Series( np.random.randn(150).cumsum(), index=pd.date_range("2000-1-1", periods=150, freq="B") )
 ma = price.rolling(20).mean()
 mstd = price.rolling(20).std()
 plt.figure();
 plt.plot(price.index, price, "k");
 plt.plot(ma.index, ma, "b");
 plt.fill_between(mstd.index, ma - 2 * mstd, ma + 2 * mstd, color="b", alpha=0.2);

from pandas.plotting import table
 
 fig, ax = plt.subplots(1, 1)
 table(ax, np.round(df.describe(), 2), loc="upper right", colWidths=[0.2, 0.2, 0.2]);
 df.plot(ax=ax, ylim=(0, 2), legend=None);

dd = pd.DataFrame(np.random.randn(10, 10)).applymap(abs)
 dd = dd.cumsum()
 plt.figure();
 dd.plot.bar(colormap="Greens");

plt.figure();
 andrews_curves(data, "Name", colormap="winter");

plt.figure();
 parallel_coordinates(data, "Name", colormap="gist_rainbow");

df = pd.DataFrame(np.random.randn(1000, 10), index=ts.index)
 df = df.cumsum()
 plt.figure();
 df.plot(colormap="cubehelix");

networkx - Plotly

Network Graphs

import plotly.graph_objects as go
 import networkx as nx
 G = nx.random_geometric_graph(200, 0.125)

edge_x = []
 edge_y = []
 for edge in G.edges():
     x0, y0 = G.nodes[edge[0]]['pos']
     x1, y1 = G.nodes[edge[1]]['pos']
     edge_x.append(x0)
     edge_x.append(x1)
     edge_x.append(None)
     edge_y.append(y0)
     edge_y.append(y1)
     edge_y.append(None)
 
 edge_trace = go.Scatter(
     x=edge_x, y=edge_y,
     line=dict(width=0.5, color='#888'),
     hoverinfo='none',
     mode='lines')
 
 node_x = []
 node_y = []
 for node in G.nodes():
     x, y = G.nodes[node]['pos']
     node_x.append(x)
     node_y.append(y)
 
 node_trace = go.Scatter(
     x=node_x, y=node_y,
     mode='markers',
     hoverinfo='text',
     marker=dict(
         showscale=True,
         # colorscale options
         #'Greys' | 'YlGnBu' | 'Greens' | 'YlOrRd' | 'Bluered' | 'RdBu' |
         #'Reds' | 'Blues' | 'Picnic' | 'Rainbow' | 'Portland' | 'Jet' |
         #'Hot' | 'Blackbody' | 'Earth' | 'Electric' | 'Viridis' |
         colorscale='YlGnBu',
         reversescale=True,
         color=[],
         size=10,
         colorbar=dict(
             thickness=15,
             title='Node Connections',
             xanchor='left',
             titleside='right'
         ),
         line_width=2))

node_adjacencies = []
 node_text = []
 for node, adjacencies in enumerate(G.adjacency()):
     node_adjacencies.append(len(adjacencies[1]))
     node_text.append('# of connections: '+str(len(adjacencies[1])))
 
 node_trace.marker.color = node_adjacencies
 node_trace.text = node_text

How will I save content from dexplot or pyplot etc?

%%capture
 ! pip install dexplot

The output of each cell (while in colabs) is hosted in a separate sandboxed iframe without direct access to the contents of other cells, but they can create BroadcastChannels to communicate between cells on the same page.

This will execute and trigger in realtime in the converted HTML doc:

This will not run on start

from google.colab import output
 value = output.eval_js("window.localStorage.getItem('localStorageVariable')");
 value

This will execute on start (converted HTML doc) and any time you run the cell (in Colabs):