CDNJS = "https://cdnjs.cloudflare.com/ajax/libs/"
req_script = document.createElement "script"
req_script.src = "#{CDNJS}require.js/2.3.5/require.min.js"
@document.body.appendChild req_script
dm = (md) => @display.display "text/markdown": md
dm "> _you can print some markdown with `dm`_"
cdnjs = (name, version) =>
console.log window.document
dm "_loading `#{name}`..._"
new Promise (resolve) ->
@requirejs ["#{CDNJS}#{name}/#{version}"],
(it) =>
console.log name, "was", window[name]
dm "`#{name}` was #{window[name]}!"
window[name] = it
dm "`#{name}@#{it.version}` loaded!"
console.log name, "now", it, it.version, window
resolve it
dm "> _you can load some remote assets with `cdnjs`_"
@cdnjs "d3", "4.13.0/d3.min.js"
svg = d3.select "body"
.append "svg"
.attr "width", "100%"
svg = svg.enter()
rect = svg
.selectAll "rect"
.data [1, 2, 3]
.call (s) -> s.exit().remove()
rect.enter()
.append("rect")
color = d3.scale.ordinal().range(d3.schemeCategory10)
update = (size) =>
rect.transition()
.attr "x", (d) => d * (size * 1.5)
.attr "y", 10
.attr "width", size
.attr "height", size
.attr "fill", color
update 10
slider = d3.selectAll "input"
.data ["width", "height"]
.call (s) -> s.exit().remove()
slider
.enter()
.insert "input", ":first-child"
.merge slider
.attr "type", "range"
.on "input", (d) ->
rect.interrupt()
.transition()
.attr d, parseFloat d3.event.currentTarget.value