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 middle 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!
In the ipynb doc
- Inline an html template.
- Inline special templating instructions.
- Markup each doc and cell using html that template/js will use.
- 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 ExamplesYou'll notice that output errors will not show in the html version of the book. text and html can pretty much be placed anywhere
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");
How will I save content from dexplot or pyplot etc?
networkx - Plotly
It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive
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
No script here!
Bokeh Exporting Plots
Folium / Dataplay
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()
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 startvalue = 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):
Note: This differs from
and then this
Both testval and someValue are undefined in colabs using both