| var moveItems = (function(){ | |
| var todoNode = 0; | |
| var todoLink = 0; | |
| var MAX_NODES = 240; | |
| var MAX_LINKS = MAX_NODES/2; | |
| var restart = false; | |
| function moveSomeNodes(){ | |
| var n; |
| import couchdb | |
| view = { | |
| "_id": "_design/seeds", | |
| "fulltext": { | |
| "by_seed": { | |
| "index": """function(doc) { | |
| if (doc.seeds) { | |
| var d = new Document(); | |
| for (var i=0; i<doc.seeds.length; i++) { |
| // Save this in a bookmarklet and click it on a page: | |
| javascript:(function(){function d(a,c){document.body.style.webkitClipPath="circle("+a+"px, "+c+"px, "+b+"px)"}var b=90;window.addEventListener("mousemove",function(a){d(a.pageX,a.pageY)});window.addEventListener("mousewheel",function(a){if(a.shiftKey){a.preventDefault();var c=a.wheelDeltaY;b+=-c;b=0<c?Math.max(90,b):Math.min(b,window.innerHeight/2);d(a.pageX,a.pageY)}})})(); | |
| // Or paste this in the console and mouse over the page. | |
| // SHIFT+mousewheel scroll makes the circle bigger/smaller. | |
| (function() { | |
| var radius = 90; // px |
| //simple filter to decode html-encoded values, for display in options or inputs | |
| //optimized so that it doesn't redo the expensive decoding every time | |
| myApp.filter('decoded', function() { | |
| "use strict"; | |
| let e = null; //only init as-needed, and keep around | |
| let cache = {}; | |
| function htmlDecode(input) { | |
| if (cache[input]) { |
A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.
It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.
I used Final Cut Pro to crop and export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg
| license: gpl-3.0 | |
| height: 960 |
This was made as an example of how to add elements to a SVG container upon mouse-click. Click in the rectangle and see what happens!
See http://www.puzzlr.org/?p=46 for a more detailed explanation and walkthrough of the code.
This example demonstrates using d3.drag with d3.forceCollide to implement draggable circles with collision detection.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <body> | |
| <canvas width="960" height="500"></canvas> | |
| <script> | |
| var canvas = document.querySelector("canvas"), |
