iPython/Jupyter Notebook: How to Embed Interactive Graph Using Desmos API? - javascript

I've recently switched from taking notes for my Calculus II course with the pen-and-paper system to using Jupyter (formerly known as iPython) notebooks. What a difference!
Anyway, as someone who learns best through visual presentations, I would really like to embed some interactive Desmos graphs in my notebooks (for anyone who is not familiar with Desmos, it is an incredibly powerful, yet easy-to-use, web-based graphing calculator).
Unfortunately, the iPython/Jupyter notebook security model prevents the execution of JavaScript embedded in Markdown cells. The HTML Sanitization library (Google Caja, I believe) strips any HTML tags and JavaScript code you put into Markdown cells.
According to a note in the security model docs, support for some sort of mechanism for allowing HTML/CSS for notebook theming is planned. But the note makes no mention of JavaScript support.
I realize cross-site scripting is a serious problem and one that is difficult to defend against, but is there really no means to loosen the security constraints for notebook authors? Perhaps in the future it might be possible to add a configuration option to the notebook metadata (which can be edited from within a notebook session) to specify a list of allowable tags.
In the meantime, does anyone know of a work-around, hack, or other method for embedding output from a third-party API using JavaScript in Markdown cells within a notebook?
If one were to print the appropriate HTML and JavaScript code using Python within a Python cell, would that avoid these restrictions? Maybe I should write a Python wrapper for the Desmos API...

You can always use an interact from IPython widgets
from IPython.html.widgets import *
import numpy as np
import matplotlib.pyplot as plt
import math
def linear(w,x,b):
return w*x + b
def logistic(z):
return 1/(1+math.e**(-z))
def plt_logistic(a, b):
x = np.linspace(-20,20, 100)
h = linear(a,x,b)
y = logistic(h)
plt.ylim(-5,5)
plt.xlim(-5,5)
plt.plot(x,h)
plt.plot(x,y)
plt.grid()
plt.show()
interact(plt_logistic, a = (-10,10,0.1), b = (-10,10,0.1))

Here is how to embed Desmos in Jupyter using jp_proxy widgets:
Please see https://github.com/AaronWatters/jp_proxy_widget
-- this code is based on the quick start example: https://www.desmos.com/api/v1.2/docs/index.html

I think there are several ways to make it
use iframe
use raw html display, which may need you write
some wrapper first to make it reuseable
use some 3-party lib: mpld3, plot.js, here is a list
use some other type 3-party lib: IPython-Dashboard

Related

tensorflowjs - Is there an equivalent method for tokenizer in javascript?

I'm building an NLP classifier in python and would like to build a hosting HTML page for a demo. I want to test on a sample text to see the prediction and this is implemented in python through tokenizing the text and then padding it before predicting. Like this:
tf.tokenizer.texts_to_sequences(text)
token_list = tf.tokenizer.texts_to_sequences([text])[0]
token_list_padded = pad_sequences([token_list], maxlen=max_length, padding=padding_type)
The problem is that I'm new to javascript, so is there tokenization and padding methods in javascript like in python?
There is not yet a tf.tokenizer in js as there is in python.
A simple js.tokenizer has been described here. A more robust approach would be to use the tokenizer that comes with universal sentence encoder
There is no native mechanism for tokenization in Javascript.
You can use a Javascript library such as natural or wink-tokenizer or wink-nlp. The last library automatically extracts a number of token's features that may be useful in training.

dataformat for multiple lines in bokehjs

