d3/drag1 .org source

#+title: d3 draggable object example #1 -- standalone
#
# org-publish options
# H:2   controls section numbering.
#       number top-level and second-level headings only
# ^:{}  require a_{b} before assuming that b should be subscripted.
#       without this option a_b will automatically subscript b.
#+options: ^:{}
#
# options used exclusively by emacs
#+startup: showall
#
# options used exclusively by the html exporter
#+language: en
#+infojs_opt: view:showall toc:nil ltoc:nil mouse:#ffc0c0 path:/web/ext/orginfo/org-info.js
#+html_head: <link rel="stylesheet" type="text/css" href="/web/css/notebook.css" />
#+html_link_home: ../../index.html
#+html_link_up: ../../index.html
#

* Introduction
  Creating a draggable object in d3.
  Followed guide originally here (sadly now-broken link):
  http://ssun.azurewebsites.net/creating-a-draggable-object-in-d3

  - ~.org~ source for this file is here: file:index-src.org

* Try it here
  - [[http:drag-example.html]]

* Prerequisites
  1. A directory tree ~$HTTP_ROOT~ that you can visit in a browser or serve via http.
     I'm using ~$HOME/proj/public_html/org-howto~, for example

  2. Mike Bostock's ~d3~ installed in ~$HTTP_ROOT/ext/d3~:

     #+begin_src sh :results output :exports both
     ls -l $HOME/proj/public_html/org-howto/ext/d3
     #+end_src

     #+RESULTS:
     : total 336
     : -rw-rw-r-- 1 roland roland 151725 Mar 12 00:06 d3.v3.min.js

  3. Optionally,  a webserver making ~$HTTP_ROOT~ available over http,
     for example:
     #+begin_example
     cd $HOME/Dropbox/public_html
     python -m SimpleHTTPServer 8080
     #+end_example

  When this is in place,
  we should be able to bring up ~d3.js~ in a browser here: http:/ext/d3/d3.js

* Procedure
** Create skeleton html file
   This is the file browser will load to deliver our example.
   Create ~drag-example.html~.
#+include: "drag-example.html" example

** Create javascript file drag-example.js
   Create ~drag-example.js~.
   This is where our ~d3~ code lives.
#+include: "drag-example.js" example