Home Labs Nb 2 Html Tests 211 Web Scraper Scooter Exploration Meetup Wordclouds Apis Looking At Data Satellltes Naomi Nlp Nomi

Don't Look! I'm changing!

URL Copied

 Welcome To My Test Page!
  Built In'S
   Display Javascript
   Display Html & Py Templating
  Folium / Dataplay
  DC.Js Dcpy
  Altair - Vega
  NVD3 Python-Nvd3
  Networkx - Plotly
  Google Colabs

Welcome to my test page!

BinderBinderBinderOpen Source Love svg3
NPM LicenseActiveGitHub last commit

GitHub starsGitHub watchersGitHub forksGitHub followers
TweetTwitter Follow

It was made with a colab .ipynb doc and a script I wrote to transform it into an html-page! Inspired by nbdev and nbConvert

Sample Image

ipynb's are webpage templates. Literally!

When you run a Jupyter notebook, the environment essentially serves a web page which you proceed to work from. Ipynb's are really just a JSON object's. The cells you see and their outputs are all interactive HTML elements rendered from the ipynb json. When you execute python code in a python cell, the code is sent to a server which runs it and sends back the result; its the javascript that's being ran natively, go figure!

In such a manner, it is a little like working in PHP! I can write backend code and test the results directly in my notebook and, outside some styling differences, it translates rather well into my website.

This way, you no longer need to pass the dataset to create Multiple Visualizations.

Click a shape!

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.

Authors inline special templating instructions and html into their ipynb doc that the template/js will use.

Click a shape!

nb2jsonnb2jsonread_nbread_nbnb2json->read_nb0. Converts IPYNB to HTMLget_metadataget_metadataread_nb->get_metadata1a. Strips out MetaDataconvertNbconvertNbread_nb->convertNb1b. Converts the remainder to HTMLcleanCellcleanCellconvertNb->cleanCell2. Handles component in the same waymarkdownmarkdowncleanCell->markdown3a. ConvertprocessCodeprocessCodecleanCell->processCode3b. ProcessgetFlagsgetFlagsprocessCode->getFlags4a. Processing InstructionsprocessSourceprocessSourceprocessCode->processSource4b.processOutputprocessOutputprocessCode->processOutput4c.getFlags->processSourcegetFlags->processOutputmakeDetailsmakeDetailsprocessSource->makeDetailsprocessOutput->makeDetails


Missing: pygal, bokeh, holoviews, plotly, prophet, tensorflow, web components

Built In's

This is a footnote.

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!

Click to toggle
print("#hide_output #collapse_input_open")

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 undefined to execute immidiately in the browser; Just make sure to run the cell.


Display Javascript

Using this method Javascript is persisted in the outputs of the cell and will be executed when the document is reloaded.

This text should be overwritten to show displaySetValue from above
This text should be overwritten to show jsFlagSetValue from above
This text should be overwritten to show displaySetValue from above

Information obtained from: Advanced Outputs

Display Html & Py Templating

import requests

resp = requests.get('https://charleskarpati.com')

from IPython.core.display import display, HTML display(HTML(resp.content.decode('utf-8')[:-4]))

Heres an example:





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


You've seen them with the diagrams at the intro!






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


Altair - Vega


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


networkx - Plotly

Network Graphs


How will I save content from dexplot or pyplot etc?

Google Colabs

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

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