31:T6eb,{html0, __BRYTHON__ //wait for html0 and __BRYTHON__ py` from browser import window, document print('\n Brython', window.__BRYTHON__.__MAGIC__) d3 = window.d3 svg = d3.select("#graph0") svg\ .attr("width", 340)\ .attr("height", 300)\ .style("border","1px dotted black")\ btn1 = document['upd1'] btn2 = document['upd2'] btn0 = document['res0'] inp0 = document['inp0'] btn1.title='move cx' colors2 = ['DarkBlue','Aqua'] btn2.title=', '.join(colors2) inp0.value=', '.join(['blue','red','yellow']) circles = svg.select("g.circlesGroup") if (circles.empty()): circles = svg.append("g") circles.classed("circlesGroup", True); def init(ev): inp = inp0.value btn0.title = inp + ' - centered' colorsN = inp.split(',') n = len(colorsN) circles.selectAll("circle")\ .data(colorsN)\ .join("circle")\ .attr("stroke", "fuchsia")\ .attr("stroke-width", 2.5)\ .attr("fill",lambda d, *_: d)\ .attr("r", lambda d, i, *_: (n-i)*20)\ .attr("cx", 170)\ .attr("cy", 150)\ init(None) #update data (and auto-rearrange svg) def update1(ev): circles.selectAll("circle")\ .attr("cx", lambda d, i, *_:(170-i*25))\ def update2(ev): #reduce numb. of circles circles.selectAll("circle")\ .data(colors2)\ .join("circle")\ .attr("fill",lambda d, *_: d)\ def inputEnterKey(ev): if (ev.keyCode == 13): ev.preventDefault() if (ev.type == "keydown"): init(ev) def rebind(elt, evt_name, handler): if elt.events(evt_name): elt.unbind(evt_name) #? or elt.unbind(evt_name, handler) elt.bind(evt_name, handler) rebind(btn1, "click", update1) rebind(btn2, "click", update2) rebind(btn0, "click", init) rebind(inp0,"keydown",inputEnterKey) rebind(inp0, "keyup", inputEnterKey) print('.')`; return 'd3 in python code'}32:[] 2f:{"title":"brython & d3 & observablehq test","cells":[{"id":0,"value":"md`# brython & d3 & observablehq test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`\nSee\n* https://talk.observablehq.com/t/brython-observablehq/1832/\n* https://observablehq.com/@andrzejq/brython-tag-in-observable\n\nI am not an experienced user of observablehq – any suggestions are welcome.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"d3_brython = {\n window.d3 = await require('d3@5');\n return require('brython').catch(() => window.brython)\n //or require('brython@3.7.1/brython.js').catch(() => window.brython)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"__BRYTHON__ = {\n d3_brython;\n return window.__BRYTHON__;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"// Tagged template literals - DO NOT USE ${ INSIDE brythonSrc\n// https://github.com/brython-dev/brython/issues/1055#issuecomment-472862271\n// runBrython(code) from Bryan Gin-ge Chen https://observablehq.com/d/9264b6145e1b1e1c\n//Optional python source (libPyStr) can be added at the beginning in another tagged template literals (not used here)\nfunction py(brythonSrc, libPyStr){ //ex. brythonSrc = Array [ \"x=5\\nprint(f'x=\\n{x}')\\n\" ]\n var raw = (libPyStr ? libPyStr+'\\n' : '')\n + brythonSrc.raw.join('') //x=5\n //print(f'x=\\n{x}')\n //\n // https://talk.observablehq.com/t/execute-code-in-non-strict-mode/1728\n // https://observablehq.com/@mootari/tracking-and-displaying-errors\n try {\n var br_js = (1,eval)(__BRYTHON__.python_to_js(raw))\n } catch(err) {\n err.message = err.args //err.message is used to show err. inf. in observable\n console.error(err.message)\n throw err\n } \n return br_js \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"html0 = {return html`\n\n

\n\n\n\n\n

\n`}","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`see also: https://observablehq.com/@andrzejq/brython-tag-in-observable`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}