{html0, __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'}