d3 v4 scatter plot with mithril.js (sibilant js)

example.sib

;; based on http://jsfiddle.net/ramnathv/kmkL2gvr/6/
;; assumes d3.js, d3-scale.js, d3-selection-multi.js included in html with <div id="container"></div>
(scoped
 (var
  data [ {x: 0.1 y: 0.1}
         {x: 0.2 y: 0.2}
         {x: 0.4 y: 0.3}
         {x: 0.6 y: 0.4} ]
  Chart { controller: (#(args)
                        { draw: (#(el isinit context)
                                  (|> (d3.select el)
                                      (.datum args.data)
                                      ((#(selection)
                                         (var self this)
                                         (selection.each
                                          (#(data)
                                            (var plot (|> (d3.select el)
                                                          (.selectAll "circle")
                                                          (.data data)))
                                            (|> plot
                                                (.enter)
                                                (.append "circle")
                                                (.attrs { cy: (#(d)
                                                                (* 200 d.y))
                                                          cx: (#(d)
                                                                (* 200 d.x))
                                                          fill: (#(d i) (get d3.schemeCategory20c (mod i d3.schemeCategory20.length)))
                                                          opacity: 0.5
                                                          stroke: "black"
                                                          r: 10
                                                          }))
                                            (|> plot
                                                (.exit)
                                                (.remove))))
                                         selection)
                                       
                                       ))
                                  )

                          })
          view: (#(ctrl args)
                  (m "svg" { width: 500 height: 500}
                     (m "g" { config: ctrl.draw
                              })))}
  kPanel { view: (#(c args)
                   (m ".chart-wrapper"
                      [ (m ".chart-stage" args.stage)
                        (m ".chart-notes" args.notes)
                        ])
                   )}
  Button { view: (#(c args)
                   (m "div.btn-group[role='group']"
                      [ (m "div"
                           [ (m "code"
                                (+ "" (get (args.data) "length")))
                             " elements"
                             ])
                        (m "button.btn.btn-sm.btn-success"
                          { onclick: (#>
                                       (.push (args.data)
                                              { x: (Math.random)
                                                y: (Math.random)
                                                })) }
                          "Add")

                        (m "button.btn.btn-sm.btn-danger"
                           { onclick: (#>
                                        (.splice (args.data)
                                                 0 1)) }
                           "remove")
                        ]))
           })
 (var App
      { controller: (#(args)
                      { data: (m.prop data) }
                      )
        view: (#(c args)
                (m.component kPanel
                             { stage: (m.component Chart { data: (c.data) })
                               notes: (m.component Button { data: c.data})
                               }))
        })
 (m.mount (document.querySelector "#container") App)
 )