{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# RequireJS and d3\n",
    "> ## This is currently quite broken\n",
    "\n",
    "In the Bad Old Days, we loaded our scripts from the internet and we liked it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "CDNJS = \"https://cdnjs.cloudflare.com/ajax/libs/\"\n",
    "req_script = document.createElement \"script\"\n",
    "req_script.src = \"#{CDNJS}require.js/2.3.5/require.min.js\"\n",
    "@document.body.appendChild req_script"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dm = (md) => @display.display \"text/markdown\": md\n",
    "dm \"> _you can print some markdown with `dm`_\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "cdnjs = (name, version) =>\n",
    "    console.log window.document\n",
    "    dm \"_loading `#{name}`..._\"\n",
    "    new Promise (resolve) ->\n",
    "        @requirejs [\"#{CDNJS}#{name}/#{version}\"], \n",
    "            (it) => \n",
    "                console.log name, \"was\", window[name]\n",
    "                dm \"`#{name}` was #{window[name]}!\"\n",
    "                window[name] = it\n",
    "                dm \"`#{name}@#{it.version}` loaded!\"\n",
    "                console.log name, \"now\", it, it.version, window\n",
    "                resolve it\n",
    "dm \"> _you can load some remote assets with `cdnjs`_\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@cdnjs \"d3\", \"4.13.0/d3.min.js\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "svg = d3.select \"body\"\n",
    "    .append \"svg\"\n",
    "    .attr \"width\", \"100%\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "svg = svg.enter()\n",
    "    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "rect = svg\n",
    "    .selectAll \"rect\"\n",
    "    .data [1, 2, 3]\n",
    "    .call (s) -> s.exit().remove()\n",
    "\n",
    "rect.enter()\n",
    "    .append(\"rect\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "color = d3.scale.ordinal().range(d3.schemeCategory10)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "update = (size) =>\n",
    "    rect.transition()\n",
    "        .attr \"x\", (d) => d * (size * 1.5)\n",
    "        .attr \"y\", 10\n",
    "        .attr \"width\", size\n",
    "        .attr \"height\", size\n",
    "        .attr \"fill\", color\n",
    "update 10"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = d3.selectAll \"input\"\n",
    "    .data [\"width\", \"height\"]\n",
    "    .call (s) -> s.exit().remove()\n",
    "\n",
    "slider\n",
    "    .enter()\n",
    "    .insert \"input\", \":first-child\"\n",
    "    .merge slider\n",
    "    .attr \"type\", \"range\"\n",
    "    .on \"input\", (d) -> \n",
    "        rect.interrupt()\n",
    "            .transition()\n",
    "            .attr d, parseFloat d3.event.currentTarget.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "CoffeeScript (unsafe) — Jyve",
   "language": "coffeescript",
   "name": "jyve-kyrnel-coffee-unsafe"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "coffeescript"
   },
   "file_extension": ".coffee",
   "mimetype": "text/coffeescript",
   "name": "coffeescript",
   "nbconvert_exporter": "coffeescript",
   "pygments_lexer": "coffeescript",
   "version": "2.2.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}