I am using just the BokehJS part of Bokeh since i am building a more production oriented system.
Unfortunately it seems that the actual BokehJS part of Bokeh is not documented that much, which makes it difficult to find the needed information, such as how to format data for the bokehJS object.
What I am trying to do is to make a simple line graph, however instead of having just one line i would like to have multiple lines, and the possibility of making a legend describing each line. Its a very basica plot, however i did not find any way to do this in bokehJS.
In order to make a plot with a single line i execute the following javascript:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot({type:'line'}, {x:[1,2],y:[4,5]}, {})
,'.mydivcontainer');
How do i alter this so that i can have 5 lines in the same plot as well as a legend, basically similar to this which is written in standard bokeh:
from collections import OrderedDict
import pandas as pd
AAPL = pd.read_csv("aapl.csv", parse_dates=["Date"])
MSFT = pd.read_csv( "msft.csv", parse_dates=["Date"])
IBM = pd.read_csv( "ibm.csv", parse_dates=["Date"])
xyvalues = OrderedDict(
AAPL = AAPL[("Date", "Adj Close")],
MSFT = MSFT[("Date", "Adj Close")],
IBM = IBM[("Date", "Adj Close")],
)
df = pd.concat(xyvalues, axis=1, names=["l0", "l1"])
from bokeh.charts import TimeSeries
ts = TimeSeries(
df, title="timeseries, pd_input",
filename="stocks_timeseries.html")
ts.legend("top_left").show()
(Taken from the release note: http://continuum.io/blog/bokeh-0.6 )
Thank you very much in advance for your help
it's definitely true that the developing and documenting the JS interface has lagged behind the other interfaces (python mostly, but also scala and Julia and soon R). We plan to improve this, but as you can imagine there are lots of competing priorities.
But I will mention another option, in case it is useful to you. It is possible to create the plot JS from python, and then use the JS directly. That is you only use python to set things up, then you can throw the python away. You can use functions in bokeh.embed to turn your python plot object graph into JS that you can embed however you like.
With more recent version of Bokeh, you can also easily grab ahold of the plot objects (for instance data sources) to update the plot directly from JS. See, for instance:
https://github.com/bokeh/bokeh/blob/master/examples/embed/spectrogram/spectrogram.coffee#L187
ahhh now i have seemed to figure this one out.
To enable multiple lines, it seems i can do like this:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot([{type:'line'},{type:'line'}], [{x:[1,2],y:[4,5]},{x:[1,4],y:[2,5]}], {})
,'.mydivcontainer');
Great :)

Get access to Stackoverflow's auto-suggest tagging system?

Is there anyway to get access to stackoverflow's awesome tagging system? I would like to borrow Stack's awesome auto-suggest and tag mini-explanation boxes for my own site. Obviously, I can use the jQuery UI auto-suggest for tags but I would really like to also include the cool little tag descriptions as well. If not, can someone tell me where all these explanation/descriptions came from so that I can implement a similar system?
tageditornew.js
Line 308:
$.get("/filter/tags", {q: a,newstyle: !0}, "json").done(function(c) {
C["t_" + a] = c;
StackExchange.helpers.removeSpinner();
b(c)
})
This might help you out!
It turns out that,
the API url is this:
https://stackoverflow.com/filter/tags?q=STRING&newstyle=BOOLEAN
q - Query text.
newstyle - Require new style or not. Result in new style will be returned in JSON with additional information such as synonyms and excerpt.
DEMO: http://jsfiddle.net/DerekL/bXXb7/ (with Cross Domain Requests jQuery plguin)
For example:
https://stackoverflow.com/filter/tags?q=htm
would give you:
"html|99829\nhtml5|16359\nxhtml|4143\nhtml-parsing|1461\nhtml-lists|1328\nhtml5-video|949"
where 99829 is the amount of questions. It took me 15 minutes looking at the source code to find out this api. -_-"
Putting in javascript in new style gives you this: here
[{"Name":"javascript","Synonyms":"classic-javascript|javascript-execution","Count":223223,"Excerpt":"JavaScript is a dynamic language commonly used for scripting in web browsers. It is NOT the same as Java. Use this tag for questions regarding ECMAScript and its dialects/implementations (excluding ActionScript and JScript). If a framework or library, such as jQuery, is used, include that tag as well. Questions that don't include a framework/library tag, such as jQuery, implies that the question requires a pure JavaScript answer."},{"Name":"javascript-events","Synonyms":"javascript-event","Count":5707,"Excerpt":"Creating and handling JavaScript events inline in HTML or through a script."},{"Name":"facebook-javascript-sdk","Synonyms":"","Count":992,"Excerpt":"Facebook's JavaScript SDK provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, and Dialogs."},{"Name":"javascript-library","Synonyms":"","Count":675,"Excerpt":"A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"javascript-framework","Synonyms":"","Count":563,"Excerpt":"A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"unobtrusive-javascript","Synonyms":"","Count":340,"Excerpt":"Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages."}]
What you can get from there:
All tags start with javascript
Synonyms
Tag counts
Nice tag descriptions
If you're looking for high-level logic, in a nutshell it's just a custom auto-complete that's blazing-fast.
Whenever you type a tag (i.e. a new word or one separated by a space from previous tags), an AJAX request would be made to the server with a JSON object which is then interpreted by the client-side script and presented in the usable layout.
Comparing the autocomplete JSON objects for letter "h" and word "html" should give you enough insight into how this particular implementation works (if prompted, these can be opened with any text editor).
On a somewhat unrelated note: the autocomplete responses have to be fast. Depending on the complexity of the data autocomplete is run against, you may find how IMDb magic search works intriguing.
Update:
Seeing your comment about accessing the content of the tag library, this may in fact be more of a meta question. I struggle to think of a scenario where using an API if any or just the tag library from an external resource would be beneficial to SO - however content here is provided under Creative Commons so you may be able to use it with proper attribution. This does not constitute legal advice :)

