3.4 KiB
d3 draggable object example #3 – parametric
#
#
#
Introduction
This page uses the same technique as example #2 (file:../drag2/index.org), except we demonstrate parametric dragging along a curve
- source
- org-mode source for this page is here: file:index-src.org
Prerequisites
As for example #1 (file:../drag1/index.org)
Demo
(box appears below if-and-only-if publishing to html)
Procedure
Create javascript file point.js
This file contains convenience subroutines for working with (x,y) coordinates
- pt.scale_pt
- pt.add_pt
- pt.distance_squared
- pt.find_closest
Create javascript file fx.js
This contains some utility procedures for working with functions of one variable
Create javascript file fx_view.js
This file contains subroutines for managing svg elements (as d3 selections) that display a function f(x)
Create javascript file parametric-drag-example.js:
This program:
- draws the cubic polynomial $f(x) = x^2(x - 0.6)$
- draws a draggable filled circle that's constrained to coordinates $(x,f(x))$
Load .js files in html header
Tell org-mode's html generator to load d3 and parametric-drag-example.js
when it generates this page's html <head> element.
We did the same thing in example #2.
At the top of the .org file:
#+html_head: <script type="text/javascript" src="/ext/d3/d3.js"></script> #+html_head: <script type="text/javascript" src="point.js"></script> #+html_head: <script type="text/javascript" src="fx.js"></script> #+html_head: <script type="text/javascript" src="fx_view.js"></script> #+html_head: <script type="text/javascript" src="parametric-drag-example.js"></script>
then this embedded javascript runs (see browser dev console)..
#+begin_export html
<div id="frame" style="border: 1px solid blue; max-width: 60em"></div>
<script type="text/javascript">
window.onload = function() { ex.start(this); }
</script>
#+end_export