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! Inspired by nbdev and nbConvert
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!
Authors inline special templating instructions and html into their ipynb doc that the template/js will use.
Click a shape!
Examples
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.
Ipython
Display Javascript
Using this method Javascript is persisted in the outputs of the cell and will be executed when the document is reloaded.
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
Folium JavascriptLink
Folium Adding Javascript
Folium How to Use Custom Javascript
Folium Custom HTML JS
Folium Click Event
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
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()
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
Dexplot
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):