org-howto/d3/drag1/index.org

d3 draggable object example #1 – standalone

• Introduction
• Try it here
• Prerequisites
• Procedure
  • Create skeleton html file
  • Create javascript file drag-example.js

#

#

#

#

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:

   ls -l $HOME/proj/public_html/org-howto/ext/d3

   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:

   cd $HOME/Dropbox/public_html
   python -m SimpleHTTPServer 8080
   

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.

Create javascript file drag-example.js

Create drag-example.js. This is where our d3 code lives.