Published
Edited
Apr 5, 2019
2 stars
Insert cell
Insert cell
brython = require('brython').catch(() => window.brython)
//or brython = require('brython@3.7.1/brython.js').catch(() => window.brython)
Insert cell
__BRYTHON__ = {
brython;
return window.__BRYTHON__;
}
Insert cell
// https://github.com/brython-dev/brython/issues/1055#issuecomment-472862271
function runBrython(code) {
// https://talk.observablehq.com/t/execute-code-in-non-strict-mode/1728
return (1,eval)(__BRYTHON__.python_to_js(code));
}
Insert cell
div = {
const div = html`<p>Your name is : <input id="zone" autocomplete="off" value="Test 0">
<button id="test">click !</button> <span id="echo2"><span>
`;
return div;
}
Insert cell
{
// wait for div cell to be evaluated
div;
// python code won't work until the referenced elements are appended to the DOM
runBrython(`print('\\n PRINT: ok') # '\\n - inside html cell
print('\\n __BRYTHON__.__MAGIC__ ',__BRYTHON__.__MAGIC__,'\\n------\\n')
from browser import document #, alert() - doesn't work - unimportant.

def echo(ev):
s = document["zone"].value
document["echo2"].text = f'Hello {s} !'
print(f'Hello {s} !')

document["test"].unbind("click") # unbind other click events so re-evaluating this cell will be OK
document["test"].bind("click", echo)`);
}
Insert cell
// Here's another Brython cell
// check your console!
runBrython('x=5; print(x)')
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more