NB2HTML TEST
This is a test colab publication inspired by nbdev and nbConvert.
- toc: true
- description: this isnt working
- image: images/company_logo.png
- keywords: thisworks
- badges: true
- comments: true
- categories: [test]
- metadata_key1: metadata_value1
- metadata_key2: metadata_value2
Welcome to my test page!
It was made with a colab .ipynb doc and a script I wrote to transform it into an html-page!
It's really cool because I can write html in markdown without a hitch; and it transpiles to html just great.
For example, I'm doing it right in the mid
dle of this sentence within the .ipynb doc, and it renders exactly how i'd like it to within html doc.For proof, check the log on your browser console after clicking this blue text. Then go to my .ipynb and see how I did it!
TODOS
In the ipynb doc
- Inline an html template.
- Inline special templating instructions.
- Markup each doc and cell using html that template/js will use.
At Compiling
- Extract meta data from the header
- Extract template/js from the doc
- Fix up the html output and apply generic optimizations (prefetch, deduplication, caching, etc.)
- Apply template/ metadata/ special js
More Examples? :
- pygal, bokeh, holoviews, plotly, prophet, tensorflow
More Examples
You'll notice that output errors will not show in the html version of the book. text and html can pretty much be placed anywhereObservableHQ
display(HTML("""Click something yellow!
Credit: Colab to WordPress by Baltimore Neighborhood Indicators Association
""") )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); 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 = dd.cumsum() plt.figure(); dd.plot.bar(colormap="Greens"); andrews_curves(data, "Name", colormap="winter"); parallel_coordinates(data, "Name", colormap="gist_rainbow"); df = df.cumsum() plt.figure(); df.plot(colormap="cubehelix");Web Components
Dexplot
How will I save content from dexplot or pyplot etc?
MPLD3
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 dcpy
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
NVD3 python-nvd3
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
Folium / Dataplay
Folium JavascriptLink
Folium Adding Javascript
Folium How to Use Custom Javascript
Folium Custom HTML JS
Folium Click Event
Altair - Vega
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()
Cross-output communication
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
value = output.eval_js("window.localStorage.getItem('localStorageVariable')"); valueThis will execute on start (converted HTML doc) and any time you run the cell (in Colabs):
Python eval_js
Evaluates the Javascript expression within the context of the outputframe of the current cell.
This executes the Javascript as a blocking call from Python and returns the result of the expression.
If the Javascript expression results in a Promise then the call will block until the promise has settled and use the resulting value.
Note: This differs from display.Javascript in that the Javascript expression is not persisted in the notebook document and will not be executed when the document is reloaded.
The Javascript is persisted in the outputs of the notebook document and will be executed when the document is reloaded.
IPython.display.Javascript(''' window.someValue = "hi" ''')What happens here? The last time I executed the following cell: i got : 1626288497132
import IPython from datetime import datetime js_code = ''' document.querySelector("#output-area").appendChild(document.createTextNode( Date.now() )); ''' IPython.display.Javascript(js_code)and then this
Both testval and someValue are undefined in colabs using both %%javascript