RequireJS and d3

This is currently quite broken

In the Bad Old Days, we loaded our scripts from the internet and we liked it.

In [ ]:
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
In [ ]:
dm = (md) => @display.display "text/markdown": md
dm "> _you can print some markdown with `dm`_"
In [ ]:
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`_"
In [ ]:
@cdnjs "d3", "4.13.0/d3.min.js"
In [ ]:
svg = d3.select "body"
    .append "svg"
    .attr "width", "100%"
In [ ]:
svg = svg.enter()
In [ ]:
rect = svg
    .selectAll "rect"
    .data [1, 2, 3]
    .call (s) -> s.exit().remove()

rect.enter()
    .append("rect")
In [ ]:
color = d3.scale.ordinal().range(d3.schemeCategory10)
In [ ]:
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
In [ ]:
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
In [ ]: