Home 00 Datalabs 01 Scooter Explorati... 02 211 Web Scraper 03 Nbdev Create Clea... 04 Wordclouds 05 Amivi Meetup 06 Courts Mechanical... 07 Nb 2 Html Tests08 Apis 09 Looking At Data

Don't Look! I'm changing!

URL Copied

Musical loops

resp = requests.get('https://bniajfi.org/wp-json/wp/v2/header') from IPython.core.display import display, HTML display(HTML(resp.content.decode('utf-8')))


This is a test colab publication inspired by nbdev and nbConvert.

BinderBinderBinderOpen Source Love svg3

NPM LicenseActiveGitHub last commit

GitHub starsGitHub watchersGitHub forksGitHub followers

TweetTwitter Follow

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!


More Examples? :

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 anywhere



Click something yellow!

UserUserColabColabUser->Colab0. Start: Create website using Colab and ObservableNBDevHTMLNBDevHTMLColab->NBDevHTML1. Process the IPYNB to HTMLWebsite/blogpostsWebsite/blogpostsNBDevHTML->Website/blogpostsOutput w date & flags in fileheader.contentItemcontentItemWebsite/blogposts->contentItemsorts by date and displays in recent & featured articles.

Credit: Colab to WordPress by Baltimore Neighborhood Indicators Association

""") )


# 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


How will I save content from dexplot or pyplot etc?


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.

networkx - Plotly

Network Graphs

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

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


No script here!

  1. Bokeh Developing with JavaScript

  2. Bokeh Callbacks

  3. Bokeh Exporting Plots

  4. Bokeh Embed

Folium / Dataplay

  1. Folium JavascriptLink

  2. Folium Adding Javascript

  3. Folium How to Use Custom Javascript

  4. Folium Custom HTML JS

  5. Folium Click Event

import dataplay help(dataplay)

Altair - Vega








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')"); value

This 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

js_code = '''document.querySelector("#output-area").appendChild(document.createTextNode( window.testval ));''' js_code = '''document.querySelector("#output-area").appendChild(document.createTextNode( window.someVal ));''' IPython.display.Javascript(js_code)




resp = requests.get('https://bniajfi.org/wp-json/wp/v2/footer') from IPython.core.display import display, HTML display(HTML(resp.content.decode('utf-8')[:-4]))