Can JQuery or JavaScript be used to manipulate XML/DOM without a browser?

I am starting to study some web technologies to integrate content, markup, layout, styling and behaviors of stuff for personal use (NOT web developing for now) and am amazed with the power of JQuery selectors and functions.
I have heard that there are some ways to use javascript "outside" a browser, to do some DOM selection, manipulation, etc. I wonder if JQuery could be used that way too.
So, what I would like to do is:
Using some programming/scripting language (I use Python), access a XML file and parse its DOM;
Programmatically manipulate and modify the DOM with javascript/jquery selectors and functions;
Save the results to (possibly another) XML file.
If you like jQuery syntax, check out pyQuery:
from pyquery import PyQuery
_ = PyQuery('<body><p></p></body>')
_("p").text("hello").css({'color': 'red'})
print _.html()
>>> <p style="color: red">hello</p>
yeah, you just need a Javascript run time.
Check out node.js
What you're looking for is called a "headless" browser.
This SO post may help:
Real headless browser
Basically you need a javascript interpreter (ex: V8) + wrapper for your language of choice (ex: pyv8). Then you can do this (from pyv8 page):
import PyV8
ctxt = PyV8.JSContext()
ctxt.enter()
ctxt.eval("1+2") # 1+2 is a javascript code

How to parse html that includes javascript code

How does one parse html documents which make heavy use of javascript? I know there are a few libraries in python which can parse static xml/html files and I'm basically looking for a programme or library (or even firefox plugin) which reads html+javascript, executes the javascript bit and outputs html code without javascript so it would look identical if displayed in a browser.
As a simple example
link
should be replaced by the appropriate value the javascript function returns, e.g.
link
A more complex example would be a saved facebook html page which is littered with loads of javascript code.
Probably related to
How to "execute" HTML+Javascript page with Node.js
but do I really need Node.js and JSDOM? Also slightly related is
Python library for rendering HTML and javascript
but I'm not interested in rendering just the pure html output.
You can use Selenium with python as detailed here
Example:
import xmlrpclib
# Make an object to represent the XML-RPC server.
server_url = "http://localhost:8080/selenium-driver/RPC2"
app = xmlrpclib.ServerProxy(server_url)
# Bump timeout a little higher than the default 5 seconds
app.setTimeout(15)
import os
os.system('start run_firefox.bat')
print app.open('http://localhost:8080/AUT/000000A/http/www.amazon.com/')
print app.verifyTitle('Amazon.com: Welcome')
print app.verifySelected('url', 'All Products')
print app.select('url', 'Books')
print app.verifySelected('url', 'Books')
print app.verifyValue('field-keywords', '')
print app.type('field-keywords', 'Python Cookbook')
print app.clickAndWait('Go')
print app.verifyTitle('Amazon.com: Books Search Results: Python Cookbook')
print app.verifyTextPresent('Python Cookbook', '')
print app.verifyTextPresent('Alex Martellibot, David Ascher', '')
print app.testComplete()
From Mozilla Gecko FAQ:
Q. Can you invoke the Gecko engine from a Unix shell script? Could you send it HTML and get back a web page that might be sent to the printer?
A. Not really supported; you can probably get something close to what you want by writing your own application using Gecko's embedding APIs, though. Note that it's currently not possible to print without a widget on the screen to render to.
Embedding Gecko in a program that outputs what you want may be way too heavy, but at least your output will be as good as it gets.
PhantomJS can be loaded using Selenium
$ ipython
In [1]: from selenium import webdriver
In [2]: browser=webdriver.PhantomJS()
In [3]: browser.get('http://seleniumhq.org/')
In [4]: browser.title
Out[4]: u'Selenium - Web Browser Automation'

Categories